美文网首页
CKEditor5 build

CKEditor5 build

作者: sen_coder | 来源:发表于2020-06-24 16:21 被阅读0次
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复制到对应的项目中.

相关文章

网友评论

      本文标题:CKEditor5 build

      本文链接:https://www.haomeiwen.com/subject/vqorfktx.html