一款好用的HTML编辑器（UEditor）使用教程

1.首先是UEditor的文档结构

_examples：编辑器各种版本的示例页面

_src：JS文件

dialogs：弹出对话框对应的资源和JS文件

lang：语言包文件

PHP：文件上传处理，远程图片抓取，图片在线管理，屏幕截图相关文件

themes：样式图片和样式文件

third-party：第三方插件

editor_all.js：_src目录下所有文件的打包文件

editor_all_min.js：editor_all.html' target='_blank'>js文件的压缩版，可以在正式部署时才采用

editor_config.js：编辑器的配置文件

2.系统配置

UEditor的配置可以分为系统默认配置和用户自定义配置两种类型。系统默认配置分散在各个对应的核心或者插件文件之中，对用户不可见。当用户注释掉自定义配置时起作用。用户自定义配置包括两种类型，一种位于editor_config.js文件之中，优先级高于系统默认配置；另一种位于实例化编辑器时传入的参数中，优先级最高。默认情况下，UEditor在editor_congfig.js注释掉了所有可以省略的配置项，采用系统默认配置，若取消注释，则以该配置项为准；未注释的配置项要求用户必需按照项目实际填写。

以下是自己定义的一个简单配置：

 script type= text/javascript // 自定义的编辑器配置项,此处定义的配置项将覆盖editor_config.js中的同名配置var editorOption = {//这里可以选择自己需要的工具按钮名称,此处仅选择如下四个toolbars:[[ FullScreen , Source , Undo , Redo ]]//更多其他参数，请参考editor_config.js中的配置项};

其中最重要的配置是第28行关于URL参数的配置，关系到图片上传，处理等路径，需要配置为uediotr在网站的相对路径或者绝对路径。如我的项目名称为t，根目录为www，则URL的值设置如下：

URL = window.UEDITOR_HOME_URL|| /t/UEditor/ 

3.引入配置文件，JS文件和主题CSS文件

 meta http-equiv= Content-Type content= text/html; charset=UTF-8  script type= text/javascript src= UEditor/editor_config.js /script  script type= text/javascript src= UEditor/editor_all.js /script  link rel= stylesheet href= UEditor/themes/default/ueditor.css 

4.创建编辑器实例及其DOM容器

 form action= method= post name= myForm  !--以下引入UEditor编辑器界面--  script type= text/plain id= editor name= myContent /script //此处不设置name，则editor默认名字为 editorValue ，可以在 //editor_config.js中配置参数textarea，或者在此处设置 input type= submit name= submit value= upload /  /form 

5.设置选项并且渲染编辑器

如果需要有不同设置的ueditor，可以分别定义之后设置不同的自定义选项再渲染编辑器，

 script type= text/plain id= myEditor >
 6.前后台数据交互
 对于PHP可以直接用$_POST[ ueditorName ]获取编辑器的值，其中ueditorName的值为初始化编辑器时ueditor的name值。
 以下为完整的渲染2个ueditor的代码
 !DOCTYPE HTML  html  head  meta http-equiv= Content-Type content= text/html; charset=UTF-8  title UEditor /title  !--以下为引入UEditor资源部分--  script type= text/javascript src= UEditor/editor_config.js /script  script type= text/javascript src= UEditor/editor_all.js /script  link rel= stylesheet href= UEditor/themes/default/ueditor.css  !--以上为引入UEditor资源部分--  /head  body  form action= test.php method= post name= myForm  !--以下引入UEditor编辑器界面--  script type= text/plain id= myEditor name= myContent 这是一个测试还是一个测试 /script  input type= submit name= submit value= upload /  /form  script type= text/plain id= myEditor1 p 这里我可以写一些输入提示 /p /script  script type= text/javascript  var editor_a = new baidu.editor.ui.Editor(); editor_a.render( myEditor //此处的参数值为编辑器的id值 var editor_a1 = new baidu.editor.ui.Editor({ //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个 toolbars:[[ FullScreen , Source , Undo , Redo , Bold ]], //focus时自动清空初始化时的内容 autoClearinitialContent:true, //更多其他参数，请参考editor_config.js中的配置项 editor_a1.render( myEditor1  /script  /body  /html
【相关推荐】
1. 免费html在线视频教程
2. html开发手册
3. VeVb.com原创html5视频教程
以上就是一款好用的HTML编辑器（UEditor）使用教程的详细内容，html教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。