Vue.js 2.x 富文本编辑器组件

本指南介绍了 CKEditor 5 与 Vue.js 2.x 的集成。但是，Vue 2 已达到生命周期终点，不再积极维护。要了解有关与 Vue.js 3+ 集成的更多信息，请查看 “Vue.js 3+ 的富文本编辑器组件” 指南。

Vue.js 是一个功能强大的框架，用于构建 Web 用户界面。CKEditor 5 提供了可在您的应用程序中使用的官方 Vue 组件。

CKEditor 5 构建器

在我们的交互式构建器中，您可以快速体验 CKEditor 5。它提供了一个易于使用的用户界面，可帮助您配置、预览和下载适合您需求的编辑器。您可以轻松地选择

编辑器类型。
您需要的功能。
首选框架（React、Angular、Vue 或 Vanilla JS）。
首选分发方法。

最后，您将获得适合您需求的现成代码！

查看我们的交互式构建器

# 快速入门

# 从 npm 安装

本指南假设您已经拥有一个 Vue 项目。首先，安装 CKEditor 5 包

ckeditor5 – 包含开源插件和功能。
ckeditor5-premium-features – 包含高级插件和功能。

npm install ckeditor5 ckeditor5-premium-features

根据您的配置和所选插件，您可能需要安装第一个包或两个包。

然后，安装 CKEditor 5 WYSIWYG 编辑器组件 for Vue 2

npm install @ckeditor/ckeditor5-vue2

要创建编辑器实例，您必须首先将编辑器和组件模块导入到应用程序的根文件（例如，使用 create-vue 生成的 main.js）中。

import Vue from 'vue';
import CKEditor from '@ckeditor/ckeditor5-vue2';
import App from './App.vue';

Vue.use( CKEditor );

new Vue( { render: ( h ) => h( App ) } ).$mount( '#app' );

在模板标签内使用 <ckeditor> 组件。以下示例展示了如何在组件中使用开源插件和高级插件。

<template>
    <div id="app">
        <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
    </div>
</template>

<script>
import { ClassicEditor, Bold, Essentials, Italic, Mention, Paragraph, Undo } from 'ckeditor5';
import { SlashCommand } from 'ckeditor5-premium-features';

import 'ckeditor5/ckeditor5.css';
import 'ckeditor5-premium-features/ckeditor5-premium-features.css';

export default {
    name: 'app',
    data() {
        return {
            editor: ClassicEditor,
            editorData: '<p>Hello from CKEditor 5 in Vue 2!</p>',
            editorConfig: {
                toolbar: {
                    items: [ 'undo', 'redo', '|', 'bold', 'italic' ],
                 },
                plugins: [
                    Bold, Essentials, Italic, Mention, Paragraph, SlashCommand, Undo
                ],
                licenseKey: '<YOUR_LICENSE_KEY>',
                mention: { 
                    // Mention configuration
                }
            }
        };
    }
};
</script>

# 在本地使用组件

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

<template>
    <div id="app">
        <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
    </div>
</template>

<script>
import CKEditor from '@ckeditor/ckeditor5-vue2';
import { Bold, ClassicEditor, Essentials, Italic, Paragraph } from 'ckeditor5';

import 'ckeditor5/ckeditor5.css';

export default {
    name: 'app',
    components: {
        ckeditor: CKEditor.component
    },
    data() {
        return {
            editor: ClassicEditor,
            editorData: '<p>Hello from CKEditor 5 in Vue 2!</p>',
            editorConfig: {
                toolbar: {
                    items: [ 'undo', 'redo', '|', 'bold', 'italic' ],
                },
                plugins: [ Bold, Essentials, Italic, Paragraph ],
            }
        };
    }
};
</script>

# 组件指令

# `editor`

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

<template>
        <div id="app">
            <ckeditor :editor="editor" ></ckeditor>
        </div>
</template>

