Ueditor和CKeditor 两款编辑器的使用与配置方法
一、Ueditor编辑器的使用和配置方法
1.1下载Ueditor源码
在Ueditor官网（http://ueditor.baidu.com/website/）下载Ueditor源码，解压后将ueditor文件夹拷贝到网站根目录
1.2引入UEDitor
在HTML文件里引入UEditor的相关文件
<script type="text/javascript" src="ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="ueditor/ueditor.all.min.js"></script>
1.3创建编辑器
在HTML文件里创建一个div容器和Ueditor编辑器实例化代码
<div id="myEditor"></div>
<script type="text/javascript">
var ue = UE.getEditor('myEditor');
</script>
1.4配置Ueditor
UEditor提供了非常丰富的配置项，可以通过修改配置文件ueditor.config.js实现自定义配置。具体的配置项可以查看ueditor.config.js配置文件
二、CKeditor编辑器的使用和配置方法
2.1 下载CKeditor源码
在CKeditor官网（https://ckeditor.com/ckeditor-4/）下载CKeditor源码，提供了源码zip包下载或者CDN引入
2.2 引入CKeditor
在HTML文件里引入CKeditor的相关文件
<script src="ckeditor/ckeditor.js"></script>
2.3 创建编辑器
在HTML文件里创建一个textarea容器和CKeditor编辑器实例化代码
<textarea id="editor"></textarea>
<script>
CKEDITOR.replace( 'editor' );
</script>
2.4 配置CKeditor
CKeditor提供了非常丰富的配置项，可以通过修改配置文件或者通过CKEDITOR.config对象实现自定义配置。具体的配置项可以查看CKeditor官方文档，例如修改编辑器的宽度和高度：
<textarea id="editor"></textarea>
<script>
CKEDITOR.replace( 'editor', {
width: '100%',
height: '500px'
});
</script>
示例1：UEditor自定义配置
<!DOCTYPE html>
<html>
<head>
<title>UEditor Demo</title>
<meta charset="utf-8">
<script type="text/javascript" src="ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="ueditor/ueditor.all.min.js"></script>
</head>
<body>
<div id="myEditor"></div>
<script type="text/javascript">
var ue = UE.getEditor('myEditor', {
toolbars: [
['fullscreen', 'undo', 'redo', 'bold']
],
initialFrameWidth: '100%',
initialFrameHeight: 400,
elementPathEnabled: false,
wordCount:false
});
</script>
</body>
</html>
以上示例中，实例化编辑器时通过配置项设置编辑器的工具栏只显示“全屏”、“撤销”、“重做”、“加粗”四个工具按钮，设置编辑器的宽度为100%，高度为400px，禁用元素路径显示，同时隐藏字数统计功能。
示例2：CKeditor自定义配置
<!DOCTYPE html>
<html>
<head>
<title>CKeditor Demo</title>
<meta charset="utf-8">
<script src="ckeditor/ckeditor.js"></script>
</head>
<body>
<textarea id="editor"></textarea>
<script>
CKEDITOR.replace( 'editor', {
width: '100%',
height: '500px',
toolbar: [
{ name: 'document', items: [ 'Source','-','NewPage','Preview','Print','-','Templates' ] },
{ name: 'clipboard', items: [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items: [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
{ name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
{ name: 'tools', items: [ 'Maximize', 'ShowBlocks','-','About' ] },
'/', // 分隔符
{ name: 'basicstyles', items: [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items: [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'links', items: [ 'Link','Unlink','Anchor' ] },
{ name: 'insert', items: [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] }
]
});
</script>
</body>
</html>
以上示例中，实例化编辑器时通过配置项设置编辑器的宽度为100%，高度为500px，设置编辑器的工具栏，其中包括“文档”、“剪贴板”、“编辑”、“表单”等多个工具按钮，且每个工具按钮包含多个子按钮。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Ueditor和CKeditor 两款编辑器的使用与配置方法 - Python技术站
微信扫一扫 
支付宝扫一扫 