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

效果展示

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

  1. 使用online-builder配置需要的功能,并下载build项目代码
  2. 根据自己的需求修改下载的代码,重新打包
  3. 在自己的项目中引用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

项目中引用

  1. 将以上整个文件(文件名自定义,这里设置为ckeditor5-custom)复制到项目的根目录中,修改package.json ,安装本地文件到node_modules,并安装@ckeditor/ckeditor5-vue
package.json 复制代码
"@ckeditor/ckeditor5-vue": "^5.1.0",
"ckeditor5-custom-build": "file:ckeditor5-custom",
  1. 执行npm install
  2. 配置vite.config.ts有关vite配置的文档说明
vite.config.ts 复制代码
    optimizeDeps: {
      include: ['ckeditor5-custom-build'],
    },
    build: {
        commonjsOptions: {
            include: [/ckeditor5-custom-build/, /ckeditor5-custom/, /node_modules/],
      },
     }
  1. 在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>
相关推荐
新人11yj47 分钟前
如何给网页增加滚动到顶部的功能
前端·javascript
掘金一周8 分钟前
Figma Dev Mode MCP:大人,时代变了 | 掘金一周7.10
前端·人工智能·mcp
Data_Adventure12 分钟前
推荐几款开源 Canvas 和 WebGL 图形库
前端·webgl·canvas
我爱加班、、26 分钟前
element-plus表单校验失败问题
前端·javascript·vue.js·elementui·ecmascript
香香甜甜的辣椒炒肉31 分钟前
vue快速上手
前端·javascript·vue.js
b1gbrother1 小时前
让你的Claude Code变得更聪明
前端·程序员
国家不保护废物1 小时前
多模态模型数据传输的秘密武器:html5对象Blob深度解析
前端·面试·html
用户2519162427111 小时前
Canvas之概述,画布与画笔
前端·javascript·canvas
南方kenny1 小时前
前端小知识:搞懂 BFC块级格式化上下文,告别面试“拦路虎”!
前端·css·面试
邵洛1 小时前
前端导出excel表格并修改导出表格样式
前端