iOS 显示富文本代码 富文本模式什么意思

大家过年好，这个时间能看到这篇文章的绝对是铁血战士。好久没有更新《Vue实战》系列文章了，最近接了一个项目，所以没有时间再更新文章。这里打了个广告哈：本人(也有团队)承接APP、小程序、Web等项目，有需要技术人员的欢迎联系我。

闲言少叙，书归正传。本文承接上文《Vue实战——利用PostMan的MockServer代理数据》继续我们的vue实战之旅。本文将分享的是，如何在vue中添加富文本编辑器，从而实现编辑新闻(文章)的功能。本文对应的git地址：

https://github.com/someone674/news-list.git

---

PC端的富文本编辑器有很多种选择，介于我们的需求不是很复杂，最后我选择了一款轻量级、简单的编辑器来集合，可以实现我们需要的功能。这款编辑器就叫：wangeditor。它比较简单，轻量，同时拥有的功能也足够我们的要求。

安装

首先我们打开我们的项目，在控制台里输入：

npm install wangeditor --save

这样，我们就安装了这款富文本编辑器了，一定要--save哦！安装完，我们就可以引入它，创建我们的编辑器了。

新建发布页面

在目录views里，我们创建addNews.vue文件，这个页面，就是我们的发布文章的页面了，然后打开目录router里的index.js，添加该页面的路由：

{  path: '/addNews',  name: 'addNews',  component: () => import(/* webpackChunkName: "about" */ '../views/addNews.vue'),  meta: {    showHeader: true,    requiresAuth: true  }}

添加完，我们打开Header.vue文件，在登录、注册下面，我们增加一个写文章的按钮：

写新闻

同时，写上对应的方法：

// 发表新闻    addNews () {      this.$router.push({ path: '/addNews' }).catch(() => {})    },

这样，我们在导航栏里，点击“写文章”后，就可以通过路由，跳转到addNews页面了。但是现在这个页面什么也没有，我们需要实现这个页面。

创建编辑器

打开addNews.vue页面，首先引入编辑器：

import E from 'wangeditor'

引入了编辑器，我们就用这个E，创建一个编辑器实例：

var editor = new E(this.$refs.editor)    editor.customConfig.onchange = (html) => {      this.editorContent = html    }    editor.create()

这段代码是什么意思呢？意思就是通过E来new一个对象，这个对象就是编辑器对象。它可以通过属性customConfig来配置相关的设置。我们只加了一个内容字段editorContent。这个字段在data中定义的：

那么，这几行代码，放到哪里执行呢？换句话说，我们需要在什么时候去创建这个编辑器，供我们页面使用呢？答案是，在组件挂载完成后，然后开始渲染我们的编辑器。也就是在mounted生命周期函数中执行这段代码：

有了它，我们再在模板中，就是引用了：

查看内容

到此，编辑器就算集成完了。是不是很简单？下载代码，一起尝试一下吧。

---