'use strict';
const path = require( 'path' );
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );
module.exports = {
// https://webpack.js.org/configuration/entry-context/
entry: './app.js',
// https://webpack.js.org/configuration/output/
output: {
path: path.resolve( __dirname, 'dist' ),
filename: 'bundle.js'
module: {
rules: [
test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
use: [ 'raw-loader' ]
test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
use: [
loader: 'style-loader',
options: {
injectType: 'singletonStyleTag'
loader: 'postcss-loader',
options: styles.getPostCssConfig( {
1、使用官网：https://ckeditor.com/ckeditor-5/如果要直接使用官方版本，不自己做扩展只是简单使用的话可以使用在线构建，选择你喜欢的功能然后构建，直接下载使用就好了。地址：https://ckeditor.com/ckeditor-5/online-builder/1.1 安装它有几种不同的编辑器：经典编辑器– ClassicEditor内联编辑器– I...
ckeditor官网提供了可以个人定制的方式，然后将地址好的包下载到本地，即可立即使用，定制方式如下：
打开官网定制页面：https://ckeditor.com/ckeditor-5/online-builder/
第一步：选择一个编辑器的类型，本人选择的是文件类型的编辑器：Decoupled document；
第二步：选择编辑器中需要用到的工具及插件；
第三步：选择工具栏中要显示的工具；
第四步：选择默认的语言；
第五步：开始build；
第六步：下载build后的包
对于简单的富文本编辑器，使用ckeditor的即用型编辑器构建(名字中带有build的，如ckeditor5-build-classic)是个很好的选择，简单易用。但只能包含一些基础的功能。很多实用的功能如自动保存，自定义图片上传是无法使用的。
使用源代码集成CKEditor使您可以使用CKEditor全部功能。
本文使用Vue CLI 4.0
从源使用CKEditor
安装必要的依赖项及配置vue.config.js
要使用您的应用程序构建CKEditor，必须对默认项目配置进行某些更改。
功能描述：上传文件，在富文本中自动增加一个可下载的超链接
参考官网创建自定义插件：Creating a simple plugin - CKEditor 5 Documentation
参考其他博客编辑富文本内容的方法
为了省事，用了elementui的上传组件，需要有上传文件的接口也不过多赘述了
首先添加一个上传文件的按钮，一开始可以不隐藏。
目的是达到点击按钮上传文件后，富文本中添加相应超链接的效果。
上传接口、headers等不过多描述，正常上传文件即可。
重点是上传成功的钩子函数.
最近在项目中需要用到富文本编辑器，据说ck-editor5很不错，于是就使用它了，不过在期间也遇到了很多问题，这里记录下。一、引入ck-editor5文档地址：Predefined builds - CKEditor 5 Documentation这里有个坑，我最初是根据文档执行下面的npm命令下载的，最后捣腾了半天发现里面功能不全，就是一个简单版本的ck-editor所以不推荐使用
推荐引入方式： 自定义配置自己所需要的功能生成build文件然后在项目中引入自定义配置地址：CKEditor 5 Onl
传统方式，直接引用编译后的ckeditor.js 文件。详细使用可以参考：
CKEditor快速介绍与入门示例
包的导入方式： 基于Node.js 和npm 导入CKEditor 5依赖包。
除了包的使用方式之外，在导入ckeditor.js文件的时候， 虽然可以在ckeditor官方网页选择需要的功能进行编译和打包，但有时候如果需要自行客制一些按钮或功能，就需要基于ckeditor的源码开发和打包了。
开发和编译CKEditor 5需要的环境
CKEditor
设置阿里源 :npm config set registry http://registry.npm.taobao.org
或者:npm install --registry=https://registry.npm.taobao.org
1. 下载源码到本地
git clone https://gitee...
Vue CKEditor5 快速了解并使用，以及 官方使用插件案例。 自定义编辑器的流程：下载官方的源码，然后找到符合要求的基础编辑器包，对它进行修改，安装支持插件等，调整完成之后，对这个编辑器包进行重新打包，就得到了自定义编辑器，可以直接丢入项目或者放到 中去使用。下载官方源码，注意：推荐使用 分支。
下载完成后 中就是基础编辑器包，随便选个（例如： ），这个包就是官网 中的经典编辑器 。打开 项目，运行 安装依赖，通过 生成 文件夹， 文件夹中就是打包好的编辑器，通过导入项目使用即可
其他的功能，风格都算的上市应有尽有，满足基本所有的主流编辑器使用需求！在线自定义构建ckeditor5，一键生成代码的功能也大大降低了开发门槛。
“美中不足”的是ckeditor5没有源代码编辑模式！
有些非ck.
"ckeditor5-custom-build": "file:ckeditor5" 是一个 npm 包的依赖项，用于在自定义构建中引用本地文件中的ckeditor5模块。
这个配置允许我们从本地磁盘上的文件系统引用一个 CKEditor 5 模块。通常情况下，我们通过 npm 安装 CKEditor 5 模块并从 node_modules 文件夹引用它们。但是，在某些情况下，我们可能需要根据我们的特定需求进行自定义构建，并将本地文件作为模块引入。
为了使用 "file:ckeditor5"，我们需要满足以下步骤：
1. 在 CKEditor 5 项目根目录下创建一个名为 "ckeditor5" 的文件夹。
2. 在 "ckeditor5" 文件夹中添加所需的 CKEditor 5 模块文件。
3. 在项目的 package.json 文件中，将 "ckeditor5-custom-build" 的值设置为 "file:ckeditor5"。
通过以上配置，我们可以使用本地文件系统中的 CKEditor 5 模块。这使得我们能够根据项目的具体需求进行自定义构建并引用本地的模块文件。同时，它还提供了在项目中灵活地管理 CKEditor 5 模块的能力。
需要注意的是，使用 "file:ckeditor5" 需要确保文件路径的正确性，并且在导入模块时使用正确的名称和路径。此外，我们还应避免将本地文件提交到生产环境，以避免潜在的问题和安全风险。
