大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE稳定放心使用
1.挑个富文本编辑器
首先针对自己项目的类型,确定自己要用啥编辑器。
1.1 wangeditor
如果一般类似博客这种项目不需要花里胡哨的,功能也不要求贼多的,推荐一下wangeditor(点击跳转)。能覆盖基本上所有的常见操作,轻量化,开源,有中文文档。
▽wangeditor效果图
1.2 tinyMCE
如果需要复杂的编辑器,推荐tinyMCE(点击跳转),同样也非常简单和优雅,但是文档是英文的,配合chrome的翻译,基本上能看懂,而且tinyMCE有另外一个好处,word上的东西基本上都可以保存格式复制到编辑器里,可以比较方便的转移。
▽tinyMCE效果图
剩下的很多编辑器,但是大多没接触过,推荐的这两个,一个简洁够用,一个功能齐全,能覆盖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
这个很基础了,就简单放个例子好了。
1
2
{
{message}}
这个例子其实等价于
1
挺好理解的,①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属性。
1
2
3
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/182043.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...