Ueditor和CKeditor 两款编辑器的使用与配置

一丶ueditor 百度编辑器

1.官方文档，演示，下载地址：http://ueditor.baidu.com/website/index.html

2.百度编辑器的好：Editor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点。

3.如果想定制你想要的编辑器功能：查看官方网站的下载页面即可。

4.编辑器展示：

5.百度编辑器配置。

1.载入js，css文件

2.页面配置

<div id="myEditor"></div> //可以是aspx控件只要id正确即可<script type="text/javascript"> var ue = new baidu.editor.ui.Editor(); ue.render("myEditor"); //这里填写要改变为编辑器的控件id</script>

3.editor_config.js 文件中的路径配置

var tmp = window.location.pathname; URL = window.UEDITOR_HOME_URL || "/SomePackage/Ueditor/ueditor/"; //这里你可以配置成ueditor目录在您网站的相对路径或者绝对路径（指以http开头的绝对路径）

4.如果你要使用传图片功能，还需要修改net文件下的几个文件截图说明吧（这个路径可以直接删除的，试试。不行了自己再调整下）。

改为-->

同理将net文件下其它文件类似的错误更正后即可上传图片。

图片上传默认位置为：net文件夹下。上传一张打开即可发现一个upload文件夹。

5.ueditor 的很多默认配置都在 editor_config.js这个文件中，细心看的话，开启或关闭其中的配置是可以解决很多问题的。

6.我在使用过程中还遇到过编辑器内容影响整体页面的布局问题，这问题是在editor_all.js这个文件中修改的默认样式问题的。

