自定義ckeditor5

時間 2019-11-09

標籤自定義 ckeditor5 ckeditor 简体版

原文原文鏈接

從ckeditor5開始，默認的編譯版本，只提供了固定的功能，若是須要使用更多的特性，好比文字顏色，對齊，高亮等，則須要經過源代碼編譯的方式添加進去，如下說明下如何從源代碼方式編譯自定義的ckeditor5。html

拷貝源代碼

官網教程中，提供了從github上拷貝源代碼到本地開發的方式，可是因爲國情，有機率下載失敗，這時候能夠藉助gitee的 從其餘倉庫導入 功能，步驟以下webpack

在 gitee.com 上新建一個倉庫，選擇從其餘倉庫導入，倉庫地址爲 https://github.com/ckeditor/ckeditor5-build-classic.git
下載倉庫到本地

# https://gitee.com/somebugs/ckeditor5-build-classic 是我本身的gitee倉庫地址

git clone -b stable https://gitee.com/somebugs/ckeditor5-build-classic

# 安裝依賴
npm i

自定義編輯器

下載下來的源代碼，已經配置好了默認的功能，只須要對其進行增減便可。git

功能

以添加字體, 對齊, 高亮三個功能爲例, 須要先安裝對應的插件，github

npm i @ckeditor/ckeditor5-font @ckeditor/ckeditor5-alignment @ckeditor/ckeditor5-highlight -D

須要編輯 src/ckeditor.jsweb

// src/ckeditor.js

// Font      包含了字體，文字顏色，文字背景色三個功能
// Highlight 包含了字體高亮和背景高亮
import Font from '@ckeditor/ckeditor5-font/src/font';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'; 
import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight';

ClassicEditor.builtinPlugins = [
  ...// 原有的插件
  Font,
  Alignment,
  Highlight,
];

ClassicEditor.defaultConfig = {
  toolbar: {
    items: [
      ...// 原有配置
      'alignment',
      '|',
      'fontSize', 
      'fontFamily', 
      'fontColor', 
      'fontBackgroundColor',
      'highlight',
      '|',
      ...// 原有配置
    ]  
  }
}

而後執行如下命令，便可在build目錄下生成新的ckeditor.js文件shell

npm run build

語言

注意：自定義方式構建出的ckeditor不支持官方的語言包。npm

模板默認內置的語言是英語，若是須要修改默認的語言爲中文，則須要同時修改
webpack.config.js 和 /src/ckeditor.js 文件中的 language 配置：編輯器

language: 'zh-cn'

在打包的同時，會在 build 文件夾下面生成 translations 文件夾，裏面自動翻譯了很是多的語言（默認語言除外），在使用中若是須要使用其餘語言，直接引入對應的語言文件便可。ide

使用

默認會生成umd方式的js文件，能夠直接使用，也能夠經過ES6模塊方式導入使用。直接使用的變量名依然是 window.ClassicEditor字體

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 – classic editor build – development sample</title>
    <style>
        body {
            max-width: 800px;
            margin: 20px auto;
        }
  </style>

</head>
<body>

<h1>CKEditor 5 – classic editor build – development sample</h1>

<div id="editor">
    <h2>Sample</h2>

    <p>This is an instance of the <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#classic-editor">classic editor build</a>.</p>

    <figure class="image">
        <img src="../tests/manual/sample.jpg" alt="Autumn fields" />
    </figure>

    <p>You can use this sample to validate whether your <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html">custom build</a> works fine.</p>
</div>

<script src="../build/translations/en.js"></script>
<script src="../build/translations/zh.js"></script>
<script src="../build/ckeditor.js"></script>

<script>
    ClassicEditor.create( document.querySelector( '#editor' ), {
    language: 'en'
  } )
        .then( editor => {
            window.editor = editor;
        } )
        .catch( err => {
            console.error( err.stack );
        } );
</script>

</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。