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

虽然 CKEditor 4 不是目前主要维护的分支，不过官方并没有让它落后于潮流。近日，CKEditor 团队发布了与 Vue.js 框架原生集成的 CKEditor 4。

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

根据官方的介绍，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属性负责设置初始的编辑器数据。

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

CKEditor 4 编辑器已与 Vue.js 集成相关推荐

CKEditor 4编辑器已与Vue.js集成
虽然 CKEditor 4 不是目前主要维护的分支,不过官方并没有让它落后于潮流.近日,CKEditor 团队发布了与 Vue.js 框架原生集成的 CKEditor 4. 这就意味着,开发者可以通过 ...
npm 可视化html编辑器,超给力 Vue.js 可视化H5拖拽编辑器Quark-H5
前两天有分享一个鲁班H5移动端页面生成器.今天再给大家推荐一款超优秀的Vue H5可视化布局编辑器QuarkH5. quark-h5 基于 vue.js 开源的H5可视化拖放编辑器,star高达1.7 ...
Vue.js经典开源项目汇总
Vue.js经典开源项目汇总 Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计 ...
【前端】Vue.js经典开源项目汇总
Vue.js经典开源项目汇总原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) ...
VUE.JS开源资料
Vue常用经典开源项目汇总参考-海量 Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的 ...
typed.js_Typed.js集成可轻松创建打字动画
typed.js Vue类型的js (vue-typed-js) A Vue.js integration for Typed.js. 用于Typed.js的Vue.js集成. Typed.js is ...
Awesome Vue.js vue.js学习资源链接大全中文
策划列表相关的vue.js可畏的事资源官方资源外部资源工作门户社区会议播客官方的例子教程实例书项目采用vue.js 开源商业产品应用/网站互动体验企业使用组件& ...
Vue.js自定义指令的用法与实例
市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vu ...
Vue.js提炼与升华
Vue.js 第一部分 Vue.js 介绍 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vu ...

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

CKEditor 4 编辑器已与 Vue.js 集成相关推荐

最新文章

热门文章