0 
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 );
    } );

在此处输入图像描述

当我启用插件时：

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 );
    } );

在此处输入图像描述

我的 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。但无论如何我不能让它与任何插件一起工作。谢谢你。

PS我尝试了基本和内联形式，但同样的问题。

4

2 回答 2

0

CKEditor 5 是高度模块化的，甚至诸如支持打字之类的功能也是您需要加载的单独插件。编辑器创建者不能假设应该加载哪些模块，而将所有这些都留给开发人员。

您可以在“架构概述”中阅读有关架构的更多信息。

因此，当您从 source 构建编辑器时，您有义务加载所有必要的插件。如果您使用现有的编辑器构建，则不必这样做，因为构建具有内置的一组插件。

顺便说一句，加载Paragraph不足以创建编辑器。您将无法键入或粘贴。因此，有一个插件可以启用所有这些基本功能 - Essentials.

请参阅 CKEditor 5 框架的“快速入门”指南以获取更多信息（例如，即用型代码片段）。

于 2017-12-20T12:02:39.623 回答
0

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

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

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

我认为这对 ckeditor 来说不是很好的行为。但它是 1.0.0 我想要什么.. xD

于 2017-12-20T08:42:44.207 回答