vue组件 - 框架 - 集成 - 构建文档 - ckeditor5中文文档

CKEditor 5由现成的编辑器构建和构建所基于的CKEditor 5 Framework组成。 在Vue.js应用程序中使用CKEditor 5的最简单方法是选择一个富文本编辑器构建，并将其简单地传递给Vue.js组件的配置。 在快速入门部分中阅读有关此解决方案的更多信息。 此外，您可以从源集成CKEditor 5，这是一个更加灵活和强大的解决方案，但需要一些额外的配置。 该组件与Vue.js 2.x兼容。

快速开始

为Vue.js安装CKEditor 5 WYSIWYG编辑器组件以及您选择的构建。

假设你选择了@ckeditor/ckeditor5-build-classic:

npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic

您现在需要在应用程序中启用CKEditor组件。 有两种方法可以做到这一点：

• 直接script引入
• 导入ES6模块

（可选）您可以在本地使用该组件。

直接引入script

这是在项目中开始使用CKEditor的最快方法。 假设安装了Vue，请包含WYSIWYG编辑器组件和构建的<script>标记：

<script src="../node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js"></script>

<script src="../node_modules/@ckeditor/ckeditor5-vue/dist/ckeditor.js"></script>

使用Vue.use（）方法在应用程序中启用组件：

Vue.use( CKEditor );

您可以始终在本地使用该组件，而不是调用Vue.use()。

在模板中使用<ckeditor>组件：

• editor指令指定编辑器构建（编辑器构造函数）。
• v-model指令启用了开箱即用的双向数据绑定。
• config指令可帮助您将配置传递给编辑器实例。

<div id="app">

  <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>

</div>

const app = new Vue( {

  el: '#app',

  data: {

    editor: ClassicEditor,

    editorData: '<p>Content of the editor.</p>',

    editorConfig: {

// The configuration of the editor.

    }

  }

} );

瞧！ 您应该在Vue.js应用程序中看到CKEditor 5正在运行。

请参阅可帮助您配置组件的受支持指令和事件列表。

使用ES6模块

编辑器组件作为UMD模块，可以在各种环境中使用，例如，由Vue CLI 3生成的应用程序，使用webpack构建等。

要创建编辑器实例，必须首先将编辑器构建和组件模块导入应用程序的根文件（例如，由Vue CLI生成的main.js）。 然后，使用Vue.use()方法启用组件：

import Vue from 'vue';

import CKEditor from '@ckeditor/ckeditor5-vue';

Vue.use( CKEditor );

您可以始终在本地使用该组件，而不是调用Vue.use()。

以下示例展示了应用程序的单个文件组件。 在模板中使用<ckeditor>组件：

• editor指令指定编辑器构建（编辑器构造函数）。
• v-model指令启用了开箱即用的双向数据绑定。
• config指令可帮助您将配置传递给编辑器实例。

<template>

  <div id="app">

    <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>

  </div>

</template>

<script>

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

export default {

    name: 'app',

    data() {

return {

        editor: ClassicEditor,

        editorData: '<p>Content of the editor.</p>',

        editorConfig: {

          // The configuration of the editor.

        }

      };

    }

  }

</script>

请参阅可帮助您配置组件的受支持指令和事件列表。

使用本地组件

如果您不希望全局启用CKEditor组件，则可以完全跳过Vue.use( CKEditor )部分。 而是在视图的components属性中配置它。

确保可以访问CKEditor和ClassicEditor，具体取决于集成方案：直接脚本包含或ES6模块导入。

<template>

  <div id="app">

    <ckeditor :editor="editor" ... ></ckeditor>

  </div>

</template>

<script>

export default {

    name: 'app',

    components: {

      // Use the <ckeditor> component in this view.

      ckeditor: CKEditor.component

    },

    data() {

return {

        editor: ClassicEditor,

        // ...

      };

    }

  }

</script>

从源代码使用CKEditor

从源代码集成富文本编辑器允许您使用CKEditor 5 Framework的全部功能。

本指南假定您使用Vue CLI 3+作为样板，并且已使用vue create命令创建了应用程序。

在“高级设置指南”中了解有关从源构建CKEditor的更多信息。

配置vue.config.js

要使用您的应用程序构建CKEditor，必须对默认项目配置进行某些更改。

首先，安装必要的依赖项：

npm install --save \

@ckeditor/ckeditor5-dev-webpack-plugin \

@ckeditor/ckeditor5-dev-utils \

postcss-loader \

raw-loader

编辑vue.config.js文件并使用以下配置。 如果文件不存在，请在应用程序的根目录中创建它（即在package.json旁边）：

const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );

const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

module.exports = {

  // The source of CKEditor is encapsulated in ES6 modules. By default, the code

  // from the node_modules directory is not transpiled, so you must explicitly tell

  // the CLI tools to transpile JavaScript files in all ckeditor5-* modules.

  transpileDependencies: [

    /ckeditor5-[^/\\]+[/\\]src[/\\].+\.js$/,

  ],

  configureWebpack: {

    plugins: [

      // CKEditor needs its own plugin to be built using webpack.

new CKEditorWebpackPlugin( {

        // See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html

        language: 'en'

      } )

    ]

  },

  css: {

    loaderOptions: {

      // Various modules in the CKEditor source code import .css files.

      // These files must be transpiled using PostCSS in order to load properly.

      postcss: styles.getPostCssConfig( {

        themeImporter: {

          themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )

        },

        minify: true

} )

    }

  },

  chainWebpack: config => {

    // Vue CLI would normally use its own loader to load .svg files. The icons used by

    // CKEditor should be loaded using raw-loader instead.

    config.module

            .rule( 'svg' )

            .test( /ckeditor5-[^^/\\]+[/\\]theme[/\\]icons[/\\][^^/\\]+\.svg$/ )

            .use( 'file-loader' )

            .loader( 'raw-loader' );

  }

};

