百度编辑器UEditor的插件开发
1.概述
UEditor是由百度web前端研发部开发的所见即所得富文本web编辑器，具有轻量、可定制、注重用户体验等特点，开源基于BSD协议，允许自由使用和修改代码。
2.下载UEditor
截至2013.11.27，最新版本为1.3.5，下面是具体的相关文档的下载地址：
百度下载地址：ueditor.baidu/website/download.html#ueditor；
官方文档资料地址:ueditor.baidu/website/document.html；
官方API地址：ueditor.baidu/doc/。
3.源码包文件说明
从上下载完整源码包，解压到任意目录，解压后的源码目录结构如下所示：
•_examples：编辑器的示例页面
•dialogs：弹出对话框对应的资源和JS文件
•themes：样式图片和样式文件
•fig.js：编辑器的配置文件
•editor.api.js：开发版的所有js文件导入
•editor.all.js：使用版的所有js文件
•lang：语言文件
•jsp、net、php：涉及到服务器端操作的文件
•third-party：第三方插件
4.部署和使用
UEditor可供普通用户使用，同时UEditor的插件机制也为二次开发者提供了自定义插件的开发。
1）在项目的任一文件夹中建立一个用于存放UEditor相关资源和文件的目录。
2）创建简单的编辑器实例，首先在html页面中准备一个dom容器，容器可以是<textareaid="editor"></textarea>或<divid="editor"></div>，也可以是<scripttype="text/plain"id="editor"></script>标签。
3）引入相关文件
1
2
3
4
5
<scripttype="text/javascript"src="fig.js"></script>
<scripttype="text/javascript"src="editor.api.js"></script>
4）创建编辑器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<scripttype="text/javascript"charset="utf-8">
//通过new操作符实例化编辑器对象
varmyEditor=newbaidu.editor.ui.Editor();
der('editor');//渲染dom容器
//使用UE.getEditor(）实例化编辑器对象
Editor('myEditor');
//通过new操作符实例化编辑器对象并自定义配置项
varmyEditor=newbaidu.editor.ui.Editor({
toolbars:[//自定义工具栏
['FullScreen','Source','Undo','Redo']
],
wordCount:false,//关闭字数统计
elementPathEnabled:false,//关闭elementPath
initialFrameHeight:300//默认的编辑区域高度
});
der('editor');
//通过UE.getEditor(）实例化编辑器对象并自定义配置项
UE.getEditor('myEditor',{
toolbars:[//自定义工具栏
['FullScreen','Source','Undo','Redo']
],
wordCount:false,//关闭字数统计
elementPathEnabled:false,//关闭elementPath
initialFrameHeight:300//默认的编辑区域高度
})
</script>
说明：使用<textarea>和<scripttype="text/plain">标签做渲染容器，可以在容器中设置编辑器初始化的内容，如：
什么是富文本编辑器<textareaid="editor">编辑器初始化的内容</textarea>；

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。