百度富文本编辑器UEDITOR

前言

http://jingyan.baidu.com/article/a948d65108d7fa0a2dcd2e8d.html

　　配置<a>测试啊</a>.net mvc4项目使用ueditor编辑器，在配置过程中遇见了好几个问题，以此来记录解决办法。编辑器可以到http://ueditor.baidu.com/website/download.html#ueditor处下载.net 的开发包，如下图，我下载的是1.2.6.1net版本的开发包。

百度富文本编辑器UEDITOR

配置：

1、将开发包放到mvc4项目中，在我的项目中我放到了Content目录下

2、在模板页中引入js和样式文件：

百度富文本编辑器UEDITOR

3、在页面中配置初始化编辑器，在页面中配置textarea显示为编辑器，编辑器更多的参数设置可参考ueditor.config.js里面的配置说明：

@using(Html.BeginForm()){

    <textarea id="editor" name="editor">

</textarea>

    <input type="submit" value="提交" />

}

@section scripts{

    <script type="text/javascript">

        var editor = new baidu.editor.ui.Editor({

            UEDITOR_HOME_URL: '/Content/ueditor/',//配置编辑器路径

            iframeCssUrl: '/Content/ueditor/themes/iframe.css',//样式路径

            initialContent: '欢迎使用ueditor',//初始化编辑器内容

            autoHeightEnabled: true,//高度自动增长

            minFrameHeight:500//最小高度

        });

        editor.render('editor');

    </script>

    }

到这一步正常情况下，页面已经显示出编辑器的样子了，如图：

百度富文本编辑器UEDITOR

4、解决图片上传问题，通过查看ueditor的配置文件及imageUp.ashx很明显的可以发现编辑器会把图片放到uditor/net/upload或upload1文件夹，若不存在则创建文件夹，此时上传图片会出现网络连接错误的提示，通过F12查看错误如图

百度富文本编辑器UEDITOR

查看Uploader文件默认属性为编译，将其属性改为内容以后重新运行程序，图片上传成功，如下图：

百度富文本编辑器UEDITOR

5、解决表单提交错误提示问题，从.Net Framework 4.0 开始，ASP.NET开始强制检测Request参数安全，直接提交会出现如下错误，

百度富文本编辑器UEDITOR

这个问题在后台action标记[ValidateInput(false)]来解决，如图：

百度富文本编辑器UEDITOR

6、编辑器等内容我们可以通过FormCollection来接收，从而实现内容保存，处理图片等相关操作

百度富文本编辑器UEDITOR

以上是百度编辑器在mvc项目中的简单配置，个人感觉还是很好用的，已经在多个项目中使用了，没有感觉像很多人说的那样不好使，个人反而感觉不错。

解决代码高亮不换行问题

UEditor百度编辑器很好用,现在最新版本是1.2.6.0版本,代码高亮这个功能也很有用,但是本站集成百度编辑器之后却发现,代码高亮不自动换行,看到好多网友也在反映代码高亮不换行,把父标签都撑大了,针对这个问题,我研究了下代码高亮的CSS,解决了这个问题,其它很简单,把代码高亮的CSS里加了强制换行的代码"word-break:break-all;",经IE和Chrome测试都没问题,算是解决了这个BUG,跟大家分享一下.
解决方法如下:
找到编辑器所在目录,根据"\third-party\SyntaxHighlighter\shCoreDefault.css"这个路径找到这个文件,然后找到syntaxhighlighter这个类,在这个类下面加上word-break:break-all;强制换行即可.

.syntaxhighlighter {

width:100%!important;

margin:.3em 0 .3em 0!important;

position:relative!important;

overflow:auto!important;

background-color:#f5f5f5!important;

border:1px solid #ccc!important;

border-radius:4px!important;

border-collapse:separate!important;

word-break:break-all;

}

然后再将项目里添加一个引用，引用文件是 ueditor/net/Bin/Newtonsoft.Json.dll ，将这个Newtonsoft.Json.dll文件添加为引用。

秒客网

百度富文本编辑器UEDITOR

相关文章