vue 富文本存储_vue 富文本编辑器项目实战用法「建议收藏」

全栈程序员-站长 • 2022年10月14日下午4:00 • 未分类 • 阅读 0

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

1.挑个富文本编辑器

首先针对自己项目的类型，确定自己要用啥编辑器。

1.1 wangeditor

如果一般类似博客这种项目不需要花里胡哨的，功能也不要求贼多的，推荐一下wangeditor(点击跳转)。能覆盖基本上所有的常见操作，轻量化，开源，有中文文档。

▽wangeditor效果图

vue 富文本存储_vue 富文本编辑器项目实战用法「建议收藏」

1.2 tinyMCE

如果需要复杂的编辑器，推荐tinyMCE(点击跳转)，同样也非常简单和优雅，但是文档是英文的，配合chrome的翻译，基本上能看懂，而且tinyMCE有另外一个好处，word上的东西基本上都可以保存格式复制到编辑器里，可以比较方便的转移。

▽tinyMCE效果图

vue 富文本存储_vue 富文本编辑器项目实战用法「建议收藏」

剩下的很多编辑器，但是大多没接触过，推荐的这两个，一个简洁够用，一个功能齐全，能覆盖90%以上的场景了，所以就不推荐别的了。另外本文主要讲wangeditor。

2.项目准备(wangeditor)

本文选用框架的是nuxt.js，和vue-cli基本一致。都0202年了，如果不是模块化的项目请参考下

既然谈到模块化项目，那么将编辑器设为组件那就是非常必要的了。

但是有一个问题，vue自带的数据双向绑定是不支持组件内外之间的双向传递的(其实支持的，就是我不知道)，也就是说，如果你将富文本编辑器封装在组件B中，你在A页面用组件B去写入数据C，这个C数据只能在B的组件页面中获取，无法直接在A页面中取到。但是项目逻辑不可能在组件的B页面上去执行，一定是在A页面去完成逻辑，所以一定要在A中获取到数据。

为了解决这个问题，我们需要回顾一下vue的v-model和父子组件的传值方式。如果你了解组件数据的双向绑定和它的原理，可以忽略下面，直接到最后的代码处就行了。

2.1 v-model

这个很基础了，就简单放个例子好了。

{
{message}}

这个例子其实等价于

挺好理解的，①v-bind:”message” 等于给input赋值，②@input=”message = $event.target.value” 等于给message赋值，所以这样才实现了双向绑定，也就是修改message时会触发v-bind让Input变换值，在Input输入时能触发input事件来改变message的值。

2.2实现组件v-model

那现在我搞一个组件，给他设上v-bind ，然后顺便监听他的input，这两步可以化为一步v-model=”price”，也可以看非组件时候的”② @input=”message = $event.target.value” 等于给message赋值，”。因为监听了input会将数据赋给price，然后通过v-bind会将price的值赋给组件内部的props中的value属性。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/182043.html原文链接：https://javaforall.net