參考自：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 = {

 //这里能够选择自己须要的工具button名称,此处仅选择例如以下四个

 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({

//这里能够选择自己须要的工具button名称,此处仅选择例如以下五个

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({

    //这里能够选择自己须要的工具button名称,此处仅选择例如以下五个

    toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','Bold']],

    //focus时自己主动清空初始化时的内容

    autoClearinitialContent:true,

    //很多其它其它參数，请參考editor_config.js中的配置项

});

    editor_a1.render( 'myEditor1' );

</script>

</body>

</html>

HTML编辑器UEditor的简单使用的更多相关文章

  1. 百度编辑器ueditor的简单使用

    最近刚被分配了以个消息发布的任务,其中用到了富文本编辑器.以前也用过,不过这次我选择的是百度富文本编辑器ueditor1_4_3-utf8-jsp版的. 其实看ueditor功能很强大,不过百度的设计 ...

  2. 百度编辑器Ueditor的简单调用

    先去ueditou.baidu.com网站下载百度编辑器,放到项目根目录下的Data目录中,然后引入文件 <!DOCTYPE html> <html lang="en&qu ...

  3. 富文本编辑器UEditor自定义工具栏（三、自定义工具栏功能按钮图标及工具栏样式简单修改）

    导读 富文本编辑器UEditor提供丰富了定制配置项,如果想设置个性化的工具栏按钮图标有无办法呢?答案是肯定的!前两篇博文简要介绍了通过将原工具栏隐藏,在自定义的外部按钮上,调用UEditor各命令实 ...

  4. 关于富文本编辑器ueditor（jsp版）上传文件到阿里云OSS的简单实例，适合新手

    关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手   本人菜鸟一枚,最近公司有需求要用到富文本编辑器,我选择的是百度的ueditor富文本编辑器,闲话不多说,进入正 ...

  5. 在ASP.NET Core中使用百度在线编辑器UEditor

    在ASP.NET Core中使用百度在线编辑器UEditor 0x00 起因 最近需要一个在线编辑器,之前听人说过百度的UEditor不错,去官网下了一个.不过服务端只有ASP.NET版的,如果是为了 ...

  6. 百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程之更改图片和附件上传路径

    本文是接上一篇博客,如果有疑问请先阅读上一篇:百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程 默认UEditor上传图片的路径是,编辑器包目录里面的net目录下 下面就演示如 ...

  7. [转载]百度编辑器-Ueditor使用

    前段时间发表过一篇关于“KindEditor在JSP中使用”的博文.这几天在沈阳东软进行JavaWeb方面的实习工作,在一个CMS系统的后台和博客板块中又要用到文本编辑器,突然发现了这个——百度编辑器 ...

  8. 百度编辑器 ueditor .net开发

    ueditor1.4.3 下载地址:http://pan.baidu.com/s/1bnCQVtd   <!--editor--> <script type="text/j ...

  9. drupal7 安装百度编辑器Ueditor及后续使用

    参考文章:drupal7安装百度编辑器ueditor 一.下载 1.需要下载安装的模块: 1.1.wysiwyg 1.2.ueditor 1.3Libraries 下载后安装在\sites\all\m ...

随机推荐

  1. AutoLayout学习之理解intrinsicContentSize，Content Hugging Priority，Content Compression Resistance Priority

    TableViewCell的高度计算应该是所有开发者都会使用到的东西,之前都是用代码计算的方法来计算这个高度.最近有时间看了几个计算Cell高度的方法.基本上都用到了AutoLayout,这篇首先介绍 ...

  2. Puer是一个可以实时编辑刷新的前端服务器

    ##Puer是一个可以实时编辑刷新的前端服务器 确保你安装了nodejs(现在还有没nodejs环境的前端? 拖出去喂狗吧) 使用npm全局安装puer命令 npm install puer -g 输 ...

  3. cas sso单点登录系列6_cas单点登录防止登出退出后刷新后退ticket失效报500错

    转(http://blog.csdn.net/ae6623/article/details/9494601) 问题: 我登录了client2,又登录了client3,现在我把client2退出了,在c ...

  4. 重新开始学习javase_IO

    一,认识IO 通过数据流.序列化和文件系统提供系统输入和输出. 流是一个很形象的概念,当程序需要读取数据的时候,就会开启一个通向数据源的流,这个数据源可以是文件,内存,或是网络连接.类似的,当程序需要 ...

  5. 【USACO 2.3.5】控制公司

    [题目描述] 有些公司是其他公司的部分拥有者,因为他们获得了其他公司发行的股票的一部分.例如,福特公司拥有马自达公司12%的股票.据说,如果至少满足了以下三个条件之一,公司A就可以控制公司B了: 公司 ...

  6. python运维开发之第九天

    一.paramiko模块 1.简介 大家会发现,常见的解决方法都会需要对远程服务器必要的配置,如果远程服务器只有一两台还好说,如果有N台,还需要逐台进行配置,或者需要使用代码进行以上操作时,上面的办法 ...

  7. C#程序中将图片转换为二进制字符串，并将二进制字符串转换为图片

    /// <summary> /// 将图片以二进制流 /// </summary> /// <param name="path"></pa ...

  8. UITextFiled自动补全输入，选中补全内容。NSRange和UITextRange的相互转换。-b

    有个需求就是 需要用户输入几位以后账号,可以根据本地存储的登录成功的账号,进行自动补全,并且补全内容为选中状态,不影响用户的新输入. 研究了一下,下面是完整的实现的方法. 补充个下载地址http:// ...

  9. windows10 预览版 中英文官方下载地址+激活密钥+网盘分享

    windows10 预览版 中英文官方下载地址+激活密钥+网盘分享 产品密钥:NKJFK-GPHP7-G8C3J-P6JXR-HQRJR 英语 64 位 (x64)  http://iso.esd.m ...

  10. 安卓使用Dialog创建普通对话框

    Activity页面简单所以XML不再写出.下面给出核心代码: button1=(Button)findViewById(R.id.button1); //为按钮设置监听器  button1.setO ...