vue3 vite + CKedit5富文本

已于 2024-05-06 00:02:51 修改
阅读量520 收藏 2
点赞数 4
文章标签： vue.js 前端 javascript
于 2024-05-06 00:01:51 首次发布
嘎嘎淘
本文链接：https://blog.csdn.net/zhang804633234/article/details/138477431
版权

package.json

    "@ckeditor/ckeditor5-adapter-ckfinder": "41.3.1",
    "@ckeditor/ckeditor5-alignment": "41.3.1",
    "@ckeditor/ckeditor5-autoformat": "41.3.1",
    "@ckeditor/ckeditor5-autosave": "41.3.1",
    "@ckeditor/ckeditor5-basic-styles": "41.3.1",
    "@ckeditor/ckeditor5-block-quote": "41.3.1",
    "@ckeditor/ckeditor5-cloud-services": "41.3.1",
    "@ckeditor/ckeditor5-code-block": "41.3.1",
    "@ckeditor/ckeditor5-editor-classic": "41.3.1",
    "@ckeditor/ckeditor5-essentials": "41.3.1",
    "@ckeditor/ckeditor5-find-and-replace": "41.3.1",
    "@ckeditor/ckeditor5-font": "41.3.1",
    "@ckeditor/ckeditor5-heading": "41.3.1",
    "@ckeditor/ckeditor5-highlight": "41.3.1",
    "@ckeditor/ckeditor5-horizontal-line": "41.3.1",
    "@ckeditor/ckeditor5-html-embed": "41.3.1",
    "@ckeditor/ckeditor5-html-support": "41.3.1",
    "@ckeditor/ckeditor5-image": "41.3.1",
    "@ckeditor/ckeditor5-indent": "41.3.1",
    "@ckeditor/ckeditor5-language": "41.3.1",
    "@ckeditor/ckeditor5-link": "41.3.1",
    "@ckeditor/ckeditor5-list": "41.3.1",
    "@ckeditor/ckeditor5-markdown-gfm": "41.3.1",
    "@ckeditor/ckeditor5-media-embed": "41.3.1",
    "@ckeditor/ckeditor5-mention": "41.3.1",
    "@ckeditor/ckeditor5-page-break": "41.3.1",
    "@ckeditor/ckeditor5-paragraph": "41.3.1",
    "@ckeditor/ckeditor5-paste-from-office": "41.3.1",
    "@ckeditor/ckeditor5-remove-format": "41.3.1",
    "@ckeditor/ckeditor5-restricted-editing": "41.3.1",
    "@ckeditor/ckeditor5-select-all": "41.3.1",
    "@ckeditor/ckeditor5-show-blocks": "41.3.1",
    "@ckeditor/ckeditor5-source-editing": "41.3.1",
    "@ckeditor/ckeditor5-special-characters": "41.3.1",
    "@ckeditor/ckeditor5-style": "41.3.1",
    "@ckeditor/ckeditor5-table": "41.3.1",
    "@ckeditor/ckeditor5-typing": "41.3.1",
    "@ckeditor/ckeditor5-ui": "41.3.1",
    "@ckeditor/ckeditor5-undo": "41.3.1",
    "@ckeditor/ckeditor5-watchdog": "41.3.1",
    "@ckeditor/ckeditor5-word-count": "41.3.1",
	"@ckeditor/ckeditor5-core": "41.3.1",
    "@ckeditor/ckeditor5-dev-translations": "^32.1.2",
    "@ckeditor/ckeditor5-dev-utils": "^32.1.2",
    "@ckeditor/ckeditor5-theme-lark": "41.3.1",
	"sanitize-html": "^2.13.0",
	"ckeditor5": "^41.3.1",
	"@ckeditor/vite-plugin-ckeditor5": "^0.1.3",
	"@ckeditor/ckeditor5-vue": "^5.1.0",
	"@ckeditor/ckeditor5-upload": "^41.3.1",

vite.config.ts

import ckeditor5 from '@ckeditor/vite-plugin-ckeditor5';

export default defineConfig({
  plugins: [
    ckeditor5({
      // 在此处添加对主题的引用
      theme: require.resolve('@ckeditor/ckeditor5-theme-lark')
    }),
  ],
})

