ueditor简单使用与踩坑记录

最新推荐文章于 2022-11-11 15:11:04 发布

想要成仙的菜鸟前端

最新推荐文章于 2022-11-11 15:11:04 发布

阅读量963

点赞数

分类专栏： jquery+requie.js

本文链接：https://blog.csdn.net/qq_44441669/article/details/106717872

版权

jquery+requie.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最开始使用kindeditor,发现里面的给文字加底纹，ie浏览器（所有版本）都不管用，并且在所有的浏览器中选中部分加底纹内容化清空底纹失效。并且多次试几次会变乱。。。。。
我以为是我哪里出错了，打开kindeditor官网，发现官网的demo 上就有这个错，更无语。。这个插件最新一次的维护更新是2016年。。。。想说都不能让使用其他最新的插件吗？这项目太老了。。。唉
网上百度了很多的插件，能兼容ie8的也就是这几个插件，并且其他的插件，其他的项目组没有用过，不敢试错啊。
问了项目组研发组长，说其他的项目有使用ueditor的，这个插件是百度前端团队研发的。在官网上试了一下，没看出哪里有bug，就尝试更换插件，也就是重头来过。。。。。

官网：http://ueditor.baidu.com/website/

下载版本：

最新版本：1.4.3版本jsp,utf-8版本的。（官网上也不写个说明到底适合下载什么版本的，让我下载了好几个都不能用，也是心累啊）在右上角的百度云盘里面下载，否则，网速巨慢。

引入js文件：

<script type="text/ javascript" src="../ ../ ../src/assets/ lib/ueditor/ueditor.config.js"></script>
<script type="text/ javascript" src=" ../ ../ ../src/assets/lib/ueditor/ueditor.all.js"></script>
<script type="text/ javascript" src="../ ../ ../src/assets/lib/ ueditor/lang/zh-cn/zh-cn. js"></script>

初始化脚本：

<script type= "text/ javascript">
    var ue = UE.getEditor( ' custgDspscalbr ,{
        toolbars:[
                [ 'undo', 'redo','bold', 'italic','underline', 'removeformat'，'forecolor','backcolor','rowspacingtop','rowspacingbottom','lineheight','customstyle ','paragraph', 'fontfamily', ' fontsize','indent', ' justifyleft', 'justifycenter','justifyright'，' justifyjustify' ]
            ],
        autoHeightEnabled: false,
        autoFloatEnabled: false,
        initialFramewidth: 915,
        initialFrameHeight :143,
        elementPathEnabled:false,//去掉下面的path路径显示
        wordCount:true,//字数统计开启
        max imumWords : 1000//允许的最大字数
    });
</script>

css路径问题：（ueditor.css等css文件加载失败）

ueditor.config.js修改路径

window. UEDITOR_ HOME_ _URL = "../../ ../src/assets/lib/ueditor/";//在此根据自己项目目录更换文件路径
var URL = window.UEDITOR_HOME_URL || getUEBasePath();

去掉输入内容保存成功提示

ueditor.config.js原代码
注释去掉，改成 false

//启用自动保存
，enableAutoSave: false

同时也要找到 ueditor.all.js中的autosave方法：
在这里插入图片描述

增加代码：

if (!me.getOpt('enableAutoSave')) {
    return;
}

zeroclipboard is not defined错误：

找到ZeroClipboard.js 在 third-party 文件夹下的zeroclipboard下

if (typeof define === "function" && define.amd) {
    define(function() {
      return ZeroClipboard;
    });
  } else if (typeof module === "object" && module && typeof module.exports === "object" && module.exports) {
    module.exports = ZeroClipboard;
  } else {
    window.ZeroClipboard = ZeroClipboard;
  }

这是如果页面有adm加载方式的话，ZeroClipboard 也会以这种方式调用，所以ZeroClipboard不会把自己暴露为全局变量。
将上面的代码改为：

//if (typeof define === "function" && define.amd) {
  //  define(function() {
  //    return ZeroClipboard;
  //  });
  //} else if (typeof module === "object" && module && typeof module.exports === "object" && module.exports) {
  //  module.exports = ZeroClipboard;
  //} else {
    window.ZeroClipboard = ZeroClipboard;
 // }

直接这样。那ZeroClipboard 就不amd加载了，成为了全局变量

显示controller.js未找到

如果你的项目没有用到和后台交互的，比如上传文件等，直接把 ueditor.config.js文件中这行代码注释掉：

//服务器统请求接口路径
// , serverurl: URL + "jsp/control Ler.jsp"

初始化默认的字体不是要求的字体大小：

