添加插件时Ckeditor 5不起作用(没有错误)

时间:2017-12-19 14:50:10

标签: plugins ckeditor paragraph ckeditor5

import InlineEditor from '@ckeditor/ckeditor5-build-inline';
// import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';

InlineEditor
    .create( document.querySelector( '#editor' ), {
        // plugins: [ Bold ],
        toolbar: [ 'bold' ]
    } )
    .then((editor) => {
        editor.setData('Some Text');
    })
    .catch( error => {
        console.error( error );
    } );

enter image description here

当我启用插件时:

import InlineEditor from '@ckeditor/ckeditor5-build-inline';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';

InlineEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Bold ],
        toolbar: [ 'bold' ]
    } )
    .then((editor) => {
        editor.setData('Some Text');
    })
    .catch( error => {
        console.error( error );
    } );

enter image description here

我的npm套餐

webpack-demo@1.0.0 /var/www/english.dev.*******/frontend/web/js/npm/webpack-demo
├── @ckeditor/ckeditor5-autoformat@1.0.0-alpha.2
├── @ckeditor/ckeditor5-basic-styles@1.0.0-alpha.2
├── @ckeditor/ckeditor5-build-inline@1.0.0-alpha.2
├── @ckeditor/ckeditor5-core@1.0.0-alpha.2
├── @ckeditor/ckeditor5-editor-classic@1.0.0-alpha.2
├── @ckeditor/ckeditor5-engine@1.0.0-alpha.2
├── @ckeditor/ckeditor5-essentials@1.0.0-alpha.2
├── @ckeditor/ckeditor5-image@1.0.0-alpha.2
├── @ckeditor/ckeditor5-markdown-gfm@1.0.0-alpha.2
├── @ckeditor/ckeditor5-paragraph@1.0.0-alpha.2
├── @ckeditor/ckeditor5-ui@1.0.0-alpha.2
├── @ckeditor/ckeditor5-utils@1.0.0-alpha.2
├── babel-cli@6.26.0
├── babel-core@6.26.0
├── babel-loader@7.1.2
├── babel-plugin-transform-class-properties@6.24.1
├── babel-plugin-transform-decorators-legacy@1.3.4
├── babel-preset-env@1.6.1
├── babel-preset-react@6.24.1
├── compression-webpack-plugin@1.1.2
├── css-loader@0.28.7
├── fade-props@2.1.0
├── gzip-loader@0.0.1
├── jquery@3.2.1
├── lodash@4.17.4
├── mobx@3.4.1
├── mobx-react@4.3.5
├── node-sass@4.7.2
├── raw-loader@0.5.1
├── react@15.6.2
├── react-addons-css-transition-group@15.6.2
├── react-addons-update@15.6.2
├── react-css-transition-replace@3.0.2
├── react-dom@15.6.2
├── react-redux@5.0.6
├── react-router@4.2.0
├── react-router-dom@4.2.2
├── redux@3.7.2
├── redux-devtools@3.4.1
├── sass-loader@6.0.6
├── style-loader@0.19.1
└── webpack@3.10.0

html的

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

实际上我的目标是通过方法setData()插入带标记的html,但正如我所理解的,我需要使用插件Markdown。但无论如何我无法使用任何插件。谢谢。

P上。 S.我试过基本和内联形式,但同样的问题。

2 个答案:

答案 0 :(得分:0)

我发现这是因为没有导入和使用的Paragraph

import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';

....
plugins: [ Paragraph ]
.....

我认为这对ckeditor来说不是好事。但它是1.0.0我想要它... xD

答案 1 :(得分:0)

CKEditor 5是高度模块化的,甚至支持打字等功能都是需要加载的独立插件。编辑器创建者不能假设应该加载哪些模块并将所有模块留给开发人员。

您可以在"Architecture overview"中了解有关该架构的更多信息。

因此,当您从源代码构建编辑器时,您有义务加载所有必要的插件。如果你使用现有的编辑器构建don't have to do that,因为构建有一组内置的插件。

BTW,加载Paragraph不足以创建编辑器。您将无法键入或粘贴。因此,有一个插件可以实现所有这些基本功能 - Essentials

有关详细信息,请参阅CKEditor 5 Framework的"Quick start" guide(例如,可立即使用的代码段)。