CKEditor富文本编辑器使用

最新推荐文章于 2025-06-11 14:13:14 发布

八角啦

最新推荐文章于 2025-06-11 14:13:14 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

文章标签： ckeditor

本文链接：https://blog.youkuaiyun.com/weixin_39410229/article/details/121613939

本文对比了CKEditor 4与CKEditor 5的差异，着重讲解了如何在Vue项目中通过npm和CDN方式安装及配置CKEditor 4，涉及常用插件和图片上传，适合有源码编辑需求的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CKEditor 5 和CKEditor 4 无论是界面还是用法上完全不同，而且在插件的配置上也大不相同，CKEditor 5 采用的是npm的方式安装插件，使用更便捷。因为本次项目必须有源码编辑功能，所以舍弃了5，下面以CKEditor 4.17为例。

ckeditor4官网
ckeditor5官网

一、开始 start

NPM
○ 在webpack中使用 npm install ckeditor4
首先需配置webpack.config.js，理解CopyWebpackPlugin

const CopyPlugin = require( 'copy-webpack-plugin' ); 
module.exports = {
	plugins: [
	 new CopyPlugin( {
	    patterns: [
	     {
	      from: '{config.js,contents.css,styles.js,adapters/**/*,lang/**/*,plugins/**/*,skins/**/*,vendor/**/*}',
	      to: path.join( __dirname, dist, 'ckeditor4' ),
	      context: path.join( __dirname, 'node_modules', 'ckeditor4' )
	     },
	    ]
	   })
	]
}

新建一个ckeditor.js文件, 预设在引入框架前加载。

window.CKEDITOR_BASEPATH = /ckeditor4/

html:

 <textarea name="editor1" id="editor1" rows="10" cols="80" data-sample-short>
 </textarea>

js:

import 'ckeditor4';
const { CKEDITOR } = window;
const editor = CKEDITOR.replace('editor1', {
	//	config
});

○ 基于vue项目 npm install ckeditor4-vue

import Vue from 'vue';
import CKEditor from 'ckeditor4-vue';

v-model指令启用开箱即用双向数据绑定。
config指令可帮助您将编辑器配置传递给编辑器实例。
read-only只读。

<template>
    <div id="app">
        <ckeditor v-model="editorData" :config="editorConfig" read-only="true"></ckeditor>
    </div>
</template>

export default {
    name: 'app',
    components: {
        ckeditor: CKEditor.component
    },
    data() {
        return {
            editorData: '<p>Content of the editor.</p>',
            editorConfig: {
            	// config
            }
        };
    }
}

获取编辑器内容。

component.instance.getData();

CDN

标准: <script src="//cdn.ckeditor.com/4.17.1/standard/ckeditor.js"></script> 
基本: <script src="//cdn.ckeditor.com/4.17.1/basic/ckeditor.js"></script>
完整: <script src="//cdn.ckeditor.com/4.17.1/full/ckeditor.js"></script>

下载
访问官方的CKEditor 4下载网站。建议在项目中使用完整版full或自定义customize。

第二步选择插件和主题。勾选常用的插件，如果没有特殊需求可不添加，具体插件作用第二大点会写。

第三步选择中文。
第四步勾选下载。

下载好的文件直接打开samples下的index.html访问

预览效果

可视化编辑工具栏，编辑完后可直接打开Advanced复制代码。

二、常用插件Plugin
默认是标准预设。如果需要更多的功能，需要进行设置额外插件来满足项目需求。比如字体颜色和背景颜色设置
```
consfig.extraPlugins = 'colorbutton';
```
1. forms 添加表单工具，复选框、单选框、文本域、隐藏域等。
2. preview 正文预览
3. justify 对齐方式，在 toolbar 中展示按钮。
```
CKEDITOR.replace('editor1', {
	toolbar: [{
		name: 'align',
      	items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock']
	}]
})
```
4. 图像插件 “单击并拖动”调整大小、设置图片标题
```
config.extraPlugins =  'image2,uploadimage';
```

三、图片上传 upload
默认上传弹窗是没有上传按钮的，需要通过config.filebrowserUploadUrl和config.filebrowserImageUploadUrl配置服务器上传url，设置正确设置后自动可用。

CKEDITOR.replace( 'editor1', {
	image_previewText: CKEDITOR.tools.repeat(' ', 1), // 清空预览框中的默认文字
    filebrowserUploadUrl: 'https://xxx',
    filebrowserImageUploadUrl: 'https://xxx'
});

两个方式设置请求头。
第一种方式：

config.fileTools_requestHeaders = {
    'X-Requested-With': 'XMLHttpRequest',
    'Custom-Header': 'header value'
};

第二种方式：前提必须设置 config.isFileUploadSupported = true指示当前浏览器是否支持通过XHR请求发送文件所必需的方法。

editor.on('fileUploadRequest', (evt) => {
  const { fileLoader } = evt.data;
  const { xhr } = fileLoader;
  const formData = new FormData();
  formData.append('file', fileLoader.file, fileLoader.fileName);
  formData.append('owner', uuid);
  formData.append('spaceCode', 'default');
  xhr.open('POST', fileLoader.uploadUrl, true);
  xhr.setRequestHeader('Authorization', authToken);
  xhr.send(formData);
  evt.stop();
});

上传接口返回数据格式。
在这里插入图片描述
四、自定义文件管理器browse

// 外部文件管理器
  filebrowserUploadMethod: 'form',
  filebrowserBrowseUrl: './browse.html?type=1',
  filebrowserImageBrowseUrl: './browse.html?type=0',

browse.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example: Browsing Files</title>
    <script>
        // Helper function to get parameters from the query string.
        function getUrlParam( paramName ) {
            var reParam = new RegExp( '(?:[\?&]|&)' + paramName + '=([^&]+)', 'i' );
            var match = window.location.search.match( reParam );

            return ( match && match.length > 1 ) ? match[1] : null;
        }
        // Simulate user action of selecting a file to be returned to CKEditor.
        function returnFileUrl() {

            var funcNum = getUrlParam( 'CKEditorFuncNum' );
            var fileUrl = '/path/to/file.txt';
            window.opener.CKEDITOR.tools.callFunction( funcNum, fileUrl );
            window.close();
        }
    </script>
</head>
<body>
    <button onclick="returnFileUrl()">Select File</button>
</body>
</html>