HTML编辑器UEditor的简单使用
參考自：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的简单使用的更多相关文章
- 百度编辑器ueditor的简单使用
最近刚被分配了以个消息发布的任务,其中用到了富文本编辑器.以前也用过,不过这次我选择的是百度富文本编辑器ueditor1_4_3-utf8-jsp版的. 其实看ueditor功能很强大,不过百度的设计 ...
- 百度编辑器Ueditor的简单调用
先去ueditou.baidu.com网站下载百度编辑器,放到项目根目录下的Data目录中,然后引入文件 <!DOCTYPE html> <html lang="en&qu ...
- 富文本编辑器UEditor自定义工具栏（三、自定义工具栏功能按钮图标及工具栏样式简单修改）
导读 富文本编辑器UEditor提供丰富了定制配置项,如果想设置个性化的工具栏按钮图标有无办法呢?答案是肯定的!前两篇博文简要介绍了通过将原工具栏隐藏,在自定义的外部按钮上,调用UEditor各命令实 ...
- 关于富文本编辑器ueditor（jsp版）上传文件到阿里云OSS的简单实例，适合新手
关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手 本人菜鸟一枚,最近公司有需求要用到富文本编辑器,我选择的是百度的ueditor富文本编辑器,闲话不多说,进入正 ...
- 在ASP.NET Core中使用百度在线编辑器UEditor
在ASP.NET Core中使用百度在线编辑器UEditor 0x00 起因 最近需要一个在线编辑器,之前听人说过百度的UEditor不错,去官网下了一个.不过服务端只有ASP.NET版的,如果是为了 ...
- 百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程之更改图片和附件上传路径
本文是接上一篇博客,如果有疑问请先阅读上一篇:百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程 默认UEditor上传图片的路径是,编辑器包目录里面的net目录下 下面就演示如 ...
- [转载]百度编辑器-Ueditor使用
前段时间发表过一篇关于“KindEditor在JSP中使用”的博文.这几天在沈阳东软进行JavaWeb方面的实习工作,在一个CMS系统的后台和博客板块中又要用到文本编辑器,突然发现了这个——百度编辑器 ...
- 百度编辑器 ueditor .net开发
ueditor1.4.3 下载地址:http://pan.baidu.com/s/1bnCQVtd <!--editor--> <script type="text/j ...
- drupal7 安装百度编辑器Ueditor及后续使用
参考文章:drupal7安装百度编辑器ueditor 一.下载 1.需要下载安装的模块: 1.1.wysiwyg 1.2.ueditor 1.3Libraries 下载后安装在\sites\all\m ...
随机推荐
- Mavne + Spring整合CXF
http://blog.csdn.net/xiongyu777888/article/details/23787615(没毛病) http://blog.csdn.net/hbsong75/artic ...
- C#(WinForm)上传图片保存到数据库和从数据库读取图片显示到窗体
//浏览图片 private void btnUp_Click(object sender, EventArgs e) { OpenFileDialog ofd = new OpenFileDialo ...
- Linq 实现普通sql中 where in 的功能
user.ProjectIds 的值是使用逗号分隔的 例如:1,2,3 projectList = (from a in projectList where (user.ProjectIds.Spli ...
- 将对象保存至文件——CArchive
CArchive允许以一个二进制的形式保存一个对象的复杂网络,也可以再次装载它们,在内存中重新构造,这一过程叫作串行化/序列化(Serialization),简单的说,CArchive与CFile配合 ...
- 【USACO 1.5.3】特殊的质数肋骨
[题目描述]农民约翰的母牛总是生产出最好的肋骨.你能通过农民约翰和美国农业部标记在每根肋骨上的数字认出它们. 农民约翰确定他卖给买方的是真正的质数肋骨,是因为从右边开始切下肋骨,每次还剩下的肋骨上的数 ...
- asp.net使用Mysql乱码处理
在asp.net与mysql数据库打交道的时候,由于配置的问题,会遇到自己写的方法在读取数据库中数据的时候,英文,数字可以正常通过,但是中文就无法通过,以登录为例(方法略),当输入英文用户名的时候可以 ...
- MVC之序列化
1.AdminUserInfo.cs [Serializable]序列化类——System.SerializableAttribute 串行化是指存储和获取磁盘文件.内存或其他地方中的对象.在串行化时 ...
- [Git]Git远程仓库
1.创建ssh key 查看主目录下面 C:\Users\Administrator\.ssh 是否存在 id_rsa 和 id_rsa.pub 文件,如果不存在需要generate new key. ...
- php常用的排序算法与二分法查找
一 : 归并排序 将两个的有序数列合并成一个有序数列,我们称之为"归并".归并排序(Merge Sort)就是利用归并思想对数列进行排序.根据具体的实现,归并排序包括"从 ...
- css position 相对定位
<html> <head> <style type="text/css"> h2.pos_left { position:relative; l ...