カスタムckeditor5

ckeditor5からは、デフォルトのコンパイラのバージョンでは、唯一のあなたはなど、テキストの色、整列、明るさ、など多くの機能を、必要な場合は、あなたが方法について、以下の手順を経て、その中にコンパイルされたソースコードを追加する必要があり、一定の機能を提供しますコンパイルされたソースコードckeditor5は、カスタマイズされました。

ソースコードをコピーします

公式サイトのチュートリアルでは、地元の発展にgithubの道からのソースコードのコピーを提供しますが、原因の条件に、ダウンロードの失敗の確率は、この時間giteeは使用することができます从其他仓库导入機能は、次の手順を

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

カスタムエディタ

ソースコードをダウンロードして、あなただけは増減する必要がある、デフォルトの機能を設定しています。

機能

追加するには字体、对齐、高亮3つの機能を、例えば、対応するプラグインをインストールする必要があり、

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

私たちは、編集する必要があります 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',
      '|',
      ...// 原有配置
    ]  
  }
}

次に、以下のコマンドを実行し、あなたがにすることができbuild、ディレクトリckeditor.jsに新しいファイルを生成します

npm run build

言語

注：カスタムCKEditorバージョンが公式言語パックをサポートしていない道を構築。

内蔵のデフォルトのテンプレート言語、英語を使用すると、デフォルトの言語が中国で変更する必要がある場合、我々は変更する必要があり、ある
webpack.config.jsと/src/ckeditor.jsファイルlanguageの構成：

language: 'zh-cn'

パッケージ化されますが、しますbuild以下のフォルダを生成translationsしますが、対応する言語ファイルに直接導入され、使用中の他の言語を使用する必要がある場合は、（デフォルトの言語を除く）が自動的に言語の多くは翻訳されたフォルダを、。

使用

デフォルトモードは、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>

ソースコードをコピーします

カスタムエディタ

機能

言語

使用

おすすめ