/** * 渲染编辑器的DOM到指定容器，必须且只能调用一次 * @public * @function * @param {Element|String} container */ render:function ( container ) { var me = this, options = me.options; if ( container.constructor === String ) { container = document.getElementById( container ); } if ( container ) { var useBodyAsViewport = ie && browser.version < 9, html = ( ie && browser.version < 9 ? '' : '<!DOCTYPE html>') + '<html xmlns=\'http://www.w3.org/1999/xhtml\'' + (!useBodyAsViewport ? ' class=\'view\'' : '') + '><head>' + ( options.iframeCssUrl ? '<link rel=\'stylesheet\' type=\'text/css\' href=\'' + utils.unhtml( options.iframeCssUrl ) + '\'/>' : '' ) + '<style type=\'text/css\'>' + //这些默认属性不能够让用户改变 //选中的td上的样式 '.selectTdClass{}' + 'table.noBorderTable td{border:1px dashed #ddd !important}' + //插入的表格的默认样式 'table{clear:both;margin-bottom:10px;border-collapse:collapse;word-break:break-all;}' + //分页符的样式 '.pagebreak{display:block;clear:both !important;cursor:default !important;width: 100% !important;margin:0;}' + //锚点的样式,注意这里背景图的路径 '.anchorclass{background: url(\'' + me.options.UEDITOR_HOME_URL + 'themes/default/images/anchor.gif\') no-repeat scroll left center transparent;border: 1px dotted #0000FF;cursor: auto;display: inline-block;height: 16px;width: 15px;}' + //设置四周的留边 '.view{padding:0;word-wrap:break-word;cursor:text;height:100%;}\n' + //设置默认字体和字号 'body{margin:8px;font-family:\'宋体\';font-size:16px;}' + //针对li的处理 'li{clear:both}' + //设置段落间距 'p{margin:5px 0;}' + ( options.initialStyle || '' ) + '</style></head><body' + (useBodyAsViewport ? ' class=\'view\'' : '') + '></body>';

最后对这个编辑器总结下:很好用的，代码很容易读懂，便于修改配置为自己喜欢的想要的。

二丶CKEditor丶CKFinder 国外知名编辑器

1.官方文档，演示，下载地址：http://ckeditor.com/download 丶 http://ckfinder.com/download

2.百度编辑器的好：是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。它志于轻量化，不需要太复杂的安装步骤即可使用。

3.编辑器展示：

4.配置步骤以及一些常用配置

1.引入<script src="ckeditor/ckeditor.js" type="text/javascript"></script>

2.页面代码

<textarea id="TextArea1" cols="20" rows="2" class="ckeditor"></textarea>  <div id="editorSpace"></div>  <script type="text/javascript"> CKEDITOR.appendTo('editorSpace'); </script>

3.配置ckeditor的一些常用配置，在config.js这个文件中，所有的属性配置都可以查阅官方的API：http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html

4.列出一些常用的属性配置：

CKEDITOR.editorConfig = function( config ){ // Define changes to default configuration here. For example: // config.language = 'fr'; // config.uiColor = '#AADC6E'; //config.width=700; //config.height=400; //config.skin='v2'; //自带皮肤种类有3种：Kama（默认）， Office 2003 ， v2 //config.font_names = '宋体;楷体 _GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana'; //如果上传图片或者flash则需要，下面配置ckfinder var ckfinderPath = "/SomePackage/FCKeditor/ckfinder"; //配置为绝对路径 config.filebrowserBrowseUrl = ckfinderPath + "/ckfinder.html"; config.filebrowserImageBrowseUrl = ckfinderPath + "/ckfinder.html?Type=Image"; config.filebrowserFlashBrowseUrl = ckfinderPath + "/ckfinder.html?Type=Flash"; config.filebrowserUploadUrl = ckfinderPath + "/core/connector/aspx/connector.aspx?command=QuickUpload&Type=Files"; config.filebrowserImageUploadUrl = ckfinderPath + "/core/connector/aspx/connector.aspx?command=QuickUpload&Type=Images"; config.filebrowserFlashUploadUrl = ckfinderPath + "/core/connector/aspx/connector.aspx?command=QuickUpload&Type=Flash";};

5.如果上传图片则需在项目中添加ckfinder文件

6.第四步为配置上传图片的第一步

7.改变ckfinder文件夹下的config.ascx,内容如下：

public override bool CheckAuthentication() { //object str = session["username"]; //if (str != null & Convert.ToBoolean(str) == true) //{ // return true; //} return true; //不建议直接返回true，最好做下用户验证判断在返回true（安全）,上面为验证的一个实例 }

8.这样就行了，由于ckfinder不是免费的，所以默认情况下会在上传页面中有红色的广告提示，虽然不影响使用，但总是觉得不爽。
9.去除广告方法：找到ckfinder/core/js/ckfinder_ie.js及ckfinder_gecko.js，将其中的 en.call(window,qo);去掉

最后对这个编辑器总结下:很强大，很好用。世界各地都在用的。

转载原文：http://www.cnblogs.com/knowledgesea/archive/2012/11/19/2776957.html

Ueditor和CKeditor 两款编辑器的使用与配置的更多相关文章

asp.net中两款文本编辑器NicEdit和Kindeditor
过Web开发的朋友相信都使用过富文本编辑器,比较出名的CuteEditor和CKEditor很多人应该已经使用过,在功能强大的同时需要加载的东西也变得很多.下面要推荐的两款富文本编辑器都是使用JS编写 ...
推荐两款富文本编辑器：NicEdit和Kindeditor
做过Web开发的朋友相信都使用过富文本编辑器,比较出名的CuteEditor和CKEditor很多人应该已经使用过,在功能强大的同时需要加载的东西也变得很多.下面要推荐的两款富文本编辑器都是使用JS编 ...
两款.net 下编辑器小结
在asp.net 状态下,有两款不错的网页编辑器,分别是freetextbox和fckeditor,网上不少文章介绍之,现归纳之 1 freetextox 安装时引用freetexbox.d ...
CKEditor富文本编辑器
CKEditor 富文本即具备丰富样式格式的文本.在运营后台,运营人员需要录入课程的相关描述,可以是包含了HTML语法格式的字符串.为了快速简单的让用户能够在页面中编辑带格式的文本,我们引入富文本编辑 ...
Keil MDK 和 IAR 两款ARM开发工具区别比较
首先要说明,没有那款开发工具是万能的,也没有那款工具在所有方面都具有绝对优势.对于Keil MDK-ARM和IAR两款工具择,可以根据自己的习惯来选择,而不应该在使用其中的一款时贬低另外一款,或者总是 ...
CKEditor富⽂本编辑器
在运营后台,运营⼈员需要录⼊商品并编辑商品的详情信息,⽽商品的详情信息不是普通的⽂本, 可以是包含了HTML语法格式的字符串.为了快速简单的让⽤户能够在⻚⾯中编辑带格式的⽂本,我们引⼊富⽂本编辑器.富 ...
day82:luffy:课程详情页面显示&章节和课时显示&视频播放组件&CKEditor富文本编辑器
目录 1.初始课程详情页面 2.视频播放组件 3.课程详情页面后端接口实现 4.课程详情页面-前端 5.CKEditor富文本编辑器 6.课程章节和课时显示-后端接口 7.课程章节和课时显示-前端 1 ...
发布两款JQ小插件（图片查看器 + 分类选择器），开源
图片查看器,github地址:https://github.com/VaJoy/imgViewer 效果如下: 这款当初大概写了2小时,有点匆忙地赶出来的,使用的接口很简单: $.bindViewer ...
转载：最近有两款路由器D-link , Tenda分别被爆出固件中存在后门
最近有两款路由器分别被爆出固件中存在后门. D-link D-link是台湾公司,成立于1986年,『公司致力于高级网络.宽带.数字.语音和数据通信解决方案的设计.制造和营销,是业界的全球领导者』(官 ...

随机推荐

java线程管理
java线程管理参见: http://harmony.apache.org/subcomponents/drlvm/TM.html 1. 修订历史 2. 关于本文档 2.1. 目的 2.2. 面向的 ...
Objective-C编程调试技巧
为Objective-C编程调试技巧(译) http://www.cocoawithlove.com/2008/10/debugging-tips-for-objective-c.html 这篇文章是 ...
Xshell中文乱码
终端”编码设置,默认是默认语言,选择UTF8设置即可
android 百度地图定位功能实现
历经几天时间,终于把定位功能给实现了,可谓是费劲千辛万苦啊,有定位知识还有图层知识,在这里我把代码给大家贴出来,一起分享一下下啦. package com.example.foreveross.off ...
JQuery（上）
1.流行的JavaScript类库 -- 框架.插件 )为了简化 JavaScript 的开发, 一些 JavsScript 库诞生了. JavaScript 库封装了很多预定义的对象和实用函数 ...
linux命令学习（1）
linux下的文件命名规则 1)除了/ 之外,所有的字符都合法. 2)有些字符最好不用,如空格符.制表符.退格符和字符@ # $ & ( ) - 等. 3)避免使用. 作为普通文件名的第一个字 ...
JS onkeydown控制HTML Input 只录入浮点数值
// -1) return false; return index == 0 } keychar = String.fromCharCode(keynum) var newVal = oriVal.s ...
C#自定义字符串替换Replace方法
前一阵遇到一个如标题的算法题,是将原有字符串的某些片段替换成指定的新字符串片段,例如将源字符串:abcdeabcdfbcdefg中的cde替换成12345,得到结果字符串:ab12345abcdfb1 ...
怎样在超级终端和PC之间通过串口传输文件
Windows环境下,通过SecureCRT软件,用串口向ARM开发板发送文件: 输入命令 rz,可以看到如下图所示: 选择路径点击上传即可. 如果是想从Arm开发板中把文件Down下来,则可以按照下 ...
js实现表格
主要方法如下,然后今天学到了js的几个函数知识点. 1.eval()函数: 定义和用法eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码. 语法eval(string) 其 ...

Ueditor和CKeditor 两款编辑器的使用与配置

Ueditor和CKeditor 两款编辑器的使用与配置的更多相关文章

随机推荐

热门专题