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