ueditor 使用
之前在微信上用到富文本编辑器,选用了ueditor
之后又在项目中使用到了,因此打算写下来记录一下。
1 首先去下载ueditor
2 我的是 MVC项目,贴一下:粘贴到Content下
3 然后在 BundleConfig中配置 css以及 js的虚拟路径
//Editor
bundles.Add(new ScriptBundle("~/Content/ueditor").Include(
"~/Content/ueditor/ueditor.config.js",
"~/Content/ueditor/ueditor.all.js"));
4 创建 View并使用
@Scripts.Render("~/Content/ueditor")
<div>
@Html.TextAreaFor(model => model.htmlStr, new { id = "editor", style = "width:100%;height:500px;" })
</div>
<script>
//实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
//var ue = UE.getEditor('editor');
var editor = new baidu.editor.ui.Editor({
UEDITOR_HOME_URL: '/Content/ueditor/',//配置编辑器路径
iframeCssUrl: '/Content/ueditor/themes/iframe.css',//样式路径
initialContent: "",//初始化编辑器内容
autoHeightEnabled: true,//高度自动增长
minFrameHeight: 500//最小高度
});
editor.render('editor');
</script>
5 后台接收
[ValidateInput(false)]
[HttpPost]
public ActionResult Edit(string htmlStr)
{
//这里的htmlStr 是带有 html标签的内容
return View();
}
效果如下:
PS: 图片的上传路径设置,ueditor\net\config.json 中设置 "imageUrlPrefix": "", /* 图片访问路径前缀 */
不填写则为相对路径。一般如果发布到iis去,可以填写一下网站域名例如http://www.baidu.com
ueditor 使用的更多相关文章
- 在ASP.NET Core中使用百度在线编辑器UEditor
在ASP.NET Core中使用百度在线编辑器UEditor 0x00 起因 最近需要一个在线编辑器,之前听人说过百度的UEditor不错,去官网下了一个.不过服务端只有ASP.NET版的,如果是为了 ...
- 对百度的UEditor多图片上传的一些补充
我已经写了一篇文章关于百度的UEditor提取多图片上传模块.如果还没有看过,请点击以下链接查看 http://www.cnblogs.com/luke1006/p/3719029.html 出差了两 ...
- 关于百度编辑器UEditor的一点说明
大家在使用的时候要特别注意editor_config.js中的“URL”这个参数 我的理解:1.这个参数是editor整个结构的总路径 2.首先要把这个路径配置好了.才能正常的显示, ...
- UEditor编辑器使用示例
1. UEditor下载 UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. 下载链接:http ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(57)-插件---ueditor使用
系列目录 目录: 前言 开发环境 知识点 初始使用 自定义工具栏 设置和读取编辑器内容 文件上传 ueditor加水印 ---------------------------------------- ...
- UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案
UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效 ...
- UEditor百度富文本编辑器--preview在线预览时头部被挡住的解决方案
问题截图: 正常情况应该是如下显示: 解决方案: 1.打开ueditor/dialogs/preview/preview.html 2.找到body节点下面这一句 document.getElemen ...
- 百度编辑器UEditor与UEditor 公式插件完整Demo
1.下载UEditor(我的是.net项目) 2.下载UEditor公式插件 3.新建解决方案和项目 4.在浏览器中预览index.html页面 结果: 5.index.html源码 <!DOC ...
- Ueditor上传图片后自定义样式类名
Ueditor是百度的一个富文本插件,如果使用者会前端语言的话,那适用性就很好,特别是现在移动端纵横的情况.但往往使用者并不懂编程,要让他们使用前端语言的话是不可能的,这就需要我们在开发时就定义好整个 ...
- easyui与ueditor合用问题
在联合使用easyui与ueditor的时候,当在dialog中通过href打开一个页面,页面中含有ueditor,如果使用dialog的close方法,可以理解为只是将dialog给隐藏了,再将点击 ...
随机推荐
- python 方法调用
获取当前时间 today=time.strftime('%Y-%m-%d',time.localtime(time.time())) 取得时间相关的信息的话,要用到python time模块,pyth ...
- Swift开发iOS项目实战视频教程(二)---图片与动画
本课主要介绍UIImageview.NSTimer的使用.并介绍了一种动画实现方式. 本教程摒弃枯燥的语法和知识解说.全是有趣有料的项目实战! 视频优酷链接:v.youku.com/v_show/id ...
- BZOJ3451 Normal 期望、点分治、NTT
BZOJCH传送门 题目大意:给出一棵树,求对其进行随机点分治的复杂度期望 可以知道一个点的贡献就是其点分树上的深度,也就是这个点在点分树上的祖先数量+1. 根据期望的线性性,考虑一个点对\((x,y ...
- 重装系统之无法在驱动器0的分区1上安装windows
在通过U盘或光盘安装win8/win8.1/win10 时,遇到无法安装的问题,提示“无法在驱动器0的分区1上安装windows”,格式化分区也不能解决,进而提示Windows无法安装到这个磁盘,选中 ...
- 使用sklearn进行K_Means聚类算法
首先附上官网说明 [http://scikit-learn.org/stable/modules/generated/sklearn.cluster.KMeans.html#examples-usin ...
- Python高阶函数--map
map()函数 map()是 Python 内置的高阶函数,它接收一个函数 f 和一个 list,并通过把list 的每个元素依次作用在函数 f 上,得到一个新的 list 并返回. 例如,对于lis ...
- Flutter - 本地化语言
Flutter有很多本地化的packages使用,我现在用的是 flutter_i18n 项目主页:https://pub.dartlang.org/packages/flutter_i18n 1.安 ...
- JavaScript如何实现继承
// 原型方式的'继承' function Person(name) { //定义一个Person的构造函数 this.name = name; //添加属性 } Person.prototype.s ...
- CSS 外边距
CSS 外边距围绕在元素边框的空白区域是外边距.设置外边距会在元素外创建额外的“空白”. 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. ##### ...
- CSS文本实例
CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等.#############################CSS 文本属性属 ...