【Vue】vue2预览显示quill富文本内容,vue-quill-editor回显页面,v-html回显富文本内容
文章目录
- 前言
- 一、下载
- 二、使用步骤
- 1.引入样式
- 2.html代码
- 总结
前言
提示:这里可以添加本文要记录的大概内容:
vue后台框架,若依系统里有一个富文本编辑器,效果如下

在package.json里面查看,发现插件名叫quill
插件的地址,页面如下

经过多篇文章查找,后台框架使用quill,我前端使用vue-quill-editor显示内容,效果是一样的。
两者可以互通
我是vue2系统,所以使用vue-quill-editor回显内容
参考文章1
vue富文本编辑器vue-quill-editor的使用以及内容的渲染
vue-quill-editor富文本编辑器使用步骤
富文本编辑器Quill 介绍及在Vue中的使用方法
提示:以下是本篇文章正文内容,下面案例可供参考
一、下载
npm install vue-quill-editor -S
在package.json能查看到版本号

二、使用步骤
1.引入样式
在渲染页面引入,如果你渲染的详情页过多,那就在main.js引入
代码如下(示例):
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

2.html代码
代码如下(示例):
<div class="ql-container ql-snow"><div class="ql-editor"><div v-html="detailInfo.policyContent"></div></div>
</div>
用于渲染的div,外面必须套2层样式代码,否则样式会丢失
这是移动端渲染页面回显

下面是pc端渲染页面,把那三个div嵌套搬到若依后台框架里面,复现

