CKEditor5 build

image.png

ckeditor5 分为build及framework

ckeditor5 有5种样式适应不同的需要，当然也可根据需要自定义。

image

文件上传。以下四种。调用对应的服务。

image

ckeditor5使用

• 从github 复制

  git clone -b stable https://github.com/ckeditor/ckeditor5-build-classic.git
  cd ckeditor5-build-classic
  npm install
  
  

• 安装需要的组件例：

  npm install --save-dev @ckeditor/ckeditor5-alignment
  
  

• 修改 src/ckeditor.js

• // The editor creator to use.
  import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
  
  import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
  import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
  import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
  import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
  import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
  import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
  import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage';
  import Heading from '@ckeditor/ckeditor5-heading/src/heading';
  import Image from '@ckeditor/ckeditor5-image/src/image';
  import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
  import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
  import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
  import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
  import Link from '@ckeditor/ckeditor5-link/src/link';
  import List from '@ckeditor/ckeditor5-list/src/list';
  import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
  
  import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';     // <--- ADDED
  
  export default class ClassicEditor extends ClassicEditorBase {}
  
  // Plugins to include in the build.
  ClassicEditor.builtinPlugins = [
      Essentials,
      UploadAdapter,
      Autoformat,
      Bold,
      Italic,
      BlockQuote,
      EasyImage,
      Heading,
      Image,
      ImageCaption,
      ImageStyle,
      ImageToolbar,
      ImageUpload,
      Link,
      List,
      Paragraph,
      Alignment                                                            // <--- ADDED
  ];
  
  // Editor configuration.
  ClassicEditor.defaultConfig = {
      toolbar: {
          items: [
              'heading',
              '|',
              'alignment',                                                 // <--- ADDED
              'bold',
              'italic',
              'link',
              'bulletedList',
              'numberedList',
              'imageUpload',
              'blockQuote',
              'undo',
              'redo'
          ]
      },
      image: {
          toolbar: [
              'imageStyle:full',
              'imageStyle:side',
              '|',
              'imageTextAlternative'
          ]
      },
      // This value must be kept in sync with the language defined in webpack.config.js.
      language: 'en'
  };
  
  

• 重新build

  npm run build
  
  

  将 build/ckeditor.js复制到对应的项目中.