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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/311791.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python获取文件夹下文件_Python 获取目录下的文件列表与内容

下面的python例子是列举用户目录下面的文件 import os import sys #infoos.getcwd() #listfileos.listdir(os.getcwd()) inforaw_input("请输入要列举文件的目录&#xff1a;(如D:\\temp)") listfileos.listdir(info) filenameopen(infofile.txt,w) print listfile #…

[蓝桥杯2016初赛]卡片换位-bfs

题目描述 你玩过华容道的游戏吗&#xff1f;这是个类似的&#xff0c;但更简单的游戏。看下面 3 x 2 的格子 在其中放5张牌&#xff0c;其中A代表关羽&#xff0c;B代表张飞&#xff0c;* 代表士兵。还有一个格子是空着的。 你可以把一张牌移动到相邻的空格中去(对角不算相邻…

数据结构---KMP模式匹配病毒感染人的DNA检测

数据结构—KMP模式匹配病毒感染人的DNA检测 原理&#xff1a;参考趣学数据结构 代码&#xff1a; #include<stdio.h> #include<stdlib.h> #define N 100 int next[N]; void getNext(char *T, int *next, int m) {//求解当前字符前面的最大公共前缀和后缀int j …

推荐一个很棒的开源工作流elsa-core

开源项目orchard主要开发人员Sipke Schoorstra 开源了一个netcore 工作流项目&#xff0c;地址&#xff1a;https://github.com/elsa-workflows/elsa-core&#xff0c;最新版本1.2&#xff0c;正在开发2.0版本 。Spike 是参照Orchard Core的工作流引擎的原理&#xff0c;将其转…

python如何引用txt_如何使用pip requirements.txt文件安装python模块附加组件

pip requirements.txt documentation表示可以使用类似的线安装附加功能 MyPackage3.0 [PDF] 所以在我的requirements.txt文件中,我有一行内容如下&#xff1a; requests2.9.1 [security] 但是,当我运行命令时,不是为请求模块安装安全附加功能&#xff1a; pip install -r requi…

dfs中return回溯问题

题目&#xff1a; 从1到n中选k个数进行排列 首先我们看这段代码&#xff1a; #include <iostream> using namespace std; int n, k; const int N 1010; int a[N]; bool st[N];void dfs(int u) {if (u k 1) {for (int i 1; i < k; i) {cout << a[i] <&l…

WTM系列视频教程:MVVM

WTM系列视频教程第三章&#xff1a;MVVM文字摘要&#xff1a;“要讲MVVM模式&#xff0c;我们先来讲一下传统的MVC模式&#xff0c;要讲MVC模式&#xff0c;我们先来讲一下没有模式。。。”“为了演示没有模式&#xff0c;咱们整个项目就保留一个Program.cs文件&#xff0c;不使…

word List 22

word List 22 如果存在什么问题&#xff0c;欢迎批评指正&#xff01;谢谢&#xff01;

[蓝桥杯]波动数列

题目描述 观察这个数列&#xff1a;1 3 0 2 -1 1 -2 …这个数列中后一项总是比前一项增加2或者减少3。 栋栋对这种数列很好奇&#xff0c;他想知道长度为 n 和为 s 而且后一项总是比前一项增加a或者减少b的整数数列可能有多少种呢&#xff1f; 输入 输入的第一行包含四个整数 n…

ASP.NET 开源导入导出库Magicodes.IE Docker中使用

更新历史2019.02.13【Nuget】版本更新到2.0.2【导入】修复单列导入的Bug&#xff0c;单元测试“OneColumnImporter_Test”。问题见&#xff08;https://github.com/dotnetcore/Magicodes.IE/issues/35&#xff09;。【导出】修复导出HTML、Pdf、Word时&#xff0c;模板在某些情…

python爬取评论_python 爬取马蜂窝景点翻页文字评论的实现

使用Chrome、python3.7、requests库和VSCode进行爬取马蜂窝黄鹤楼的文字评论(http://www.mafengwo.cn/poi/5426285.html)。 首先&#xff0c;我们复制一段评论&#xff0c;查看网页源代码&#xff0c;按CtrlF查找&#xff0c;发现没有找到评论&#xff0c;说明评论内容不在http…

[蓝桥杯]最大连续子序列和

对于一个给定的长度为N的整数序列A&#xff0c;它的“子序列”的定义是&#xff1a;A中非空的一段连续的元素&#xff08;整数&#xff09;。你要完成的任务是&#xff0c;在所有可能的子序列中&#xff0c;找到一个子序列&#xff0c;该子序列中所有元素的和是最大的&#xff…

一个支持 CodeFirst/DbFirst/ModelFirst 的数据库小工具

一个支持 CodeFirst/DbFirst/ModelFirst 的数据库小工具IntroDbTool 是一个支持 CodeFirst/DbFirst/ModelFirst 的数据库小工具&#xff0c;原本是基于 dotnet framework WinForm 实现的&#xff0c;在 1.1.0 版本更新中使用 dotnet core 3.1 基于 WPF 重写了&#xff0c;并实现…

python os模块详细_python之os模块详解

importos#os.getcwd() 获取当前工作目录&#xff0c;即当前python脚本工作的目录路径#print(os.getcwd()) # G:\python二期\一月\day18 #os.curdir 返回当前目录: (.) current#os.pardir 获取当前目录的父目录字符串名&#xff1a;(..)#print(os.listdir(rG:\python二期\一月\d…

高级数据结构---并查集

高级数据结构—并查集 原理&#xff1a;参考趣学数据结构 代码&#xff1a; #include<stdio.h> #include<stdlib.h> #define N 100 int father[N]; int find(int x) {//寻找共同祖先if (x ! father[x]) {father[x] find(father[x]);}return father[x];//找到了…

m个苹果放入n个盘子问题

题目&#xff1a; 把M个同样的苹果放在N个同样的盘子里&#xff0c;允许有的盘子空着不放&#xff0c;问共有多少种不同的分法&#xff1f;&#xff08;用K表示&#xff09;5&#xff0c;1&#xff0c;1和1&#xff0c;5&#xff0c;1 是同一种分法。 输入 每个用例包含二个整…

用python处理excel的基本语法_《使用python3读取处理excel表的数据内容如何对内容求平均值》 用python读取excel文件...

使用python3读取处理excel表的数据内容如何对内容求平均值 先说下概述&#xff1a; 平就合平均数的值。 (a1 a2 ……an)/na1&#xff0c;a2&#xff0c;……&#xff0c;an的平均值。 简单算均数。么一组数字10、20、30、40、50 那么它们的算术平均值是&#xff08;10 20 30 40…

k8s - 如何变更CNI网络插件IP池?

作者&#xff1a;justmine头条号&#xff1a;大数据与云原生微信公众号&#xff1a;大数据与云原生创作不易&#xff0c;在满足创作共用版权协议的基础上可以转载&#xff0c;但请以超链接形式注明出处。为了方便阅读&#xff0c;微信公众号已按分类排版&#xff0c;后续的文章…

word List23

word List23 如果存在什么问题&#xff0c;欢迎批评指正&#xff01;谢谢&#xff01;

整数的分法

将整数N分成K个整数的和且每个数大于等于A 小于等于B 求有多少种分法&#xff1f; 代码如下&#xff1a; #include <iostream> using namespace std;int fff(int a, int k, int mins, int maxs) {if (a < mins)//结束条件有两个&#xff0c;1.数值小于最小值 2.只分…