前几天在做一个项目中须要用富文本编辑器,终极选定用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> <br />
复制代码
运行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"
- });
复制代码
|