一、安装CKEditor
安装CKEditor的方法有多种。可以通过直接下载和提取ZIP文件包,或使用npm和bower来自动获取CKEditor。
另外,CKEditor有许多插件和主题可以供您使用。您可以访问官方网站以获取完整的插件和主题列表。
<!-- 引用CKEditor的js文件 -->
<script src="/path/to/ckeditor.js"></script>
<!-- 将textarea转换为CKEditor -->
<script>
CKEDITOR.replace('textarea1');
</script>
二、配置CKEditor
CKEditor的配置是通过JavaScript对象完成的,将键值对传递给CKEDITOR.config
方法即可设置。
<!-- 引用CKEditor的js文件 -->
<script src="/path/to/ckeditor.js"></script>
<!-- 对CKEditor进行基本配置 -->
<script>
CKEDITOR.replace('textarea1', {
height: '250px',
toolbar: 'Basic'
});
</script>
<!-- 对CKEditor进行高级配置 -->
<script>
CKEDITOR.replace('textarea1', {
height: '400px',
toolbar: [{
name: 'document',
items: ['Preview', '-', 'Templates']
}, {
name: 'clipboard',
items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo']
}, {
name: 'editing',
items: ['Find', 'Replace', '-', 'SelectAll', '-', 'Scayt']
}, {
name: 'insert',
items: ['Image', 'Table', 'HorizontalRule', 'SpecialChar', 'PageBreak']
}, '/', {
name: 'styles',
items: ['Styles', 'Format']
}, {
name: 'basicstyles',
items: ['Bold', 'Italic', 'Strike', '-', 'RemoveFormat']
}, {
name: 'paragraph',
items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl']
}, {
name: 'links',
items: ['Link', 'Unlink', 'Anchor']
}, {
name: 'tools',
items: ['Maximize', '-', 'About']
}]
});
</script>
三、使用CKEditor API
CKEditor还提供了一套完整的API,可以使得开发人员自己开发特定的插件,或者实现与CKEditor相关的功能。以下是一些常见API的使用方法。
1. 获取CKEditor实例
// 通过textarea的ID获取CKEditor实例
var editor = CKEDITOR.instances.textarea1;
// 通过名称或索引获取CKEditor实例
var editor = CKEDITOR.instances[nameOrIndex];
// 获取所有CKEditor实例
var instances = CKEDITOR.instances;
2. 获取和设置文本内容
// 获取CKEditor的纯文本内容
var text = editor.getData();
// 获取CKEditor的带样式的 HTML 内容
var html = editor.getData('html');
// 设置CKEditor的内容
editor.setData('新的内容');
3. 获取和设置编辑器状态
// 获取CKEditor是否处于只读模式
var readOnly = editor.readOnly;
// 将CKEditor设置为只读模式
editor.setReadOnly(true);
// 获取CKEditor是否处于聚焦状态
var focused = editor.focusManager.hasFocus;
// 聚焦CKEditor
editor.focus();
4. 获取和设置编辑器选项
// 获取CKEditor的所有选项
var options = editor.config;
// 获取指定的选项
var height = editor.config.height;
// 设置CKEditor选项
editor.setConfig('height', '500px');
四、使用CKFinder集成图片上传
为了在CKEditor中从本地计算机或从远程服务器上面插入图片,需要将CKFinder集成到CKEditor中。
以下是使用CKFinder实现图片上传的步骤:
- 下载CKFinder并解压文件
- 将CKFinder文件夹复制到Web服务器上的适当位置
- 将CKFinder文件夹路径添加到
config.js
文件中 - 使用
CKEditor.config.filebrowserImageBrowseUrl
选项指定CKFinder浏览器的URL - 设置
CKEditor.config.filebrowserImageUploadUrl
选项,将上传图片请求发送到CKFinder
<!-- 引用CKEditor和CKFinder的js文件 -->
<script src="/path/to/ckeditor.js"></script>
<script src="/path/to/ckfinder.js"></script>
<!-- 添加CKFinder文件夹路径到config.js文件中 -->
CKFinder.setupCKEditor( null, '/ckeditor/ckfinder/' );
<!-- 配置CKEditor使用CKFinder集成图片上传 -->
<script>
CKEDITOR.replace('textarea1', {
filebrowserImageBrowseUrl: '/ckeditor/ckfinder/ckfinder.html?Type=Images',
filebrowserImageUploadUrl: '/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images'
});
</script>