Custom ckeditor5

From ckeditor5, the default compiler version, only provides a fixed function, If you need more features, such as text color, alignment, brightness, etc., you need to add the source code compiled into it by way of the following instructions about how the compiled source code ckeditor5 customized.

Copy the source code

Official website tutorial provided a copy of the source code from github way to local development, but due to the conditions, the probability of download failure, this time gitee can make use of 从其他仓库导入the function, the following steps

Create a new warehouse, selected on gitee.com 从其他仓库导入, warehouse addresshttps://github.com/ckeditor/ckeditor5-build-classic.git
Download to a local warehouse

# https://gitee.com/somebugs/ckeditor5-build-classic 是我自己的gitee仓库地址

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

# 安装依赖
npm i

Custom editor

Download the source code, has configured the default function, only you need to be increased or decreased.

Features

To add 字体, 对齐, 高亮three functions, for example, need to install the corresponding plug-in,

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

We need to edit src/ckeditor.js

// 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',
      '|',
      ...// 原有配置
    ]  
  }
}

Then execute the following command, you can be in buildgenerating a new file in the directory ckeditor.js

npm run build

Language

Note: Custom build way out ckeditor does not support official language pack.

Built-in default template language is English, if you need to modify the default language is Chinese, we need to modify
webpack.config.jsand /src/ckeditor.jsfile languageconfiguration:

language: 'zh-cn'

While packaged, will buildgenerate a folder below translationsthe folder, which is automatically translated a lot of language (except for the default language), if you need to use other languages in use, is introduced directly into the corresponding language files.

use

The default mode is generated umd js file can be directly used, it can be introduced by using ES6 modular manner. Variable names are still used directlywindow.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>

Copy the source code

Custom editor

Features

Language

use

Guess you like