当前位置:首页 > 代码学苑 > 网建教程

CKEditor 4.x 部署和配置方法

来源:代码学苑 作者: 2020-06-18

把下载下来的CKEditor解压到自己设定的网站目录下,一定要注意调用的路径问题!

在html的head中引入以下文件:

<script type="text/javascript" src="ckeditor/ckeditor.js"></script><script type="text/javascript" src="ckeditor/config.js"></script>

有以下几种方法可实现CKEditor编辑器的调用:

一:通过设置class样式

<textarea class="ckeditor" name="editor1"></textarea>

二:使用JS代码

$(document).ready(function(){CKEDITOR.replace('entity_content'); //entity_content为textarea元素ID});

三:使用jquery

使用jquery之前一定要先引入jquery文件,另外还要引入ckeditor/adapters下的一个jquery.js(两者不一样,务必要引入)

$(document).ready(function(){$('textarea#editor1').ckeditor();});

另外配置config.js可以满足自己的项目需求。

CKEDITOR.editorConfig = function( config ) {// Define changes to default configuration here.// For the complete reference:// http://docs.ckeditor.com/#!/api/CKEDITOR.config// The toolbar groups arrangement, optimized for a single toolbar row.config.toolbarGroups = [{ name: 'document',groups: [ 'mode', 'document', 'doctools' ] },{ name: 'clipboard',groups: [ 'clipboard', 'undo' ] },{ name: 'editing',groups: [ 'find', 'selection', 'spellchecker' ] },{ name: 'forms' },{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },{ name: 'paragraph',groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },{ name: 'links' },{ name: 'insert' },{ name: 'styles' },{ name: 'colors' },{ name: 'tools' },{ name: 'others' },{ name: 'about' }];// The default plugins included in the basic setup define some buttons that// we don't want too have in a basic editor. We remove them here.config.removeButtons = 'Cut,Copy,Paste,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript';// Let's have it basic on dialogs as well.config.removeDialogTabs = 'link:advanced';};

根据需要具体配置请查阅其他资料。

猜你喜欢
    无相关信息