介绍

基于CKEditor5 自定义的一款编辑器

安装

npm i ckeditor5-custom-next @ckeditor/ckeditor5-vue

使用

1.引入

// mian.js
import CKEditor from '@ckeditor/ckeditor5-vue'

import App from './App.vue'
const app = createApp(App)
app.use(CKEditor)

2.单文件组件使用

template>
    <div id="app">
        <ckeditor :editor="editor" :disabled="editorDisabled"></ckeditor>
    </div>
</template>

<script>
import ClassicEditor from 'ckeditor5-custom-next';
import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn.js'
export default {
    name: 'app',
    data() {
        return {
            editor: ClassicEditor.Editor,
            // This editor will be read–only when created.
            editorDisabled: true,
            editorConfig: {
              language: 'zh-cn',
            }
        };
    }
}
</script>

3.Events

ready: (editor: any) => void
focus: (editor: any) => void
blur: (editor: any) => void
input: (editor: any) => void
destroy: (editor: any) => void

3.配置-更多配置请参考官方文档 点击文档查看

const editorConfig = reactive({
  language: 'zh-cn',
  toolbar: {
    items: [
      'heading',
      '|',
      'textPartLanguage',
      '|',
      'bold',
      'italic',
      'link',
      'bulletedList',
      'numberedList',
      'outdent',
      'indent',
      'alignment',
      'restrictedEditingException',
      'todoList',
      '|',
      'imageUpload',
      'imageInsert',
      'blockQuote',
      'insertTable',
      'mediaEmbed',
      'undo',
      'redo',
      'specialCharacters',
      '|',
      'code',
      'htmlEmbed',
      'codeBlock',
      'pageBreak',
      'selectAll',
      'showBlocks',
      'findAndReplace',
      'strikethrough',
      '-',
      'style',
      '|',
      'fontSize',
      'fontFamily',
      'fontColor',
      'fontBackgroundColor',
      'superscript',
      'subscript',
      'removeFormat',
      'highlight',
      '|',
      'horizontalLine',
      'accessibilityHelp'
    ],
    shouldNotGroupWhenFull: true
  },
  image: {
    toolbar: [
      'imageTextAlternative',
      'toggleImageCaption',
      'imageStyle:inline',
      'imageStyle:block',
      'imageStyle:side',
      'linkImage'
    ]
  },
  table: {
    contentToolbar: [
      'tableColumn',
      'tableRow',
      'mergeTableCells',
      'tableCellProperties',
      'tableProperties'
    ]
  },
  //自定义设置字体
  fontFamily: {
    options: [
      'default',
      '宋体',
      '新宋体',
      '仿宋',
      '楷体',
      '微软雅黑',
      '黑体',
      '华文仿宋',
      '华文楷体',
      '华文隶书',
      '华文宋体',
      '华文细黑',
      '华文新魏',
      '华文行楷',
      '华文中宋',
      '隶书',
      '苹方 常规',
      '幼圆'
    ]
  },
  ckfinder: {
    uploadUrl: `/uploadfile`, // 上传图片接口
    options: {
      resourceType: 'Images'
    }
  }
})

vite 配置

npm i @ckeditor/vite-plugin-ckeditor5

// vite.config.js / vite.config.ts
import ckeditor5 from '@ckeditor/vite-plugin-ckeditor5'
import { createRequire } from 'node:module'
const require = createRequire(import.meta.url)

export default defineConfig({
  plugins: [
    ckeditor5({ theme: require.resolve('@ckeditor/ckeditor5-theme-lark'), language: 'zh_CN' })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

Webpack 配置

// vue.config.js

const path = require( 'path' );
const { CKEditorTranslationsPlugin } = require( '@ckeditor/ckeditor5-dev-translations' );
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

module.exports = {
  // The source of CKEditor 5 is encapsulated in ES6 modules. By default, the code
  // from the node_modules directory is not transpiled, so you must explicitly tell
  // the CLI tools to transpile JavaScript files in all ckeditor5-* modules.
  transpileDependencies: [
    /ckeditor5-[^/\\]+[/\\]src[/\\].+\.js$/,
  ],

  configureWebpack: {
    plugins: [
      // CKEditor 5 needs its own plugin to be built using webpack.
      new CKEditorTranslationsPlugin( {
          // See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
          language: 'en',

          // Append translations to the file matching the `app` name.
          translationsOutputFile: /app/
      } )
    ]
  },

  // Vue CLI would normally use its own loader to load .svg and .css files, however:
  //	1. The icons used by CKEditor 5 must be loaded using raw-loader,
  //	2. The CSS used by CKEditor 5 must be transpiled using PostCSS to load properly.
  chainWebpack: config => {
    // (1.) To handle the editor icons, get the default rule for *.svg files first:
    const svgRule = config.module.rule( 'svg' );

    // Then you can either:
    //
    // * clear all loaders for existing 'svg' rule:
    //
    //		svgRule.uses.clear();
    //
    // * or exclude ckeditor directory from node_modules:
    svgRule.exclude.add( path.join( __dirname, 'node_modules', '@ckeditor' ) );

    // Add an entry for *.svg files belonging to CKEditor. You can either:
    //
    // * modify the existing 'svg' rule:
    //
    //		svgRule.use( 'raw-loader' ).loader( 'raw-loader' );
    //
    // * or add a new one:
    config.module
        .rule( 'cke-svg' )
        .test( /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/ )
        .use( 'raw-loader' )
        .loader( 'raw-loader' );

    // (2.) Transpile the .css files imported by the editor using PostCSS.
    // Make sure only the CSS belonging to ckeditor5-* packages is processed this way.
    config.module
    .rule( 'cke-css' )
    .test( /ckeditor5-[^/\\]+[/\\].+\.css$/ )
    .use( 'postcss-loader' )
    .loader( 'postcss-loader' )
    .tap( () => {
        return {
            postcssOptions: styles.getPostCssConfig( {
                themeImporter: {
                    themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' ),
                },
                minify: true
            } )
        };
    } );
  }
};

注：更多详细请访问官方文档