总结
【Vue】vue2预览显示quill富文本内容,vue-quill-editor回显页面,v-html回显富文本内容
相关文章:
【Vue】vue2预览显示quill富文本内容,vue-quill-editor回显页面,v-html回显富文本内容
文章目录 前言一、下载二、使用步骤1.引入样式2.html代码 总结 前言 提示:这里可以添加本文要记录的大概内容: vue后台框架,若依系统里有一个富文本编辑器,效果如下 在package.json里面查看,发现插件名叫quill 插件的…...
华纳云:ubuntu下nginx服务器如何配置
在Ubuntu操作系统上配置Nginx服务器涉及以下步骤。这里我将提供一个基本的配置示例,你可以根据自己的需求进行修改和定制。 安装 Nginx: 打开终端,并输入以下命令来安装 Nginx: sudo apt update sudo apt install nginx 启动 …...
PTP时间同步例程
下面是一个基本的PTP时间同步例程,可以使用Arduino或其他类似的微控制器实现: 步骤1:准备硬件 - 一个Arduino或类似的微控制器 - 一个以太网模块 步骤2:导入库文件 #include <Ethernet.h> #include <EthernetUdp.h>…...
【ES6】ES6遍历属性的方法
在ES6中,有几种遍历属性的方法,其中包括: 使用for…in循环和Object.keys()方法。 let obj {a: 1, b: 2, c: 3}; for (let key in obj) {console.log(obj[key]); }使用for…of循环和Object.values()方法。 let obj {a: 1, b: 2, c: 3}; f…...
【Web系列二十四】使用JPA简化持久层接口开发
目录 环境配置 1、引入依赖 配置文件 代码编写 实体类创建 JPA常用注解 Service与ServiceImpl Service ServiceImpl Controller Dao 三种实现Dao功能方式 1.继承接口,使用默认接口实现 2.根据接口命名规则默认生成实现 3.自定义接口实现(类似MyBatis…...
Flink流批一体计算(16):PyFlink DataStream API
目录 概述 Pipeline Dataflow 代码示例WorldCount.py 执行脚本WorldCount.py 概述 Apache Flink 提供了 DataStream API,用于构建健壮的、有状态的流式应用程序。它提供了对状态和时间细粒度控制,从而允许实现高级事件驱动系统。 用户实现的Flink程…...
软考高级系统架构设计师系列论文九十三:论计算机网络的安全性设计
软考高级系统架构设计师系列论文九十三:论计算机网络的安全性设计 一、计算机网络安全性设计相关知识点二、摘要三、正文四、总结一、计算机网络安全性设计相关知识点 软考高级系统架构设计师:计算机网络...
山西电力市场日前价格预测【2023-08-29】
日前价格预测 预测明日(2023-08-29)山西电力市场全天平均日前电价为321.48元/MWh。其中,最高日前电价为372.80元/MWh,预计出现在19: 30。最低日前电价为272.85元/MWh,预计出现在12: 30。 价差方向预测 1: 实…...
计算机毕设 基于深度学习的人脸专注度检测计算系统 - opencv python cnn
文章目录 1 前言2 相关技术2.1CNN简介2.2 人脸识别算法2.3专注检测原理2.4 OpenCV 3 功能介绍3.1人脸录入功能3.2 人脸识别3.3 人脸专注度检测3.4 识别记录 4 最后 1 前言 🔥 这两年开始毕业设计和毕业答辩的要求和难度不断提升,传统的毕设题目缺少创新…...
ES 7.6 - APi基础操作篇
ES7.6-APi基础操作篇 前言相关知识索引相关创建索引查询索引查询所有索引删除索引关闭与打开索引关闭索引打开索引 冻结与解冻索引冻结索引解冻索引 映射相关创建映射查看映射新增字段映射 文档相关(CURD)新增文档根据ID查询修改文档全量覆盖根据ID选择性修改根据条件批量更新 …...
【Go 基础篇】Go语言循环结构:实现重复执行与迭代控制
介绍 循环结构是编程中的重要概念,它允许我们重复执行一段代码块,或者按照一定的条件进行迭代控制。Go语言提供了多种循环结构,包括for、while和do-while等,用于不同的场景下实现循环操作。本篇博客将深入探讨Go语言中的循环结构…...
RabbitMQ笔记-RabbitMQ基本术语
RabbitMQ基本术语 相关概念; 生产者(Producer):投递消息。消息:消息体(payload)标签(label);生产者把消息交给rabbitmq,rabbitmq会根据标签把消息发给感兴趣…...
Git向远程仓库与推送以及拉取远程仓库
理解分布式版本控制系统 1.中央服务器 我们⽬前所说的所有内容(⼯作区,暂存区,版本库等等),都是在本地也就是在你的笔记本或者计算机上。⽽我们的 Git 其实是分布式版本控制系统!什么意思呢? 那我们多人…...
PostgreSQL+SSL链路测试
SSL一个各种证书在此就不详细介绍了,PostgreSQL要支持SSL的前提需要打开openssl选项,包括客户端和服务器端。 测试过程。 1. 生成私钥 root用户: mkdir -p /opt/ssl/private mkdir -p /opt/ssl/share/ca-certificateschmod 755 -R /opt/ss…...
服务器(容器)开发指南——code-server
文章目录 code-server简介code-server的安装与使用code-server的安装code-server的启动code-server的简单启动指定配置启动code-server code-server环境变量配置 code-server端口转发自动端口转发手动添加转发端口 nginx反向代理code-servercode-server打包开发版镜像 GitHub官…...
C++贪吃蛇(控制台版)
C自学精简实践教程 目录(必读) 目录 主要考察 需求 输入文件 运行效果 实现思路 枚举类型 enum class 启动代码 输入文件data.txt 的内容 参考答案 学生实现的效果 主要考察 模块划分 文本文件读取 UI与业务分离 控制台交互 数据抽象 需求 用户输入字母表示方…...
Java之字符串实践
功能概述 字符串是Java编程中常用的数据类型,本文对String部分常见功能做了对应实践以及分析。 功能实践 场景1:字符串比较 用例代码 Test public void test_string_compare() {String s1 "abc";String s2 s1;String s5 "abc&quo…...
BM20 数组中的逆序对
描述 解题思路:归并排序 分治:分治即“分而治之”,“分”指的是将一个大而复杂的问题划分成多个性质相同但是规模更小的子问题,子问题继续按照这样划分,直到问题可以被轻易解决;“治”指的是将子问题单独进…...
高德猎鹰轨迹查询相关接口
高德猎鹰轨迹官网:服务管理-API文档-开发指南-猎鹰轨迹服务 | 高德地图API 轨迹查询 httpclient的post // post方法请求 创建轨迹 private static void createTrace() {String key "高德注册的key";String sid "服务id"; // 服务idString…...
整理总结新手开始抖音小店经营:常见问题及解决办法
抖音小店作为一种新兴的电商模式,在短时间内获得了广泛的关注和使用。然而,对于新手来说,抖音小店经营可能会遇到一些问题。下面是四川不若与众总结的一些常见的问题以及相应的解决办法。 问题一:产品选择困难 对于新手来说&#…...
<6>-MySQL表的增删查改
目录 一,create(创建表) 二,retrieve(查询表) 1,select列 2,where条件 三,update(更新表) 四,delete(删除表…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡,轻快的音乐在耳边持续回荡,小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下,六一来了。 今天是六一儿童节,小蓝老师为了让大家在节…...
智能在线客服平台:数字化时代企业连接用户的 AI 中枢
随着互联网技术的飞速发展,消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁,不仅优化了客户体验,还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用,并…...
微信小程序 - 手机震动
一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注:文档 https://developers.weixin.qq…...
如何在看板中有效管理突发紧急任务
在看板中有效管理突发紧急任务需要:设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP(Work-in-Progress)弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中,设立专门的紧急任务通道尤为重要,这能…...
【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表
1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...
CocosCreator 之 JavaScript/TypeScript和Java的相互交互
引擎版本: 3.8.1 语言: JavaScript/TypeScript、C、Java 环境:Window 参考:Java原生反射机制 您好,我是鹤九日! 回顾 在上篇文章中:CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...
ServerTrust 并非唯一
NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...
【HTTP三个基础问题】
面试官您好!HTTP是超文本传输协议,是互联网上客户端和服务器之间传输超文本数据(比如文字、图片、音频、视频等)的核心协议,当前互联网应用最广泛的版本是HTTP1.1,它基于经典的C/S模型,也就是客…...
【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习
禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...
