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

vue 富文本存储_vue 富文本编辑器 项目实战用法「建议收藏」1.挑个富文本编辑器首先针对自己项目的类型,确定自己要用啥编辑器。1.1wangeditor如果一般类似博客这种项目不需要花里胡哨的,功能也不要求贼多的,推荐一下wangeditor(点击跳转)。能覆盖基本上所有的常见操作,轻量化,开源,有中文文档。▽wangeditor效果图1.2tinyMCE如果需要复杂的编辑器,推荐tinyMCE(点击跳转),同样也非常简单和优雅,但是文档是英文的,配合…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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

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

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账号...

(0)
blank

相关推荐

  • ubuntu查看端口是否打开

    ubuntu查看端口是否打开安装netcatsudoapt-getinstallnetcat检测端口#nc-zvipportnc-zv192.168.1.1522

    2022年10月23日
  • html网页中加入音乐播放器,[HTML5]简单网页本地音乐播放器[通俗易懂]

    html网页中加入音乐播放器,[HTML5]简单网页本地音乐播放器[通俗易懂]既然HTML5提出与本地交互方便,就想写个HTML5的本地音乐播放器。一开始问题主要集中在怎么读取本地文件路径,我想肯定可以用JS实现去操作本地文件(因为node.js很容易实现读取本地文件,但是原生JS怎么写不太清楚),不过简单一点就用这样只能读取一个,我想做的是最好是把一个文件夹中的都取出来,然后参考http://sapphion.com/2011/11/html5-folder-upload…

  • 配置元素customErrors[通俗易懂]

    配置元素customErrors[通俗易懂] Asp.net配置文件的配置方式,其实在MSDN里面是写得最清楚的了。可惜之前一直未曾了解到MSDN的强大。  先贴个地址:http://msdn.microsoft.com/zh-cn/library/dayb112d(v=vs.80).aspx,然后逐个分析。我希望自己能够从头到尾认真学完这系列东西。为了不至于让自己太早放弃,我决定从自己用过的配置文件学起,然后逐渐接触那些比较生疏,和少…

  • 在java中print和println_JAVA命令行参数

    在java中print和println_JAVA命令行参数Java中的PrintWriter类的println()方法用于中断流中的行。此方法不接受任何参数或返回任何值。用法:publicvoidprintln()参数:此方法不接受任何参数。返回:此方法不返回任何值。下面的方法说明了println()方法的用法方式:示例1://Javaprogramtodemonstrate//PrintWriterprintln()methodimp…

  • 关于SecureCRT及Vim的使用

    关于SecureCRT及Vim的使用听说大部分的搞网络或者被网络搞的同学,每天都会使用SecureCRT在Linux下进行开发、测试等工作。正所谓“工欲善其事,必先利其器”,一个趁手的开发环境对工作效率的提升是不言而喻的。我在这里简单介绍一下个人在日常使用中积累下来的常用设置及操作,希望对不熟悉的朋友能有一点点参考作用,一家之言,欢迎拍砖。【SecureCRT篇】1、 自动登录服务器如果我们需要经常登录固定某

  • 二维码转换成短链接_二维码解析url

    二维码转换成短链接_二维码解析urlVue生成二维码实战案例,vue把url地址转化为二维码手机扫码打开

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号