在ueditor.all.js文件中，搜索 默认字体和字号 找到：font-size 更改就可以了（字体也是一样的道理）

//设置默认字体和字号
//font- family不能呢随便改，在safari 下fillchar会 有解析问题
' body{margin: 8px; font-family:sans-serif;font-size:14px;}' +
//设置段落间距

API简单使用

给富文本框中设置值的时候，一定要加上ue.ready (同样的道理，获取值的时候也要加上)

ue.ready(function() {
    //设置编辑器的内容
    ue.setContent('hello');
    //获取html内容，返回: <p>hello</p>
    var html = ue.getContent();
    //获取纯文本内容，返回: hello
    var txt = ue.getContentTxt();
});

http://ueditor.baidu.com/doc/

如果想统计的字数加上html标签的字数修改方法：

打开ueditor.all.js

getContentLength: function ( ingoneHtml, tagNames) {
    var count = this. getContent( cmd: false, fn: false, notSetCursor: true) . length;
    // 注释开始
    //下面的判断是为I统计显示在页面上的用户可见的字数。注释掉，统计的是加上htmL标签的字数
    if (ingoneHtml) {
        tagNames = (tagNames  || []).concat([ 'hr', 'img' ,'iframe']);
        count = this. getContentTxt().replace(/[\t\r\n]+/g,'').length;
        for (var i = 0, ci; ci = tagNames[i++];) {
        count += this . document. getElementsByTagName(ci). length; 
    }
    // 注释结束
    return count;
}

多学会自己简单的封装函数：

//禁用与开启富文本编辑器公共方法:
var toggleEnableEditor = function (flag) {
    if (flag) {//开启
        // $( '#disabledMask '). hide();
        ue.ready(function() {
            ue.setEnabled();
        });
        } else {//禁用
        // $( '#disabledMask '). show();
        ue.ready(function() {
            ue.setDisabled();
        });
    }
}

获取富文本的内容与将富文本获得到的带有html标签的字符串渲染到其他的地方

最开始将获取到的带有html标签的字符串直接放到一个div中，进行渲染，刚开始没问题，后面发现富文本中的斜体样式，是给字体外面加上了一个<em>倾斜字体</em> 但是渲染的时候，谷歌浏览器渲染失败。不支持这个标签，并且在富文本中设置行间距的时候和渲染到div中展示的样式有轻微的差别。所以不适用div渲染，也使用富文本来渲染（模拟一个div）

    var ue = UE.getEditor( ' custgDspscalbr ,{
        toolbars:[],
        autoHeightEnabled: false,
        autoFloatEnabled: false,
        initialFramewidth: 915,
        initialFrameHeight :143,
        elementPathEnabled:false,//去掉下面的path路径显示
        wordCount:false,//字数统计关闭
        //max imumWords : 1000//允许的最大字数
    });
    // 这样外表就是一个和div一样的效果

后台服务器转义问题

前端把从富文本中获取到的带有HTML标签的字符串（例如<p></p>）后台服务器在接收的时候，可能会为了防止标签的注入，为了安全起见，会把所有的 < 和 > 都转化为 < 和 > 再给前端返回。但是这时候前端在拿到服务器传给的数据的时候，再次把渲染到富文本上，会原封不动的把 < 和 > 也给渲染出来。所以这时候，前端可以每次在给服务器传递数据的时候，把 < 和 > 先转义为 < 和 > ，然后再给后台，同样拿到后台的数据，先反转义（把 < 和 > 转换成 < 和 > ），再渲染。我这里使用了正则进行转义与反转义。

//转义
var htmlEncodeByRegExp = function (str) {
    var temp = "";
    if(str.length == 0) return "";
    temp = str.replace(/&/g,' '&amp;");
    temp = temp.replace(/</g, "&lt;");
    temp = temp . replace( />/g, replaceValue: "&gt;");
    // temp = temp. replace(/ \s/g, "&nbsp;");正转义会出现不必要的空格， 导致后面反转会出错。例background属性值之间会多出空格被转义
    temp = temp . replace( /\'/g, replaceValue: "&#39;");
    temp = temp. replace( /\"/g, replaceValue: "&quot;");
    return temp;|
}

//反转义
var htmlDecodeByRegExp = function (str) {
    var temp ="";
    if (str.length = 0) return;
    temp = str.replace(/&amp;/g, "&");
    temp = temp. replace(/&lt;/g, "<");
    temp = temp.replace(/&gt;/g,">");
    // temp = temp. replace(/&nbsp;/g," ");
    temp = temp. replace(/&#39;/g,"\'");
    temp = temp. replace(/&quot;/g,"\"");
    return temp;
}