之前在微信上用到富文本编辑器,选用了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 使用的更多相关文章

  1. 在ASP.NET Core中使用百度在线编辑器UEditor

    在ASP.NET Core中使用百度在线编辑器UEditor 0x00 起因 最近需要一个在线编辑器,之前听人说过百度的UEditor不错,去官网下了一个.不过服务端只有ASP.NET版的,如果是为了 ...

  2. 对百度的UEditor多图片上传的一些补充

    我已经写了一篇文章关于百度的UEditor提取多图片上传模块.如果还没有看过,请点击以下链接查看 http://www.cnblogs.com/luke1006/p/3719029.html 出差了两 ...

  3. 关于百度编辑器UEditor的一点说明

    大家在使用的时候要特别注意editor_config.js中的“URL”这个参数 我的理解:1.这个参数是editor整个结构的总路径          2.首先要把这个路径配置好了.才能正常的显示, ...

  4. UEditor编辑器使用示例

    1. UEditor下载 UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. 下载链接:http ...

  5. ASP.NET MVC5+EF6+EasyUI 后台管理系统(57)-插件---ueditor使用

    系列目录 目录: 前言 开发环境 知识点 初始使用 自定义工具栏 设置和读取编辑器内容 文件上传 ueditor加水印 ---------------------------------------- ...

  6. UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案

    UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效 ...

  7. UEditor百度富文本编辑器--preview在线预览时头部被挡住的解决方案

    问题截图: 正常情况应该是如下显示: 解决方案: 1.打开ueditor/dialogs/preview/preview.html 2.找到body节点下面这一句 document.getElemen ...

  8. 百度编辑器UEditor与UEditor 公式插件完整Demo

    1.下载UEditor(我的是.net项目) 2.下载UEditor公式插件 3.新建解决方案和项目 4.在浏览器中预览index.html页面 结果: 5.index.html源码 <!DOC ...

  9. Ueditor上传图片后自定义样式类名

    Ueditor是百度的一个富文本插件,如果使用者会前端语言的话,那适用性就很好,特别是现在移动端纵横的情况.但往往使用者并不懂编程,要让他们使用前端语言的话是不可能的,这就需要我们在开发时就定义好整个 ...

  10. easyui与ueditor合用问题

    在联合使用easyui与ueditor的时候,当在dialog中通过href打开一个页面,页面中含有ueditor,如果使用dialog的close方法,可以理解为只是将dialog给隐藏了,再将点击 ...

随机推荐

  1. python 方法调用

    获取当前时间 today=time.strftime('%Y-%m-%d',time.localtime(time.time())) 取得时间相关的信息的话,要用到python time模块,pyth ...

  2. Swift开发iOS项目实战视频教程(二)---图片与动画

    本课主要介绍UIImageview.NSTimer的使用.并介绍了一种动画实现方式. 本教程摒弃枯燥的语法和知识解说.全是有趣有料的项目实战! 视频优酷链接:v.youku.com/v_show/id ...

  3. BZOJ3451 Normal 期望、点分治、NTT

    BZOJCH传送门 题目大意:给出一棵树,求对其进行随机点分治的复杂度期望 可以知道一个点的贡献就是其点分树上的深度,也就是这个点在点分树上的祖先数量+1. 根据期望的线性性,考虑一个点对\((x,y ...

  4. 重装系统之无法在驱动器0的分区1上安装windows

    在通过U盘或光盘安装win8/win8.1/win10 时,遇到无法安装的问题,提示“无法在驱动器0的分区1上安装windows”,格式化分区也不能解决,进而提示Windows无法安装到这个磁盘,选中 ...

  5. 使用sklearn进行K_Means聚类算法

    首先附上官网说明 [http://scikit-learn.org/stable/modules/generated/sklearn.cluster.KMeans.html#examples-usin ...

  6. Python高阶函数--map

    map()函数 map()是 Python 内置的高阶函数,它接收一个函数 f 和一个 list,并通过把list 的每个元素依次作用在函数 f 上,得到一个新的 list 并返回. 例如,对于lis ...

  7. Flutter - 本地化语言

    Flutter有很多本地化的packages使用,我现在用的是 flutter_i18n 项目主页:https://pub.dartlang.org/packages/flutter_i18n 1.安 ...

  8. JavaScript如何实现继承

    // 原型方式的'继承' function Person(name) { //定义一个Person的构造函数 this.name = name; //添加属性 } Person.prototype.s ...

  9. CSS 外边距

    CSS 外边距围绕在元素边框的空白区域是外边距.设置外边距会在元素外创建额外的“空白”. 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. ##### ...

  10. CSS文本实例

    CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等.#############################CSS 文本属性属 ...