利用Vue.js实现富文本框组件复用

作者:Carl Zhang | 更新时间:2018-04-25 | 分类:科技

前段时间项目中前端页面想要用富文本框进行一些文本的编辑,但是为了节省资源,于是考虑了一下vue.js的组件来实现富文本框的复用。尝试了几款富文本框,最终决定尝试一下WangEditor和CKEditor 4这两款富文本框。(最早想的是用百度的UEditor,但是看了一眼文档,16年2月以后就再也没有动静了,而且测试了一下发现bug好多,就只能放弃了。)

CKEditor 4是一款国外的开源富文本框,这是它的官网:CKEditor 4 - The battle-tested WYSIWYG HTML editor。从他的简介来看,是一款经过战斗级测试的所见即所得html编辑器。它的前身是FCKEditor,也是一款非常好用的编辑器。废话不多说,直接来看怎么使用吧。

ckeditor4

首先,我用的开发工具是Visual Studio Code,安装完VS Code以后还需要安装一些东西,比如Node.js,Git等。如何利用VS Code安装VUE框架这个大伙儿百度一下或者有条件的Google一下都行哈~很多的,我就不在这介绍了。这个项目中要用到的一些东西:iViewVuex(iView是一套基于 Vue.js 的高质量 UI 组件库,我在现在这个项目中用了一下iView的一套弹窗组件)。

iView

安装方法:(还是用终端,进行安装,如果感觉国内使用npm太慢的,推荐使用淘宝的NPM镜像,具体安装方法大家点击链接进去就能找到,安装完以后,把npm换成cnpm就行了~)

按照步骤安装完VUE脚手架,以及上述的这些内容以后,先去官网下载整套的CKEditor 4,下载地址:CKEditor 4 - Download。这里我建议大家下载Full Package,如果想要能够直接拖拽图片放入富文本框的,需要同时勾选Easy Image选项,然后点击Download,就可以了。

ckeditor4

下载完的内容,除了simples文件夹可以不用(别删,后面有用,往下看就知道了~),剩下的内容全部放入项目文件夹中的static中。

static

接下来要在index.html中加入一下js文件:

index

准备工作基本完成了,接下来,就开始创建我们需要的组件主体了。在components文件夹中,新建一个文件,我这里取名叫Flyout.vue(HelloWorld.vue是vue脚手架自带的,我们可以不用管它,要是想删掉的话也没事~)。

static

理论上,我们如果只需要显示富文本框的话,只需要在Flyout.vue中写入下方的代码就可以了:(不知道为什么CSDN的代码片只有文件名后缀是html才会显示html的样式,所以我只能在代码片的文件名中加上html的后缀,正式操作下大家伙儿不要加哈。)

但是这不是我想要的效果,我想要的效果是点击一行文字,弹出一个对话框,里面放着一个富文本框,点击保存按钮以后自动关闭对话框,同时更新页面上的内容。这时候就用到了iView的对话框组件,具体代码如下:(style中的样式是为了隐藏iView对话框组件中自带的下方的几个按钮,因为我自己写了个保存按钮。)

这样基本的样子就有了,接下来就是js操作了~在这里,要想从富文本框组件传递数据到Flyout.vue组件中就需要用到vue的组件传参了,这时候就用上刚刚安装的Vuex了~

在项目文件夹中新建一个store的文件夹,里面新建一个store.js文件:

store

具体代码如下,某些参数后面会有解释:(关于vuex传参,看不太懂下方代码的可以百度或Google一下,很多的。)

store.js的:

Flyout.vue的:

这样就基本完成了,我们来看一下效果:

final

首先来试试添加文字:

final

final

final

我们改变一下颜色看看:

final

final

final

也许有人发现了我的CKEditor富文本框编辑器上的按钮好像少了一些,这是官方提供的api。在下载下来的文件夹里,有个simples文件夹(这也是我文章一开始说别删的原因),打开simples文件夹,里面有个toolbarconfigurator文件夹,打开以后有个index.html文件,用浏览器直接打开,就能看到一个配置页面:

config

大家可以根据自己的需求进行排序,调整按钮是否显示。一共有两种方式,一个是可视化的,就是上图显示的,还有一种是高级的(右上角按钮从Basic划到Advanced),当然我建议还是直接用可视化就行了~等调整好以后,点击Get toolbar config按钮,就能看到config js代码,复制代码到static/config.js中即可:

config

WangEditor的具体实现其实跟CKEditor差不多,而且WangEditor的文档中包含了Vue组件,可以直接使用,也挺方便的。那就写到这儿吧,有啥可以改进的,大伙儿也可以在下方评论提出建议。

(本文为作者原创。转载请注明:转自carlzhang.net






返回顶端