程序员经验分享-hwhale

android 富文本编辑器_在vue中使用富文本编辑器vue-quill-editor

2023-11-08

一、前言

在一些博客、评论相关的位置，我们不会简单使用 HTML 中的 input 或者 textarea 等纯文本，需要用到富文本编辑器，即实现可以对文本进行加粗、变色、改变字体及大小等操作。

本文借助的是vue-quill-editor，这个对vue支持比较友好

GitHub地址：https://github.com/surmon-china/vue-quill-editor

官网地址：https://quilljs.com/docs/quickstart/

二、代码

1.安装 vue-quill-editor

npm install vue-quill-editor

2.导入 vue-quill-editor

在 mian.js 中

// 导入第三方富文本编辑器import VueQuillEditor from 'vue-quill-editor'// 导入第三方文本编辑器样式import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'

3.具体页面

三、效果

四、其他

我们存储到数据库中的，是带样式标签的字符串，要复现富文本内容，只需使用 vue 的 v-html 属性即可：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

android 富文本编辑器_在vue中使用富文本编辑器vue-quill-editor 的相关文章

随机推荐

  • Mybatis与Spring的集成

    目录 一 Mybatis与spring的集成 Mybatis与spring集成的步骤 1 导入pom依赖 2 利用mybatis逆向工程生成模型底层代码 3 编写appolication mybatis xml 4 Spring Test

  • 让GPT成为您的科研加速器丨GPT引领前沿与应用突破之GPT4科研实践技术与AI绘图

    GPT对于每个科研人员已经成为不可或缺的辅助工具 不同的研究领域和项目具有不同的需求 如在科研编程 绘图领域 1 编程建议和示例代码 无论你使用的编程语言是Python R MATLAB还是其他语言 都可以为你提供相关的代码示例 2 数据可

  • 5-软件实现

    程序设计语言 数据成分 运算成分 控制成分 传输成分 结构化程序设计编码 结构化程序设计的特点 自顶向下 逐步求情 单入口和单出口的控制结构 结构化程序设计步骤 提出和分析问题 确定数学模型 设计算法 模块化编程 编译 运行程序 模块设计和

  • DID基础介绍

    1 介绍 DID Decentralized Identity 去中心化身份标识 它的本质是基于去中心化体系下的中心化信任模型 2 相关名词解释 DID标识符 did example 1232423143215jlgaglgak 前缀必然是

  • fastDFS文件服务器的java客户端初始化方法ClientGlobal.init(fdfs_client.properties) 找不到配置文件路径异常的解决

    最近在使用fastDFS文件服务器的java客户端上传文件时 它的初始化方法ClientGlobal init String 出现找不到配置文件的异常 无论是写死fdfs client properties文件位置还是怎样 都找不到配置文件

  • 阅读element-ui源码之ResizeObserver使用

    1 ResizeObserver 阅读tabs标签页源码时 发现了这个api 于是 我查了下MDN 可以监听任意DOM元素内容区域的变化 这里的变化包括但不限于 1 某个节点的出现和隐藏 2 某个节点的大小变化 和resize api相比的

  • Mac上的oracle使用

    进入docker容器 sudo docker exec it docker ps grep oracle cut d f 1 bin bash 通过sqlplus进入Oracle sqlplus 输入用户名和密码进入 Oracle用户中的默

  • npm报错Failed at the electron-chromedriver@1.8.0 install script.

    问题描述 Electron vue 项目 npm install 报错Failed at the electron chromedriver 1 8 0 install script 解决方案 方法一 vue cli 脚手架的一个 bug

  • unity 删除依赖

    记录 Scene中有依赖废弃的资源 using System using System Collections using System Collections Generic using System IO using System Li

  • JavaScript初学 3.改变文本内容

    JavaScript改变html网页的文本内容 p JavaScript能改变html文本内容 p

  • 90个JavaScript资料免费下载【合集】

    为了方便大家学习 小弟最近整理了一批免积分下载的JavaScript 共90个 整理了这批资料的下载地址 大家可以根据自己的需要选择性下载 希望大家喜欢 JS刷新页面 源码 http down 51cto com data 452926 6

  • 【100%通过率 】【华为OD机试c++/python】回文字符串【2023 Q1考试题 A卷

    华为OD机试 题目列表 2023Q1 点这里 2023华为OD机试 刷题指南 点这里 题目描述 如果一个字符串正读和反渎都一样 大小写敏感 则称它为一个 回文串 例如 leVel是一个 回文串 因为它的正读和反读都是leVel 同理a也是

  • Visual Studio编译问题

    最近在用vs 跑下精简后的数学库 验证输出结果的 结果在其他ide上编译通过 在vs上不行 出现了一堆莫名其妙的错误 问题现象 if endif 不匹配 实际是匹配的 xxx变量未声明 实际是声明并定义的 等等诸如此类问题 解决处理 参考这

  • [1064]大数据概述

    文章目录 大数据时代的数据特点 大数据时代的关键技术 大数据时代的数据特点 一般认为 大数据主要具有 四方面的典型特征 规模性 Volume 多样性 Variety 高速性 Velocity 和价值性 Value 即所谓的 4V 1 规模性

  • Linux（Ubuntu、CentOS）命令行编辑文件后如何保存退出

    在 Ubuntu CentOS 命令行中编辑文件后 可以使用以下步骤保存并退出 按下键盘上的 Ctrl 键和 X 键组合 以退出编辑模式 如果文件已更改 你将看到提示 询问是否保存更改 按下 Y 键来确认保存更改 或按下 N 键取消保存 如

  • 遥感+python 1.3 大气校正

    遥感 python 1 3 大气校正 目录 遥感 python 1 3 大气校正 一 大气校正概念 1 吸收和散射改变大气中的电磁辐射 2 电磁能在大气中相互作用 二 大气校正的方法 1 基于辐射传输方程的大气校正 2 基于地面场数据或辅助

  • 生活之感悟

    有一些路 走下去 很累 可是 不走 会后悔 如果你的生活 处于低谷 那就大胆的向前走吧 因为不管你怎么走 你都是向上 即使没有人关注 也要努力成长 许多眼睛 都藏在你看不见的地方 压力不是有人比你努力 而是比你牛几倍的人 依然在努力 不是所

  • DNF单机版：注册失败的解决

    文章目录 注册的解决 DNF单击版本资源 linux下mysql配置文件my cnf最详细解释与目录 MyISAM 相关选项 INNODB 相关选项 安装启动 相关目录 全文约 9945 字 预计阅读时长 28分钟 注册的解决 个人遇到的问

  • 您的计算机已被.locked勒索病毒感染？恢复您的数据的方法在这里！

    导言 在数字化时代 威胁网络安全的恶意软件层出不穷 locked 勒索病毒作为其中的一员 给个人 企业和组织带来了严重的威胁 影响和心理压力 本文91数据恢复将深入分析 locked 勒索病毒的威胁性质 潜在影响以及由此产生的心理压力 一些

  • android 富文本编辑器_在vue中使用富文本编辑器vue-quill-editor

    一 前言 在一些博客 评论相关的位置 我们不会简单使用 HTML 中的 input 或者 textarea 等纯文本 需要用到富文本编辑器 即实现可以对文本进行加粗 变色 改变字体及大小等操作 本文借助的是vue quill editor

热门标签