HTML编辑器UEditor的简单使用
来源:互联网 发布:淘宝无线直通车怎么开 编辑:程序博客网 时间:2024/05/22 01:50
参考自:http://ueditor.baidu.com/website/document.html
关于HTML编辑器,试过FCKeditor,升级版的CKeditor,还有TinyMCE,最近在尝试使用百度的UEditor。对比一下还是觉得UEditor的配置较简单,上手快并且文档和例子也很齐全。那么这里以UEditor1.2.3.0PHP版本UTF-8版为例梳理一下UEditor的使用流程。
1.首先是UEditor的文档结构
_examples:编辑器各种版本的示例页面
_src:JS文件
dialogs:弹出对话框对应的资源和JS文件
lang:语言包文件
PHP:文件上传处理,远程图片抓取,图片在线管理,屏幕截图相关文件
themes:样式图片和样式文件
third-party:第三方插件
editor_all.js:_src目录下所有文件的打包文件
editor_all_min.js:editor_all.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中的配置项};</script>
其中最重要的配置是第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" style="width:800px"></script><script type="text/plain" id="myEditor1" style="width:800px"><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']]//更多其他参数,请参考editor_config.js中的配置项});editor_a1.render( 'myEditor1' );</script>
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>
- HTML编辑器UEditor的简单使用
- HTML编辑器UEditor的简单使用
- HTML编辑器UEditor的简单使用
- 百度编辑器ueditor的简单使用
- 百度编辑器ueditor的简单使用
- 百度编辑器ueditor的简单使用
- 百度编辑器ueditor的简单使用
- 百度编辑器ueditor的简单使用
- 百度编辑器ueditor的简单使用
- 百度编辑器UEditor的简单使用教程
- Ueditor编辑器的使用
- UEditor编辑器的使用
- ueditor编辑器的使用
- ueditor编辑器的使用
- ueditor编辑器的使用
- 百度编辑器UEditor 简单使用
- 百度编辑器UEditor 简单使用
- 百度编辑器UEditor 简单使用
- 找规律 0 1 3 8 22 64
- JAVA编程中写出好代码
- 在Finder标题栏上显示完整路径
- 黑马程序员——静态导入,可变参数,自动拆箱装箱以及享元设计模式 JDK1.5新特性
- Python引用模块
- HTML编辑器UEditor的简单使用
- Joomla 2.5 多语言网站的设计
- 什么是多态(OOA/D/P中之精华)
- 面试题---->字符串匹配
- Android NDK入门(三)-- native代码的调试方法
- 挺喜欢的入门指引-----vim
- 网络基础教学(一)——以搜索为代表的网络应用
- Ubuntu 12.04 下安装 JDK 7
- Debug Lua