vue3项目使用ckeditor5编辑网页源码，online-build

效果展示

在vue3+vite项目中使用ckeditor5编辑器，添加source编辑，主要有这几个方面的内容：

使用online-builder配置需要的功能，并下载build项目代码
根据自己的需求修改下载的代码，重新打包
在自己的项目中引用ckeditor5

online-builder

online-builder是ckeditor官方提供的快捷定制编辑器并得到完整源码的工具，具体步骤如下：选择需要的编辑器类型，进入定制 plugins页面，注意不要选择"PREMIUM"标识的收费插件，为了编辑网页源码，需要添加"General HTML Support"，选择好后下一步配置工具栏显示图标，等待一会下载压缩包即可。

按自己的需求修改下载的文件

解压缩后，demo在sample文件夹中的index.html，直接浏览器查看就能够看到我们定制的编辑器，这时候的source源码编辑还不可用，需要修改配置，重新打包

在ckeditor.ts中搜索GeneralHtmlSupportGeneralHtmlSupport文档，添加FullPageFull page HTML文档,并在builtinPlugins中同样添加，开启完整网页包括<html> ,<head>的编辑。

注意，此时依然还不能编辑html标签和属性，编辑过后并不能保存，这是因为EditorConfig中还需要添加htmlSupport,简单粗暴的方式是设置所有内容可编辑，有一定的风险。

js//ckeditor.ts 复制代码

//EditorConfig
htmlSupport: {
      allow: [
        {
          name: /.*/,
          attributes: true,
          classes: true,
          styles: true,
        },
      ],
    },

修改完成后，需要重新打包，参考reademe.md的步骤,分别执行，重新打包成功后，刷新index.html页面就可以编辑源码了。

npm install
npm run build

项目中引用

将以上整个文件(文件名自定义，这里设置为ckeditor5-custom)复制到项目的根目录中，修改package.json ,安装本地文件到node_modules，并安装@ckeditor/ckeditor5-vue

package.json 复制代码

"@ckeditor/ckeditor5-vue": "^5.1.0",
"ckeditor5-custom-build": "file:ckeditor5-custom",

执行npm install
配置vite.config.ts，有关vite配置的文档说明

vite.config.ts 复制代码

    optimizeDeps: {
      include: ['ckeditor5-custom-build'],
    },
    build: {
        commonjsOptions: {
            include: [/ckeditor5-custom-build/, /ckeditor5-custom/, /node_modules/],
      },
     }

在vue文件中使用，完整代码如下

vue 复制代码

<template>
  <CKEditorComponent
    v-model="value"
    :editor="customEditor"
    @ready="onEditorReady"
  ></CKEditorComponent>
</template>

<script setup lang="ts">
import CKEditor from '@ckeditor/ckeditor5-vue';

import customEditor from 'ckeditor5-custom-build';

interface Props {
  modelValue: string;
}

const props = withDefaults(defineProps<Props>(), {});

const emit = defineEmits<{
  (e: 'update:modelValue', val: string): void;
}>();

const value = ref(props.modelValue);

watch(
  () => props.modelValue,
  (val) => {
    value.value = val;
  },
);

watch(
  () => value.value,
  (val) => {
    emit('update:modelValue', val);
  },
);

const CKEditorComponent = CKEditor.component;

const onEditorReady = () => {
  if (!props.modelValue.includes('</body>')) {
    document.querySelector('.ck-source-editing-button')?.click();
  }
};
</script>

<style lang="scss">
//el-dialog 层级冲突修复
.ck.ck-balloon-panel {
  z-index: 9999 !important;
}

.ck-editor__editable_inline:not(.ck-comment__input *),
.ck-source-editing-area {
  height: 300px; // 默认高度
}
.ck-editor__editable_inline:not(.ck-comment__input *),
.ck-source-editing-area textarea {
  overflow: auto !important;
}
.ck.ck-powered-by {
  display: none !important;
}
</style>