CKEditor 4 编辑器已与 Vue.js 集成

局长
 局长
发布于 2020年02月12日
收藏 34

虽然 CKEditor 4 不是目前主要维护的分支,不过官方并没有让它落后于潮流。近日,CKEditor 团队发布重庆11选5_[官网首页]了与 Vue.js 框架原生集成的 CKEditor 4。

这就意味着,开发者可以通过<ckeditor />标签以 Vue.js 组件的形式使用 CKEditor 4 ,而作为 Vue.js 的原生组件,开发者可以更快地将其应用到网站上。为了尽可能简单直观地安装使用 CKEditor 4,集成 Vue.js 的 CKEditor 4 已在 npmCDN 中提供,也可通过 zip 包使用。

重庆11选5_[官网首页]根据官方的介绍,CKEditor 4 只是一个 JavaScript 富文本编辑组件,与大家熟知的 JavaScript 框架都兼容,它没有使用小众技术或要求在不常见的环境中运行。只要开发者使用的框架没有奇怪的限制,CKEditor 4 都能与其兼容。

浏览器支持

CKEditor 4 Vue 组件可在除 Internet Explorer 之外的所有受支持的浏览器中使用。

注意:即使 CKEditor 4 支持包括 IE8、IE9 和 IE10 在内的较旧 Internet Explorer 版本,但集成 Vue 的 CKEditor 4 仅支持在最新的 Internet Explorer 11 中使用。

要启用对 Internet Explorer 11 的支持,不应采用标准导入的方式,而是需要导入一个包含所有必需的 polyfill 的特定文件dist/legacy.js

import CKEditor from 'ckeditor4-vue/dist/legacy.js'

安装和使用

要从 npm 安装 Vue.js 的 CKEditor 4 组件,只需运行:

npm install ckeditor4-vue

安装完成后将其导入项目中,并通过调用Vue.use()方法进行使用:

import Vue from 'vue';
import CKEditor from 'ckeditor4-vue';
 
Vue.use( CKEditor );
 
new Vue( {
    // ... options
} )

然后应在模板中添加<ckeditor />标签以创建 CKEditor 4 实例:

<template>
  <div id="app">
    <ckeditor value="Hello, World!"></ckeditor>
  </div>
</template>

上面代码中使用的value重庆11选5_[官网首页]属性负责设置初始的编辑器数据。

文档和示例:http://ckeditor.com/docs/ckeditor4/latest/examples/vue.html

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区。
转载请注明:文章转载自 OSCHINA 社区 [http://bulieq58.com]
本文标题:CKEditor 4 编辑器已与 Vue.js 集成
加载中

精彩评论

养大虾
养大虾
5.x 跟 4.x 比,5.x 少了很多功能。重庆11选5_[官网首页]4.x 虽臃肿,但有些功能实用,比如插入代码功能 5.x 就没有。
陨落人间
陨落人间
没有 tinymce好用。

最新评论(7

陨落人间
陨落人间
没有 tinymce好用。
O
OSC_jxieGr
放弃了,本来升级到5了,发现不是那么回事了,不再是HTML编辑器了。
依旧永恒
依旧永恒
跟ueditor相比,有什么优缺点?
红薯
红薯
CKEditor 最新版应该是 5.0 了
养大虾
养大虾
5.x 跟 4.x 比,5.x 少了很多功能。4.x 虽臃肿,但有些功能实用,比如插入代码功能 5.x 就没有。
东胜神洲
东胜神洲
重庆11选5_[官网首页]昨天还想着,找一个能配合 vue 的编辑器。。。。研究一下看看。。
知足2020
路过
返回顶部
顶部

页面底部区域 foot.htm