component.vue

<template>
  <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
</template>
 
<script>
https://www.yuque.com/yuqueyonghua0uca7/os6eyf/kxsovr2z3nr8ur73#indUO 文档
import { ref } from 'vue';
import CKEditor from '@ckeditor/ckeditor5-vue';
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
//import zh from 'ckeditor5/build/translations/zh-cn';
import { CKFinderUploadAdapter } from '@ckeditor/ckeditor5-adapter-ckfinder';
import { Alignment } from '@ckeditor/ckeditor5-alignment';
import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
import { Autosave } from '@ckeditor/ckeditor5-autosave';
import { Bold, Code, Italic, Strikethrough, Subscript, Superscript, Underline } from '@ckeditor/ckeditor5-basic-styles';
import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
import { CloudServices } from '@ckeditor/ckeditor5-cloud-services';
import { CodeBlock } from '@ckeditor/ckeditor5-code-block';
import  {Essentials}  from '@ckeditor/ckeditor5-essentials';
import { FindAndReplace } from '@ckeditor/ckeditor5-find-and-replace';
import { FontBackgroundColor, FontColor, FontFamily, FontSize } from '@ckeditor/ckeditor5-font';
import { Heading, Title } from '@ckeditor/ckeditor5-heading';
import { Highlight } from '@ckeditor/ckeditor5-highlight';
import { HorizontalLine } from '@ckeditor/ckeditor5-horizontal-line';
import { HtmlEmbed } from '@ckeditor/ckeditor5-html-embed';
import { DataFilter, DataSchema, FullPage, GeneralHtmlSupport, HtmlComment } from '@ckeditor/ckeditor5-html-support';
import { AutoImage, Image, ImageCaption, ImageInsert, ImageResize, ImageStyle, ImageToolbar, ImageUpload,ImageTextAlternative } from '@ckeditor/ckeditor5-image';
import { Indent, IndentBlock } from '@ckeditor/ckeditor5-indent';
import { TextPartLanguage } from '@ckeditor/ckeditor5-language';
import { AutoLink, Link, LinkImage } from '@ckeditor/ckeditor5-link';
import { List, ListProperties, TodoList } from '@ckeditor/ckeditor5-list';
import { Markdown } from '@ckeditor/ckeditor5-markdown-gfm';
import { MediaEmbed, MediaEmbedToolbar } from '@ckeditor/ckeditor5-media-embed';
import { Mention } from '@ckeditor/ckeditor5-mention';
import { PageBreak } from '@ckeditor/ckeditor5-page-break';
import  {Paragraph}  from '@ckeditor/ckeditor5-paragraph';
import { PasteFromOffice } from '@ckeditor/ckeditor5-paste-from-office';
import { RemoveFormat } from '@ckeditor/ckeditor5-remove-format';
import { StandardEditingMode } from '@ckeditor/ckeditor5-restricted-editing';
import { SelectAll } from '@ckeditor/ckeditor5-select-all';
import { ShowBlocks } from '@ckeditor/ckeditor5-show-blocks';
import { SourceEditing } from '@ckeditor/ckeditor5-source-editing';
import { SpecialCharacters, SpecialCharactersArrows, SpecialCharactersCurrency, SpecialCharactersEssentials, SpecialCharactersLatin, SpecialCharactersMathematical, SpecialCharactersText } from '@ckeditor/ckeditor5-special-characters';
import { Style } from '@ckeditor/ckeditor5-style';
import { Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableToolbar } from '@ckeditor/ckeditor5-table';
import { TextTransformation } from '@ckeditor/ckeditor5-typing';
import { AccessibilityHelp } from '@ckeditor/ckeditor5-ui';
import { Undo } from '@ckeditor/ckeditor5-undo';
import { EditorWatchdog } from '@ckeditor/ckeditor5-watchdog';
import { WordCount } from '@ckeditor/ckeditor5-word-count';
import sanitizeHtmlUtil from 'sanitize-html' // 引入消杀工具函数
import {Base64UploadAdapter} from '@ckeditor/ckeditor5-upload'
/*
vite.config.js 配置

import ckeditor5 from '@ckeditor/vite-plugin-ckeditor5';
plugins: [
	vue(),
  ckeditor5({
      // 在此处添加对主题的引用
      theme: require.resolve('@ckeditor/ckeditor5-theme-lark')
  })
],

    "@ckeditor/ckeditor5-theme-lark": "^41.3.1",
    "@ckeditor/ckeditor5-vue": "^5.1.0",
    "@ckeditor/vite-plugin-ckeditor5": "^0.1.3",
	"ckeditor5-custom-build": "file:ckeditor5-custom-class",
	"ckeditor5-vue": "^0.0.7",
	"sanitize-html": "^2.13.0",

*/
export default {
  components: {
    ckeditor: CKEditor.component
  },
  setup() {
    const editorData = ref('');
    const editorConfig = {};
    return {
      editor: ClassicEditor,
      editorData,
      editorConfig:{
        //language:"zh",
        plugins:[
            Paragraph, // 段落插件
                Essentials, // 基础插件
                Bold, // 加粗
                Italic,  // 斜体
                Strikethrough, // 删除线
                Underline, // 下划线
                Superscript, // 上标
                Subscript, // 下标
                Code, // 行内代码
                BlockQuote, // 块引用插件
                FontFamily, // 字体
                FontSize, // 字体大小
                FontColor, // 字体色插件
                FontBackgroundColor, // 字体背景色插件
                Alignment,//文本对齐
                SourceEditing, // 源码编辑
                GeneralHtmlSupport, // 基本 HTML 支持插件
                HtmlComment, // HTML备注插件支持
                Style, // 样式插件
                HtmlEmbed, // HTML 嵌入插件
                Image, // 图像插件
                ImageResize,
                ImageStyle,
                ImageToolbar, // 图像工具栏插件
                ImageTextAlternative, // 文本替换图像插件
                ImageCaption, // 图像标题插件
                ImageInsert, // 插入图像插件
                AutoImage, // 自动图像插件
                LinkImage, // 图像链接插件
                Base64UploadAdapter, // Base64 图像上传适配器插件
                Autoformat, // 自动格式转换插件
              	Markdown,  // Markdown 输出插件
                 Table, // 表格插件
                TableToolbar, // 表工具栏
                TableProperties, // 表属性插件
                TableCellProperties, // 单元格属性插件
                TableColumnResize, // 调整表列宽度插件
                TableCaption, // 表标题插件
        ],
        toolbar:[
                "undo",
                "redo",
                "selectAll",
                'bold', // 加粗
                'italic', // 斜体
                'strikethrough', // 删除线
                'underline', // 下划线
                'superscript', // 上标
                'subscript', // 下标
                'code', // 行内代码
                'blockQuote', // 块引用
                'fontFamily', // 字体
                'fontSize', // 字体大小
                'fontColor', // 字体颜色
                'fontBackgroundColor', // 字体背景颜色
                'alignment',//文本对齐
                'sourceediting', // 源码编辑
                'style',
                'heading', // 标题
                'codeBlock', // 代码块
                'htmlembed',//html 编辑
                'link', // 图像链接
                'imageTextAlternative', // 文本替换图像
                'toggleImageCaption', // 显示或隐藏图像标题
                'uploadImage', // 上传图片
                'insertImage', // 插入图像
                'horizontalLine', // 水平线
                'bulletedList', // 无序列表
                'numberedList', // 有序列表, 
                'todoList', // 代码事项列表
                'insertTable', // 插入表格
                
                
        ],
            htmlEmbed: {
                showPreviews: true, // 开启预览功能
                sanitizeHtml: inputHtml => {
                    // 根据需求进行消杀
                    const outputHtml = sanitizeHtmlUtil(inputHtml, {
                        allowedTags: ['button', 'script', 'style', 'a'], // 允许的元素
                        allowedAttributes: {
                            'a': ['href'] // 允许超链接含有 href 属性
                        },
                        allowVulnerableTags: true, // 关闭允许 'script', 'style' 元素的危险警告语句提示
                    })

                    return {
                        html: outputHtml, // 进行消杀
                        hasChanged: true, // true 或 false 取决于消毒剂是否剥离了任何东西。
                    }
                }
            },
            table: {
                // 新建表格默认 1 行 1 列 为表头
                defaultHeadings: { rows: 1, columns: 1 },
                // 表工具栏（气球）
                contentToolbar: [
                    'toggleTableCaption', // 打开/关闭表标题
                    '|',
                    'tableColumn', // 表列设置
                    'tableRow', // 表行设置
                    'mergeTableCells', // 合并单元格
                    '|',
                    'tableProperties', // 表属性
                    'tableCellProperties', // 单元格属性
                ],
                // 表属性配置
                tableProperties: {
                    // 边框颜色
                    borderColors: [
                        { color: '#000000', label: '黑色' },
                        { color: '#262626', label: '深灰' },
                        { color: '#D8DAD9', label: '灰色' },
                        { color: '#FFFFFF', label: '白色' },
                        { color: '#DF2A3F', label: '红色' },
                        { color: '#ED740C', label: '橘橙' },
                        { color: '#ECAA04', label: '金盏黄' },
                        { color: '#FBDE28', label: '柠檬黄' },
                        { color: '#74B602', label: '绿色' },
                        { color: '#1DC0C9', label: '青色' },
                        { color: '#117CEE', label: '浅蓝' },
                        { color: '#2F4BDA', label: '蓝色' },
                        { color: '#601BDE', label: '紫色' },
                        { color: '#D22D8D', label: '玫红' }
                    ],
                    // 背景颜色
                    backgroundColors: [
                        { color: '#000000', label: '黑色' },
                        { color: '#262626', label: '深灰' },
                        { color: '#D8DAD9', label: '灰色' },
                        { color: '#FFFFFF', label: '白色' },
                        { color: '#DF2A3F', label: '红色' },
                        { color: '#ED740C', label: '橘橙' },
                        { color: '#ECAA04', label: '金盏黄' },
                        { color: '#FBDE28', label: '柠檬黄' },
                        { color: '#74B602', label: '绿色' },
                        { color: '#1DC0C9', label: '青色' },
                        { color: '#117CEE', label: '浅蓝' },
                        { color: '#2F4BDA', label: '蓝色' },
                        { color: '#601BDE', label: '紫色' },
                        { color: '#D22D8D', label: '玫红' }
                    ],
                },
                // 单元格属性配置
                tableCellProperties: {
                    // 边框颜色
                    borderColors: [
                        { color: '#000000', label: '黑色' },
                        { color: '#262626', label: '深灰' },
                        { color: '#D8DAD9', label: '灰色' },
                        { color: '#FFFFFF', label: '白色' },
                        { color: '#DF2A3F', label: '红色' },
                        { color: '#ED740C', label: '橘橙' },
                        { color: '#ECAA04', label: '金盏黄' },
                        { color: '#FBDE28', label: '柠檬黄' },
                        { color: '#74B602', label: '绿色' },
                        { color: '#1DC0C9', label: '青色' },
                        { color: '#117CEE', label: '浅蓝' },
                        { color: '#2F4BDA', label: '蓝色' },
                        { color: '#601BDE', label: '紫色' },
                        { color: '#D22D8D', label: '玫红' }
                    ],
                    // 背景颜色
                    backgroundColors: [
                        { color: '#000000', label: '黑色' },
                        { color: '#262626', label: '深灰' },
                        { color: '#D8DAD9', label: '灰色' },
                        { color: '#FFFFFF', label: '白色' },
                        { color: '#DF2A3F', label: '红色' },
                        { color: '#ED740C', label: '橘橙' },
                        { color: '#ECAA04', label: '金盏黄' },
                        { color: '#FBDE28', label: '柠檬黄' },
                        { color: '#74B602', label: '绿色' },
                        { color: '#1DC0C9', label: '青色' },
                        { color: '#117CEE', label: '浅蓝' },
                        { color: '#2F4BDA', label: '蓝色' },
                        { color: '#601BDE', label: '紫色' },
                        { color: '#D22D8D', label: '玫红' }
                    ],
                }
            },
        style: {
                definitions: [
                    { name: '标题二', element: 'h2', classes: ['document-title'] },
                    { name: '标题三', element: 'h3', classes: ['document-title'] },
                    { name: '标题四', element: 'h4', classes: ['document-title'] },
                    { name: '段落（成功）', element: 'p', classes: ['p-success'] },
                    { name: '段落（失败）', element: 'p', classes: ['p-error'] },
                    { name: '块引用', element: 'blockquote', classes: ['block-quote'] },
                    { name: '标签（普通）', element: 'span', classes: ['label-info'] },
                    { name: '标签（成功）', element: 'span', classes: ['label-success'] },
                    { name: '代码块 (黑色)', element: 'pre', classes: ['fancy-code', 'fancy-code-dark'] },
                ]
            },
        htmlSupport: {
                allow: [
                    {
                        name: /.*/,
                        attributes: true,
                        classes: true,
                        styles: true
                    },
                    // { name: 'div' },  // 启用普通的 div 元素

                    // { name: /^(div|section|article)$/ }, // 启用 div，section，article 元素

                    // { name: 'div', styles: true }, // 启用 div 元素，还支持所有的内联样式

                    // { name: 'div', classes: [ 'foo', 'bar' ] }, // 启用 div 元素，其 div 元素允许添加 foo bar 类属性值

                    // { name: 'p',  classes: [ 'foo', 'bar' ] }, // 段落元素是有段落插件提供的，其元素上可允许 foo bar 类属性值

                    // { name: 'div', attributes: { foo: 'true', bar: true } }, // 启用 div 元素，其元素允许添加 foo="true" 和 bar=任意值 属性

                    // { name: /^(p|h[2-4])$/, styles: { 'color': true } }, // p 元素与 h2-h4 元素允许添加 color 内联样式
                ]
          },
          fontColor: {
                columns: 10, // 颜色展示的列数
                documentColors: 5, // 文档中使用的颜色数量
                colors: [
                    { color: '#000000', label: '黑色' },
                    { color: '#262626', label: '深灰 3' },
                    { color: '#585A5A', label: '深灰 2' },
                    { color: '#8A8F8D', label: '深灰 1' },
                    { color: '#D8DAD9', label: '灰色' },
                    { color: '#E7E9E8', label: '浅灰 4' },
                    { color: '#EFF0F0', label: '浅灰 3' },
                    { color: '#F4F5F5', label: '浅灰 2' },
                    { color: '#FAFAFA', label: '浅灰 1' },
                    { color: '#FFFFFF', label: '白色' },

                    { color: '#DF2A3F', label: '红色' },
                    { color: '#ED740C', label: '橘橙' },
                    { color: '#ECAA04', label: '金盏黄' },
                    { color: '#FBDE28', label: '柠檬黄' },
                    { color: '#74B602', label: '绿色' },
                    { color: '#1DC0C9', label: '青色' },
                    { color: '#117CEE', label: '浅蓝' },
                    { color: '#2F4BDA', label: '蓝色' },
                    { color: '#601BDE', label: '紫色' },
                    { color: '#D22D8D', label: '玫红' },

                    { color: '#FBE4E7', label: '红色 1' },
                    { color: '#FDE6D3', label: '橘橙 1' },
                    { color: '#F9EFCD', label: '金盏黄 1' },
                    { color: '#FBF5CB', label: '柠檬黄 1' },
                    { color: '#E8F7CF', label: '绿色 1' },
                    { color: '#CEF5F7', label: '青色 1' },
                    { color: '#D9EAFC', label: '浅蓝 1' },
                    { color: '#D9DFFC', label: '蓝色 1' },
                    { color: '#E6DCF9', label: '紫色 1' },
                    { color: '#FBDFEF', label: '玫红 1' },

                    { color: '#F1A2AB', label: '红色 2' },
                    { color: '#F8B881', label: '橘橙 2' },
                    { color: '#F5D480', label: '金盏黄 2' },
                    { color: '#FCE75A', label: '柠檬黄 2' },
                    { color: '#C1E77E', label: '绿色 2' },
                    { color: '#81DFE4', label: '青色 2' },
                    { color: '#81BBF8', label: '浅蓝 2' },
                    { color: '#96A7FD', label: '蓝色 2' },
                    { color: '#BA9BF2', label: '紫色 2' },
                    { color: '#F297CC', label: '玫红 2' },

                    { color: '#E4495B', label: '红色 3' },
                    { color: '#F38F39', label: '橘橙 3' },
                    { color: '#F3BB2F', label: '金盏黄 3' },
                    { color: '#EDCE02', label: '柠檬黄 3' },
                    { color: '#8CCF17', label: '绿色 3' },
                    { color: '#01B2BC', label: '青色 3' },
                    { color: '#2F8EF4', label: '浅蓝 3' },
                    { color: '#4861E0', label: '蓝色 3' },
                    { color: '#7E45E8', label: '紫色 3' },
                    { color: '#E746A4', label: '玫红 3' },

                    { color: '#AD1A2B', label: '红色 4' },
                    { color: '#C75C00', label: '橘橙 4' },
                    { color: '#C99103', label: '金盏黄 4' },
                    { color: '#A58F04', label: '柠檬黄 4' },
                    { color: '#5C8D07', label: '绿色 4' },
                    { color: '#07787E', label: '青色 4' },
                    { color: '#0C68CA', label: '浅蓝 4' },
                    { color: '#213BC0', label: '蓝色 4' },
                    { color: '#4C16B1', label: '紫色 4' },
                    { color: '#AE146E', label: '玫红 4' },

                    { color: '#70000D', label: '红色 5' },
                    { color: '#663000', label: '橘橙 5' },
                    { color: '#664900', label: '金盏黄 5' },
                    { color: '#665800', label: '柠檬黄 5' },
                    { color: '#2A4200', label: '绿色 5' },
                    { color: '#004347', label: '青色 5' },
                    { color: '#00346B', label: '浅蓝 5' },
                    { color: '#101E60', label: '蓝色 5' },
                    { color: '#270070', label: '紫色 5' },
                    { color: '#5C0036', label: '玫红 5' }
                ],
            },
        fontSize: {
                options: [
                    'tiny',
                    'small',
                    'default',
                    'big'
                ]
          },
         fontFamily: {
                options: [
                    'default',
                    '黑体',
                    '楷体',
                    '宋体',
                    'Consolas',
                    'Arial, sans-serif',
                    'Courier New, Courier, monospace'
                ],
                supportAllValues: true
        },
            fontBackgroundColor: {
                columns: 10, // 颜色展示的列数
                documentColors: 5, // 文档中使用的颜色数量
                colors: [
                    { color: '#000000', label: '黑色' },
                    { color: '#262626', label: '深灰 3' },
                    { color: '#585A5A', label: '深灰 2' },
                    { color: '#8A8F8D', label: '深灰 1' },
                    { color: '#D8DAD9', label: '灰色' },
                    { color: '#E7E9E8', label: '浅灰 4' },
                    { color: '#EFF0F0', label: '浅灰 3' },
                    { color: '#F4F5F5', label: '浅灰 2' },
                    { color: '#FAFAFA', label: '浅灰 1' },
                    { color: '#FFFFFF', label: '白色' },

                    { color: '#DF2A3F', label: '红色' },
                    { color: '#ED740C', label: '橘橙' },
                    { color: '#ECAA04', label: '金盏黄' },
                    { color: '#FBDE28', label: '柠檬黄' },
                    { color: '#74B602', label: '绿色' },
                    { color: '#1DC0C9', label: '青色' },
                    { color: '#117CEE', label: '浅蓝' },
                    { color: '#2F4BDA', label: '蓝色' },
                    { color: '#601BDE', label: '紫色' },
                    { color: '#D22D8D', label: '玫红' },

                    { color: '#FBE4E7', label: '红色 1' },
                    { color: '#FDE6D3', label: '橘橙 1' },
                    { color: '#F9EFCD', label: '金盏黄 1' },
                    { color: '#FBF5CB', label: '柠檬黄 1' },
                    { color: '#E8F7CF', label: '绿色 1' },
                    { color: '#CEF5F7', label: '青色 1' },
                    { color: '#D9EAFC', label: '浅蓝 1' },
                    { color: '#D9DFFC', label: '蓝色 1' },
                    { color: '#E6DCF9', label: '紫色 1' },
                    { color: '#FBDFEF', label: '玫红 1' },

                    { color: '#F1A2AB', label: '红色 2' },
                    { color: '#F8B881', label: '橘橙 2' },
                    { color: '#F5D480', label: '金盏黄 2' },
                    { color: '#FCE75A', label: '柠檬黄 2' },
                    { color: '#C1E77E', label: '绿色 2' },
                    { color: '#81DFE4', label: '青色 2' },
                    { color: '#81BBF8', label: '浅蓝 2' },
                    { color: '#96A7FD', label: '蓝色 2' },
                    { color: '#BA9BF2', label: '紫色 2' },
                    { color: '#F297CC', label: '玫红 2' },

                    { color: '#E4495B', label: '红色 3' },
                    { color: '#F38F39', label: '橘橙 3' },
                    { color: '#F3BB2F', label: '金盏黄 3' },
                    { color: '#EDCE02', label: '柠檬黄 3' },
                    { color: '#8CCF17', label: '绿色 3' },
                    { color: '#01B2BC', label: '青色 3' },
                    { color: '#2F8EF4', label: '浅蓝 3' },
                    { color: '#4861E0', label: '蓝色 3' },
                    { color: '#7E45E8', label: '紫色 3' },
                    { color: '#E746A4', label: '玫红 3' },

                    { color: '#AD1A2B', label: '红色 4' },
                    { color: '#C75C00', label: '橘橙 4' },
                    { color: '#C99103', label: '金盏黄 4' },
                    { color: '#A58F04', label: '柠檬黄 4' },
                    { color: '#5C8D07', label: '绿色 4' },
                    { color: '#07787E', label: '青色 4' },
                    { color: '#0C68CA', label: '浅蓝 4' },
                    { color: '#213BC0', label: '蓝色 4' },
                    { color: '#4C16B1', label: '紫色 4' },
                    { color: '#AE146E', label: '玫红 4' },

                    { color: '#70000D', label: '红色 5' },
                    { color: '#663000', label: '橘橙 5' },
                    { color: '#664900', label: '金盏黄 5' },
                    { color: '#665800', label: '柠檬黄 5' },
                    { color: '#2A4200', label: '绿色 5' },
                    { color: '#004347', label: '青色 5' },
                    { color: '#00346B', label: '浅蓝 5' },
                    { color: '#101E60', label: '蓝色 5' },
                    { color: '#270070', label: '紫色 5' },
                    { color: '#5C0036', label: '玫红 5' }
                ],
            },
              image: {
                
                 upload: {
                    types: ['png', 'jpg', 'gif'], // 允许插入图片的类型
                  },
                 resizeUnit: 'px', // 修改图像尺寸的单位
                  resizeOptions: [
                      {
                          name: 'resizeImage:original', // 名称
                          label: '原始尺寸', // 选项名/按钮提示语句
                          value: null,  // 修改后尺寸，null 为原始尺寸
                          icon: 'original', // 图标
                      },
                      { name: 'resizeImage:60', label: '宽度 60 像素', value: 60, icon: 'small' },
                      { name: 'resizeImage:120', label: '宽度 120 像素', value: 120, icon: 'medium' },
                      { name: 'resizeImage:360', label: '宽度 360 像素', value: 360, icon: 'large' }
                  ],
                      toolbar: [
                        'resizeImage', // 调整图像尺寸选项
                        '|',
                        'resizeImage:original', // 原始尺寸
                        'resizeImage:60', // 宽度 60 像素
                        'resizeImage:120', // 宽度 120 像素
                        'resizeImage:360', // 宽度 360 像素
                        'link', // 图像链接
                        'imageTextAlternative', // 文本替换图像
                        'toggleImageCaption', // 显示或隐藏图像标题
                      ]
                  },
            }
    };
  }
};
</script>

使用

 <Ckeditor v-model="formData.des" />

demo vue3+ckeditor5

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值