vue网站案例_CKEditor 4编辑器已与Vue.js集成

最新推荐文章于 2024-07-23 17:22:52 发布

weixin_39983384

最新推荐文章于 2024-07-23 17:22:52 发布

阅读量163

点赞数

文章标签： vue网站案例

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

这就意味着，开发者可以通过标签以 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 4 实例：


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

上面代码中使用的value属性负责设置初始的编辑器数据。

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

推荐阅读

JVM生态报告：Spring、Maven与IDEA主导市场

一个案例掌握深度学习

Container Linux将退役，让位Fedora CoreOS

Linus亲手优化内核管道代码，make性能大幅提升

又一个“千年虫”问题！Linux Kernel 5.6已着手应对

关注