前几天在做一个项目中需要用富文本编辑器,最终选定用Ueditor编辑器,从官网下载源码(http://ueditor.baidu.com/website/download.html),按照文档创建demo,如下:
1 <!DOCTYPE HTML>
2 <html lang="en-US">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>ueditor demo</title>
7 </head>
8
9 <body>
10 <!-- 加载编辑器的容器 -->
11 <script id="container" name="content" type="text/plain">
12 这里写你的初始化内容
13 </script>
14 <!-- 配置文件 -->
15 <script type="text/javascript" src="ueditor.config.js"></script>
16 <!-- 编辑器源码文件 -->
17 <script type="text/javascript" src="ueditor.all.js"></script>
18
19 <!-- 实例化编辑器 -->
20 <script type="text/javascript">
21 var ue = UE.getEditor('container',{
22 //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
23 toolbars: [['FullScreen', 'Source', 'Undo', 'Redo', 'Bold', 'test']],
24 //focus时自动清空初始化时的内容
25 autoClearinitialContent: true,
26 //关闭elementPath
27 elementPathEnabled: false,
28 //默认的编辑区域高度
29 initialFrameHeight: 300,
30 //最大输入字数
31 maximumWords:500
32 });
33 </script>
34 </body>
35
36 </html>
运行demo,结果编辑器加载不全,下载的源码中缺少ueditor.all.js文件,这个简单,查看官方提供的演示demo,浏览器调试获得整个ueditor.all.js的代码,在本地创建js文件,复制,保存,刷新demo,本以为这样就可以了,现实往往喜欢和你开玩笑~demo没有加载编辑器的样式!!!!
功夫不负有心人啊,最后找到这样一处配置,在ueditor.all.js文件中查找ueditor.css,把这个文件的路径修改正确就OK了,希望能帮到遇到同样问题的小伙伴们。
UE.ui.Editor = function (options) {
var editor = new UE.Editor(options);
editor.options.editor = editor;
utils.loadFile(document, {
href:editor.options.themePath + editor.options.theme + "/_css/ueditor.css",
tag:"link",
type:"text/css",
rel:"stylesheet"
});
【说明】:本文章由站长整理发布,文章内容不代表本站观点,如文中有侵权行为,请与本站客服联系(QQ:254677821)!