vue使用ckeditor_使用自定义的Vue CKEditor组件

最新推荐文章于 2024-06-26 11:28:19 发布

cuk5340

最新推荐文章于 2024-06-26 11:28:19 发布

阅读量1.4k

点赞数

文章标签： vue react python js java ViewUI

原文链接：https://vuejsexamples.com/playing-around-with-a-custom-vue-ckeditor-component/

版权

本文介绍了如何在Vue项目中集成和使用CKEditor 4，包括安装、导入组件、设置属性如高度、工具栏、语言等，并提供了示例代码和组件源文件结构。

摘要由CSDN通过智能技术生成

vue使用ckeditor

CKEditor v4和Vue.js v2 (CKEditor v4 & Vue.js v2)

Playing around with a custom Vue CKEditor component.

使用自定义的Vue CKEditor组件。

The battle-tested WYSIWYG HTML editor, when you need even more features and legacy compatibility.

经过验证的WYSIWYG HTML编辑器，当您需要更多功能和旧版兼容性时。

View demo 查看演示 CKEditor v4 CKEditor v4

安装 (Install)

yarn add vueckeditor

用法 (Usage)

VueCkeditor is using ckeditor external.

VueCkeditor在外部使用ckeditor 。

To start using CKEditor on your website, add a single <script> tag to your HTML page:

要在您的网站上开始使用CKEditor，请在HTML页面中添加一个<script>标签：

<script src="//cdn.ckeditor.com/4.6.2/full/ckeditor.js"></script>

Or visit the official CKEditor Download site. And click the Download CKEditor button to get the .zip installation file. If you want to try out more editor features, you can download the Full Package instead.

或访问官方CKEditor下载站点。然后单击“ 下载CKEditor”按钮以获取.zip安装文件。如果您想尝试更多编辑器功能，则可以下载完整软件包。

Unpack (extract) the downloaded .zip archive to the ckeditor directory in the root of your website.

将下载的.zip存档解压缩(解压缩)到网站根目录中的ckeditor目录。

<script src="/path/to/ckeditor.js"></script>

将VueCkeditor导入您的页面 (Import VueCkeditor to your page)

Single ckeditor

单ckeditor

<template lang="pug">
  #app
    vue-ckeditor(v-model="content")
</template>

<script>
  import VueCkeditor from 'vueckeditor';

  export default {
    components: {
      VueCkeditor
    },
    data() {
      return {
        content: 'Hello World!',
      };
    }
  }
</script>

Multi ckeditor

多计算机

<template lang="pug">
  #app
    vue-ckeditor(v-model="contentA" id="editor-a")
    vue-ckeditor(v-model="contentB" id="editor-b")
</template>

<script>
  import VueCkeditor from '../src/vueckeditor.vue';

  export default {
    components: {
      VueCkeditor
    },
    data() {
      return {
        contentA: 'Hello World!',
        contentB: 'Hello World!',
      };
    }
  }
</script>

道具 (Props)

ID (id)

Type: String
类型： String
Required: false
必填：false
Default: null
默认值： null

高度 (height)

Type: String
类型： String
Required: false
必填：false
Default: 300px
默认值： 300px

You can find toolbar list of Toolbar Configurator.

您可以找到“工具栏配置器”的工具栏列表。

Type: Array
类型： Array
Required: false
必填：false
Default:
默认：

[
  'Format',
  ['Bold', 'Italic', 'Strike', 'Underline'],
  ['BulletedList', 'NumberedList', 'Blockquote'],
  ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
  ['Link', 'Unlink'],
  ['FontSize', 'TextColor'],
  ['Image'],
  ['Undo', 'Redo'],
  ['Source', 'Maximize']
]

语言 (language)

Type: String
类型： String
Required: false
必填：false
Default: 'zh-cn'
默认值： 'zh-cn'

Extraplugins (extraplugins)

Type: String
类型： String
Required: false
必填：false
Default: ''
默认值： ''

小费！！ (TIP!!)

Update components value with id: https://jsfiddle.net/zhuowenli/okx75cem/

使用ID更新组件值： https : //jsfiddle.net/zhuowenli/okx75cem/

资料夹结构 (Folder structure)

src/: Source files for this component
src/ ：此组件的源文件
- vueckeditor.vue The component itselfvueckeditor.vue组件本身
example/: Example for demonstrating this component
example/ ：用于演示此组件的示例
- index.js: Entry for the exampleindex.js ：示例的条目
- App.vue: The root component which we use to load this componentApp.vue ：我们用来加载此组件的根组件
vbuild.example.js: Config file for your example
vbuild.example.js ：您的示例的配置文件
vbuild.component.js: Config file for your component
vbuild.component.js ：组件的配置文件
vbuild.unit.js: Config file for vbuild to run unit tests
vbuild.unit.js ： vbuild.unit.js配置文件以运行单元测试
package.json: App manifest
package.json ：应用清单
.editorconfig: Ensure consistent editor behaivor
.editorconfig ：确保编辑器行为一致
.gitignore: Ignore files we don't need to push
.gitignore ：忽略我们不需要推送的文件