<script>
    import { ClassicEditor } from 'ckeditor5';

    export default {
        name: 'app',
        data() {
            return {
                editor: ClassicEditor,

                // ...
            };
        }
    };
</script>

# `tag-name`

默认情况下，编辑器组件创建一个 <div> 容器，该容器用作传递给编辑器的元素（例如，ClassicEditor#element）。元素可以配置，因此例如要创建 <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 'ckeditor5';

    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 'ckeditor5';

    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 'ckeditor5';

    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 'ckeditor5';

    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`

对应于 destroy 编辑器事件。

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

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

# 如何？

# 使用文档编辑器类型

如果您在应用程序中使用文档（分离）编辑器，则需要手动将编辑器工具栏添加到 DOM。

由于在编辑器实例就绪之前无法访问编辑器工具栏，因此请将工具栏插入代码放在组件的 ready 事件触发后执行的方法中，如下例所示

<template>
    <div id="app">
        <ckeditor :editor="editor" @ready="onReady" ></ckeditor>
    </div>
</template>

<script>
    import { DecoupledEditor, Bold, Essentials, Italic, Paragraph, Undo } from 'ckeditor5';

    import 'ckeditor5/ckeditor5.css'

    export default {
        name: 'app',
        data() {
            return {
                editor: DecoupledEditor,
                // ...
            };
        },
        methods: {
            onReady( editor )  {
                // Insert the toolbar before the editable area.
                editor.ui.getEditableElement().parentElement.insertBefore(
                    editor.ui.view.toolbar.element,
                    editor.ui.getEditableElement()
                );
            }
        }
    };
</script>

# 本地化

CKEditor 5 支持多种 UI 语言，官方 Vue 2 组件也一样。请按照以下说明在您的 Vue 应用程序中翻译 CKEditor 5。

与 CSS 样式表类似，这两个包都有独立的翻译。如以下示例所示导入它们。然后，将它们传递给组件中 editorConfig 属性内的 translations 数组。

<template>
    <div id="app">
        <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
    </div>
</template>

<script>
import { ClassicEditor, Bold, Essentials, Italic, Paragraph } from 'ckeditor5';
// More imports...

import coreTranslations from 'ckeditor5/translations/es.js';
import premiumFeaturesTranslations from 'ckeditor5-premium-features/translations/es.js';

// Style sheets imports...

export default {
    name: 'app',
    data() {
        return {
            editor: ClassicEditor,
            editorData: '<p>Hola desde CKEditor 5 en Vue 2!</p>',
            editorConfig: {
                toolbar: {
                    items: [ 'undo', 'redo', '|', 'bold', 'italic' ],
                },
                plugins: [ Bold, Essentials, Italic, Paragraph ],
                translations: [ coreTranslations, premiumFeaturesTranslations ]
            }
        };
    }
};
</script>

有关更多信息，请参阅 “设置 UI 语言” 指南。

# 贡献和报告问题

此组件的源代码可在 GitHub 上的 https://github.com/ckeditor/ckeditor5-vue2 中找到。

我们每天都在努力使我们的文档保持完整。您是否发现了过时的信息？是否缺少某些内容？请通过我们的问题跟踪器报告。

随着 42.0.0 版本的发布，我们重新编写了许多文档以反映新的导入路径和功能。感谢您的反馈，帮助我们确保文档的准确性和完整性。

Vue.js 2.x 富文本编辑器组件

CKEditor 5 构建器

# 快速入门

# 从 npm 安装

# 在本地使用组件

# 组件指令

# editor

# tag-name

# v-model

# value

# config

# disabled

# 组件事件

# ready

# focus

# blur

# input

# destroy

# 如何？

# 使用文档编辑器类型

# 本地化

# 贡献和报告问题

# `editor`

# `tag-name`

# `v-model`

# `value`

# `config`

# `disabled`

# `ready`

# `focus`

# `blur`

# `input`

# `destroy`