从源代码使用编辑器

配置vue.config.js后，您可以选择编辑器的构建块。 安装集成所需的软件包：

npm install --save \

@ckeditor/ckeditor5-editor-classic \

@ckeditor/ckeditor5-essentials \

@ckeditor/ckeditor5-basic-styles \

@ckeditor/ckeditor5-basic-styles \

@ckeditor/ckeditor5-link \

@ckeditor/ckeditor5-paragraph

您可以使用更多包，具体取决于应用程序中需要哪些功能。

import CKEditor from '@ckeditor/ckeditor5-vue';

Vue.use( CKEditor );

您可以始终在本地使用该组件，而不是调用Vue.use()。

现在，您只需在editorConfig data属性中指定富文本编辑器选项 (including plugins) 的列表：

<template>

  <div id="app">

    <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>

  </div>

</template>

<script>

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';

import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';

import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic';

import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';

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

export default {

    name: 'app',

    data() {

return {

        editor: ClassicEditor,

        editorData: '<p>Content of the editor.</p>',

        editorConfig: {

          plugins: [

            EssentialsPlugin,

            BoldPlugin,

            ItalicPlugin,

            LinkPlugin,

            ParagraphPlugin

          ],

          toolbar: {

            items: [

              'bold',

              'italic',

              'link',

              'undo',

              'redo'

            ]

          }

        }

      };

    }

  };

</script>

组件指令

editor

该指令指定组件使用的编辑器。 它必须直接引用要在模板中使用的编辑器构造函数。

<template>

  <div id="app">

    <ckeditor :editor="editor" ... ></ckeditor>

  </div>

</template>

<script>

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

export default {

    name: 'app',

    data() {

return {

        editor: ClassicEditor,

        // ...

      };

    }

  }

</script>

要在应用程序中使用多个富文本编辑器构建，您需要从源配置它或使用“超级构建”。

tag-name

默认情况下，编辑器组件创建一个<div>容器，该容器用作传递给编辑器的元素（例如，ClassicEditor＃元素）。 可以配置元素，例如创建<textarea>，使用以下指令：

<ckeditor :editor="editor" tag-name="textarea"></ckeditor>

v-model

Vue中表单输入的标准指令。 与value不同，它创建了一个双向数据绑定，其中：

• 设置初始编辑器内容
• 当编辑器内容发生变化时（例如，当用户输入时），自动更新应用程序的状态，
• 可用于在必要时设置编辑器内容。

<template>

  <div id="app">

    <ckeditor :editor="editor" v-model="editorData"></ckeditor>

    <button v-on:click="emptyEditor()">Empty the editor</button>

    <h2>Editor data</h2>

    <code>{{ editorData }}</code>

  </div>

</template>

<script>

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

export default {

    name: 'app',

    data() {

return {

        editor: ClassicEditor,

        editorData: '<p>Content of the editor.</p>'

      };

    },

    methods: {

      emptyEditor() {

this.editorData = '';

      }

    }

  }

</script>

在上面的示例中，editorData属性将在用户键入和更改内容时自动更新。 它也可以用于更改（如在emptyEditor()中）或设置编辑器的初始内容。

如果您只想在编辑器数据更改时执行操作，请使用input事件。

value

允许单向数据绑定设置编辑器的内容。 与v-model不同，当编辑器的内容发生更改时，不会更新该值。

<template>

  <div id="app">

    <ckeditor :editor="editor" :value="editorData"></ckeditor>

  </div>

</template>

<script>

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

export default {

    name: 'app',

    data() {

return {

        editor: ClassicEditor,

        editorData: '<p>Content of the editor.</p>'

      };

    }

  }

</script>

要在编辑器数据更改时执行操作，请使用input事件。

config

指定编辑器的配置。

<template>

  <div id="app">

    <ckeditor :editor="editor" :config="editorConfig"></ckeditor>

  </div>

</template>

<script>

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

export default {

    name: 'app',

    data() {

return {

        editor: ClassicEditor,

        editorConfig: {

          toolbar: [ 'bold', 'italic', '|' 'link' ]

        }

      };

    }

  }

</script>

disabled

该指令控制编辑器的isReadOnly属性。

它设置编辑器的初始只读状态，并在其生命周期中对其进行更改。

<template>

  <div id="app">

    <ckeditor :editor="editor" :disabled="editorDisabled"></ckeditor>

  </div>

</template>

<script>

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

export default {

    name: 'app',

    data() {

return {

        editor: ClassicEditor,

        // This editor will be read–only when created.

        editorDisabled: true

};

    }

  }

</script>

组件事件

ready

对应编辑器ready事件。

<ckeditor :editor="editor" @ready="onEditorReady"></ckeditor>

focus

对应编辑器focus事件。

<ckeditor :editor="editor" @focus="onEditorFocus"></ckeditor>

blur

对应编辑器blur事件。

<ckeditor :editor="editor" @blur="onEditorBlur"></ckeditor>

input

对应于change:data事件。了解更多信息，请查看v-model指令。

<ckeditor :editor="editor" @input="onEditorInput"></ckeditor>

destroy

对应于销毁编辑器事件。

注意：由于编辑器的销毁是由promise驱动的，因此可以在实际的promise解析之前触发此事件。

<ckeditor :editor="editor" @destroy="onEditorDestroy"></ckeditor>

贡献和报告问题

该组件的源代码可以在GitHub的https://github.com/ckeditor/ckeditor5-vue上找到。

^

文章作者ianzhi,原文地址：https://cloud.tencent.com/developer/article/1476866

文章版权归作者所有，转载请保留此声明。