CKEditor

CKEditor 介紹

吳姵萱 Sophie Wu 2021/10/08 09:11:46

0 2622

一、CKEditor 簡介

具有模塊化架構的現代 JavaScript 富文本編輯器。其簡潔的 UI 和功能為創建語義內容提供了完美的 WYSIWYG UX

使用 MVC 架構、自定義數據模型、虛擬 DOM 用 ES6 編寫。

響應式圖像和媒體嵌入（視頻、推文）。

自定義輸出格式：HTML 和 Markdown 支持。

通過自動格式化和協作提高工作效率。

可擴展和可定制的設計。

二、CKEditor 使用 (以 vue.js 為例)

1. 先安裝

目前有提供以下5種，以Classic editor為例來安裝

Classic editor
Inline editor
Balloon editor
Balloon block editor
Document editor

npm install --save @ckeditor/ckeditor5-vue2 @ckeditor/ckeditor5-build-classic

2. 在 main.js 中全局引入

import Vue from 'vue';
import CKEditor from '@ckeditor/ckeditor5-vue2';

Vue.use( CKEditor );

3. 建一個 components 來使用，這樣就可以快速地使用官方提供的模板

<template>
    <div id="app">
        <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
    </div>
</template>

<script>
    import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

    export default {
        name: 'app',
        data() {
            return {
                editor: ClassicEditor,
                editorData: '<p>Content of the editor.</p>',
                editorConfig: {
                    // The configuration of the editor.
                }
            };
        }
    }
</script>

4. 自定義 (參考官方步驟)

首先，安裝必要的依賴項：

npm install --save \
    @ckeditor/ckeditor5-vue2 \
    @ckeditor/ckeditor5-dev-webpack-plugin \
    @ckeditor/ckeditor5-dev-utils \
    postcss-loader@3 \
    raw-loader@0.5.1

編輯vue.config.js文件並使用以下配置，沒有該檔案的話請自行建立

const path = require( 'path' );
const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

module.exports = {
    // The source of CKEditor 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 needs its own plugin to be built using webpack.
            new CKEditorWebpackPlugin( {
                // 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 must be loaded using raw-loader,
    //	2. The CSS used by CKEditor must be transpiled using PostCSS to load properly.
    chainWebpack: config => {
        // (1.) To handle 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 styles.getPostCssConfig( {
                    themeImporter: {
                        themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' ),
                    },
                    minify: true
                } );
            } );
    }
};

設定完之後，你就可以依照個人需求安裝需要的功能

5. 範例

<template>
  <div class="ckEditor">
    <ckeditor
      :editor="editor"
      v-model="editorData"
      :config="editorConfig"
    ></ckeditor>
  </div>
</template>

<script>
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'
import '@ckeditor/ckeditor5-build-classic/build/translations/zh'

import heading from '@ckeditor/ckeditor5-heading/src/heading'
import listStyle from '@ckeditor/ckeditor5-list/src/liststyle'
import font from '@ckeditor/ckeditor5-font/src/font'
import alignment from '@ckeditor/ckeditor5-alignment/src/alignment'
import blockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote'
import codeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock'
import linkPlugin from '@ckeditor/ckeditor5-link/src/link'
import horizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline'
import mediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed'

// basic-styles
import bold from '@ckeditor/ckeditor5-basic-styles/src/bold'
import italic from '@ckeditor/ckeditor5-basic-styles/src/italic'
import strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough'
import underline from '@ckeditor/ckeditor5-basic-styles/src/underline'
import subscript from '@ckeditor/ckeditor5-basic-styles/src/subscript'
import superscript from '@ckeditor/ckeditor5-basic-styles/src/superscript'
import code from '@ckeditor/ckeditor5-basic-styles/src/code'

// Table
import table from '@ckeditor/ckeditor5-table/src/table'
import tableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar'

// indent
import indent from '@ckeditor/ckeditor5-indent/src/indent'
import indentBlock from '@ckeditor/ckeditor5-indent/src/indentblock'

// 人名tag功能
import mention from '@ckeditor/ckeditor5-mention/src/mention'


export default {
  name: 'CKEditor',
  props: {},
  data: () => ({
    editor: ClassicEditor,
    editorData: '',
    editorConfig: {
      language: 'zh',
      plugins: [
        heading,
        bold,
        italic,
        strikethrough,
        underline,
        subscript,
        superscript,
        code,
        listStyle,
        font,
        alignment,
        blockQuote,
        codeBlock,
        table,
        tableToolbar,
        linkPlugin,
        indent,
        indentBlock,
        horizontalLine,
        mediaEmbed,
        mention
      ],
      toolbar: {
        items: [
          'heading', // 標題、次標題、次次標題
          '|',
          // 粗體、斜體
          'bold',
          'italic',
          '|',
          // 刪除線、下底線、上標、下標
          'strikethrough',
          'underline',
          'subscript',
          'superscript',
          '|',
          // 編號排版、符號排版種
          'bulletedList',
          'numberedList',
          '|',
          //文字顏色、文字底色、文字字形、文字大小、文字對齊
          'fontColor',
          'fontBackgroundColor',
          'fontfamily',
          'fontsize',
          'alignment',
          '|',
          'blockQuote', // 引用
          'code', // 代碼工具欄
          'codeBlock', // 程式碼區塊
          'insertTable', // 表格(合併、分隔、表格底色、刪除欄/列、插入欄列)
          'horizontalLine', // 水平線
          'link', // 超連結
          '|',
          // 縮排
          'outdent',
          'indent',
          '|',
          'mediaEmbed' // 插入媒體
        ]
      },
      mention: {
        feeds: [
          {
            marker: '@',
            feed: [
              '@Anila',
              '@Amy',
              '@Andrea',
              '@Angela',
              '@Ann',
              '@Anna',
            ],
            minimumCharacters: 1
          }
        ]
      }
    }
  })
}
</script>