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

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

  <pre class="syl-page-code hljs less">https://github.com/someone674/news-list.git</pre>

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

  安装

  首先我们打开我们的项目,在控制台里键入:

  <pre class="syl-page-code hljs sql">npm install wangeditor --save</pre>

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

  新建公布页面

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

  <pre class="syl-page-code hljs css">`{
path: '/addNews',
name: 'addNews',
component: () => import(/ webpackChunkName: "about" / '../views/addNews.vue'),
meta: {

showHeader: true,
requiresAuth: true

}
}`</pre>

  添加完,我们打开Header.vue文件,在登陆、注册下边,我们提高一个写文章的按键:

  <pre class="syl-page-code hljs xml">写新闻</pre>

  同时,写上对应的方式:

  <pre class="syl-page-code hljs coffeescript">`// 发表新闻

addNews () {
  this.$router.push({ path: '/addNews' }).catch(() => {})
},`</pre>

  这样,我们在导航栏里,点击“写文章”后,就可以通过路由,跳转至addNews页面了。但是目前这个页面哪些也没有,我们还要实现这个页面。

  创建编辑器

  打开addNews.vue页面,首先引进编辑器:

  <pre class="syl-page-code hljs coffeescript">import E from 'wangeditor'</pre>

  引入了编辑器,我们就用这个E,创建一个编辑器例子:

  这段代码是何种意思呢?意思就是通过E来new一个对象,这个对象就是编辑器对象。它可以通过属性customConfig来配置相关的设置。我们只加了一个内容数组editorContent。这个数组在data中定义的:

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

  有了它,我们再在模版中,就是引用了:

  <pre class="syl-page-code hljs javascript">`

  
  查看内容
`</pre>

  到此,编辑器即使集成完了。是不是很简单?下载代码,一起尝试一下吧。

  原创不容易,鉴于本人水平有限,文中如有错误之处欢迎你们见谅。以后我会持续公布vue实操系列的文章,喜欢的同学欢迎关注。

Last modification:December 16th, 2020 at 10:12 am
如果觉得我的文章对你有用,请随意赞赏