zoukankan      html  css  js  c++  java
  • 百度富文本编辑器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版本的开发包。

    配置:

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

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

    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>
        }
    复制代码

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

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

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

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

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

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

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

    解决代码高亮 不换行问题

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

    .syntaxhighlighter {
    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文件添加为引用。

  • 相关阅读:
    MDK(keil)4.7中文注释乱码解决
    小型功率放大器的设计与制作
    增强输出的电路
    晶体管电路设计学习笔记(一)
    MOSFET学习
    sysTick系统定时器
    C#面向对象 什么是面向对象
    JS基础 超链接、数列的用法,行内元素和块级元素
    JS基础 常用函数、事件、阻止事件冒泡
    JS基础 定时器【setTimeout、setInterval、clearInterval 】
  • 原文地址:https://www.cnblogs.com/xiaoshi657/p/5641674.html
Copyright © 2011-2022 走看看