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)


相关推荐

  • 一分钟学会Python中pip的安装与使用

    一分钟学会Python中pip的安装与使用文章目录一、简单介绍二、下载安装三、最常用命令1、显示版本和路径2、获取帮助3、升级pip4、安装包5、升级包6、卸载包7、搜索包8、显示安装包信息9、列出已安装的包10、查看指定包的详细信息一、简单介绍pip是Python包管理工具,该工具提供了对Python包的查找、下载、安装和卸载的功能,现在大家用到的所有包不是自带的就是通过pip安装的。Python2.7.9+或Python3.4+以上版本都自带pip工具。给出pip官网链接:pip官网。二、下载安装可以通过命令

  • PLSQL Developer 9 绿色版

    PLSQL Developer 9 绿色版

  • C++实现matlab中的interp1和interp2插值「建议收藏」

    C++实现matlab中的interp1和interp2插值「建议收藏」头文件interpfun.h#ifndefINTERPFUN_H#defineINTERPFUN_H#include"math.h"#include<stdio.h>#include<string.h> #ifndefSafeDeleteVec#defineSafeDeleteVec(X){if((X))delete(X);(X)=NULL;}#endi…

  • 支持向量机与支持向量回归(support vector machine and support vector regression)

    支持向量机与支持向量回归(support vector machine and support vector regression)支持向量机和支持向量回归是目前机器学习领域用得较多的方法,不管是人脸识别,字符识别,行为识别,姿态识别等,都可以看到它们的影子。在我的工作中,经常用到支持向量机和支持向量回归,然而,作为基本的理论,却没有认真地去梳理和总结,导致有些知识点没有彻底的弄明白。这篇博客主要就是想梳理一遍支持向量机和支持向量回归的基础理论知识,一个是笔记,另一个是交流学习,便于大家共勉。凸集、凸函数、凸优化凸集:如果集合…

  • python进阶(8)多进程「建议收藏」

    python进阶(8)多进程「建议收藏」进程前置知识点进程:一个程序运行起来后,代码+用到的资源称之为进程,它是操作系统分配资源的基本单元。并发:指的是任务数多余cpu核数,通过操作系统的各种任务调度算法,实现用多个任务“一起”执行

  • 再次发布一个jq的下拉框式日期选择插件 dateSelector ~

    再次发布一个jq的下拉框式日期选择插件 dateSelector ~

发表回复

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

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