前几天在做一个项目中需要用富文本编辑器,最终选定用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"
        });