通俗来说:富文本,就是比较丰富的文本编辑器。普通的框只能输入文字,而富文本还能给文字加颜色样式等。

富文本编辑器有很多,例如:KindEditor、Ueditor。但并不原生支持vue

但是我们今天要说的,是一款支持Vue的富文本编辑器:vue-quill-editor

GitHub的主页:https://github.com/surmon-china/vue-quill-editor

Vue-Quill-Editor是一个基于Quill的富文本编辑器:Quill的官网

使用指南

第一步:安装,使用npm命令:

npm install vue-quill-editor --save

第二步:加载,在js中引入:

全局引入:

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

const options = {}; /* { default global options } */

Vue.use(VueQuillEditor, options); // options可选

局部引入:

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import {quillEditor} from 'vue-quill-editor'

var vm = new Vue({
   components:{
       quillEditor
  }
})

第三步:页面使用:

<quill-editor v-model="goods.spuDetail.description" :options="editorOption"/>

自定义的富文本编辑器

不过这个组件有个小问题,就是图片上传的无法直接上传到后台,因此我们对其进行了封装,支持了图片的上传。

使用也非常简单:

<v-stepper-content step="2">
   <v-editor v-model="goods.spuDetail.description" upload-url="/upload/image"/>
</v-stepper-content>
  • upload-url:是图片上传的路径

  • v-model:双向绑定,将富文本编辑器的内容绑定到goods.spuDetail.description

 

Vue-Quill-Editor 富文本编辑器的更多相关文章

  1. Vue基于vue-quill-editor富文本编辑器使用心得

    vue-quill-editor的guthub地址,现在市面上有很多的富文本编辑器,我个人还是非常推荐Vue自己家的vue-quill-deitor,虽然说只支持IE10+,但这种问题,帅给别人吧! ...

  2. vue集成百度富文本编辑器

    1.前期工作,访问百度富文本官网下载相应的百度富文本文件,根据后端用的技术下载相应的版本,建议下载最新版UTF-8版 (有图有真相,看图) https://ueditor.baidu.com/webs ...

  3. Vue集成tinymce富文本编辑器并实现本地化指南(2019.11.21最新)

     tinymce是一款综合口碑特别好.功能异常强大的富文本编辑器,在某些网站,甚至享有"宇宙最强富文本编辑器"的称号.那么,在Vue项目中如何集成呢?这并不困难,只需要参照官方教程 ...

  4. 关于百度Editor富文本编辑器 自定义上传位置

    因为要在网站上编辑富文本数据,所以直接采用百度的富文本编辑器,但是这个编辑器有个缺点,默认情况下,文件只能上传到网站的根目录,不能自定义路径. 而且json配置文件只能和controller.jsp在 ...

  5. vue 集成百度富文本编辑器

    <template> <div> <textarea style="display:none" id="editor_content&quo ...

  6. BRAFT EDITOR富文本编辑器

    https://braft.margox.cn/demos/basic     官方文档 import React from 'react' import Uploading from '../Upl ...

  7. 现代富文本编辑器Quill的模块化机制

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...

  8. 现代富文本编辑器Quill的内容渲染机制

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...

  9. uniapp - 富文本编辑器editor(仅支持App和微信小程序)

    uniapp - editor富文本编辑器用法示例 丢几个图,用心看下去(-.-) 这里使用了https://ext.dcloud.net.cn/plugin?id=412 插件,用于选择字体颜色.其 ...

  10. quilljs 一款简单轻量的富文本编辑器(适合移动端)

    quilljs入门使用教程: quill.js是一款强大的现代富文本编辑器插件.该富文本编辑器插件支持所有的现代浏览器.平板电脑和手机.它提供了文本编辑器的所有功能,并为开发者提供大量的配置参数和方法 ...

随机推荐

  1. 人工智能之基于Opencv与深度学习的计算机视觉实战课程

    https://www.bilibili.com/video/av66375362 imagewatch:https://blog.csdn.net/iracer/article/details/83 ...

  2. 金蝶K3 WISE 13.1版本服务器虚拟机环境部署

    闲来无事,整个13.1版本的金蝶玩玩. 系统环境:WIN2008 R2,x64位 数据库:MSSQL 2008 R2,X64位 记录下操作步骤: 1.准备安装软件,见图: 2.安装资源包,.net3. ...

  3. 不能访问windows installer服务

    xp系统安装msi类型的安装程序出现以下错误: 不能访问windows installer服务. 解决办法 1:运行cmd -> regsvr32 msi.dll 运行services.msc- ...

  4. 开发-日常工具:TFS(Team Foundation Server)

    ylbtech-开发-日常工具:TFS(Team Foundation Server) TFS(Team Foundation Server)是一个高可扩展.高可用.高性能.面向互联网服务的分布式文件 ...

  5. Vue的父子组件通信(转载)

    Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...

  6. oauth2.0协议原理

    OAuth的授权不会使用第三方触及到用户的帐号信息(如用户密码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此OAuth是安全的. OAuth的作用:就是让“客户端”安全可控 ...

  7. Linux_用户权限管理

    目录 目录 用户管理 useradd创建用户 userdel删除用户 usermod修改用户账号 passwd修改用户密码 用户权限设置 用户组管理 查看用户的属组 修改用户组gpasswd 为没有家 ...

  8. Unity3D 连接MySql

    MySql安装如下: https://www.cnblogs.com/dlvguo/p/9671832.html Unity连接MySql首先要在Unity的安装目录D:\Unity2017\Edit ...

  9. Python学习之==>常用字符串方法

    1.常用字符串方法 a = '\n 字 符 串 \n\n' b = a.strip() # 默认去掉字符串两边的空格和换行符 c = a.lstrip() # 默认去掉字符串左边的空格和换行符 d = ...

  10. Gradle之Gradle 的基本使用(一)

    [Android 修炼手册]Gradle 篇 -- Gradle 的基本使用 预备知识 基本的 android 开发知识 了解 Android Studio 基本使用 看完本文可以达到什么程度 掌握 ...