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

首先将百度编辑器的插件导入项目中,当然可以删掉不需要的插件资料
百度编辑器的官方网站,在这里可以下载你想要下载的版本(虽然我用时最后一版更新的时间为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的开发者工具来进行调试和修改

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值