使用百度编辑器中遇到的问题整理如下

首先将百度编辑器的插件导入项目中，当然可以删掉不需要的插件资料
百度编辑器的官方网站，在这里可以下载你想要下载的版本（虽然我用时最后一版更新的时间为2016-05-18，但是在我使用的过程中完全满足我的需求，还没有发现什么bug）：
http://ueditor.baidu.com/website/

修改文本编辑器右下角的文字显示和样式
html页面代码：

//这个script标签用来生成初始编辑器
<script id="container" name="" type="text/plain">
                   这里是你回显在界面中的数据，
</script>
//下面引用js组件，注意这两个组件的顺序不能颠倒否则，初始化编辑器时会有错
<script type="text/javascript" src="~/lib/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="~/lib/ueditor/ueditor.all.js"></script>
//下面的js代码初始化组件的大小
<script type="text/javascript">
    UE.delEditor("container");
    var ueditor = UE.getEditor('container', {
        initialFrameHeight: 400
    });
</script>

我们有一个需求允许输入的最大文字为10000，当输入超过时服务器就拒绝保存，因此需要在右下角这里显示超出了多少字，具体的操作如下：
在这里插入图片描述要修改上面图片中右下角的显示文字，当文字超出长度时

文件价结构如下：
在这里插入图片描述
修改下图中选中的地方在哪里写，在超出时你想要显示的文字：

修改ueditor.all.js中的
EditorUI.prototype 里面有一个函数 setCount，

function setCount(editor,ui) {
                editor.setOpt({
                    wordCount:true,
                    maximumWords:10000,
                    wordCountMsg:editor.options.wordCountMsg || editor.getLang("wordCountMsg"),
                    wordOverFlowMsg:editor.options.wordOverFlowMsg || editor.getLang("wordOverFlowMsg")
                });
                var opt = editor.options,
                    max = opt.maximumWords,
                    msg = opt.wordCountMsg ,
                    errMsg = opt.wordOverFlowMsg,
                    countDom = ui.getDom('wordcount');
                if (!opt.wordCount) {
                    return;
                }
                var count = editor.getContentLength(true);
                //if (count > max) {
                //    countDom.innerHTML = errMsg;
                //    editor.fireEvent("wordcountoverflow");
                //} else {
                //    countDom.innerHTML = msg.replace("{#leave}", max - count).replace("{#count}", count);
                //}
                //上面注释的代码是原本里面的方法，下面的是根据自己的需求修改的结果
                if (count > max) {
                    // countDom.innerHTML = errMsg;  //这行改成下面：
                    //字数允许最大{#count}个字限制，已超过{#outer}个字，服务器可能拒绝保存！
                    countDom.innerHTML = errMsg.replace("{#outer}", count - max).replace("{#count}", count);
                    editor.fireEvent("wordcountoverflow");
                } else {
                    countDom.innerHTML = msg.replace("{#leave}", max - count).replace("{#count}", count); //:'当前已输入{#count}个字符, 您还可以输入{#leave}个字符。 ',
                }
            }

自定义自己的样式
可以在themes文件下面的iframe.css文件中写自己自定义的样式，如修改选择的图片使其自适应当前文本编辑器的大小。
修改一些样式什么的可以借助chrome的开发者工具来进行调试和修改

使用百度编辑器中遇到的问题整理如下

猜你喜欢