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

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

主要介绍了Ueditor和CKeditor 两款编辑器的使用与配置方法,需要的朋友可以参考下

一丶一丶ueditor 百度编辑器百度编辑器

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

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

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

4.编辑器展示：

5.百度编辑器配置。百度编辑器配置。

<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文件下其它文件类似的错误更正后即可上传图片。

* @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,

'.selectTdClass{background-color:#3399FF !important;}' +

'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%;}' +

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

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';