-
2021-06-14 02:25:56
由于小程序端的限制，uni-app的富文本的处理与普通网页不同。
有rich-text组件、v-html、和uParse三类方案。
1. rich-text
rich-text是uni-app的内置组件，提供了高性能的富文本渲染模式。
API参考https://uniapp.dcloud.io/component/rich-text
rich-text的优势是全端支持、高性能。有个缺陷是只能整体设点击事情，无法对富文本中的图片、超链接单独设点击事件。
如果是图片，可以把内容拆成多个rich-text解决。rich-text不支持内嵌视频也可以通过拆分多个rich-text，中间插入video来实现。
注：h5和app-nvue无此限制，支持链接等单独点击。
2. v-html
v-html指令，是web开发中很常用的。可惜由于小程序不支持html，使用场景受限。
在uni-app中，h5端，和app-vue的v3编译器下可以使用v-html。其他环境无法支持。
3. uParse
由于小程序的rich-text组件在一些场景不满足需求，于是业内出现了wxparse等三方方案，把HTML或markdown格式的服务器数据源转为view来渲染。
但wxparse许久不更新，且不跨端，在uni-app插件市场出现了更多改进版的parse插件。
它们功能更强，支持直接渲染markdown或html的数据源为富文本，也支持其中的图片和超链接的点击处理，有的还支持表格和视频的处理。
但这些parser解决方案的性能不如rich-text。
注：app-nvue只能使用rich-text。
几种方案的特点讲清楚了，大家在开发中根据自己的需求选择合适的富文本渲染方案吧。
至于富文本编辑，即在输入框里图文混排内容，解决方案如下：
在h5、app-vue、微信小程序，支持editor组件
在h5中，传统的富文本编辑仍可使用
在非微信的其他小程序中，其官方没有提供解决方案，目前只能使用web-view组件套一个远程网页来满足这方面的需求。web-view组件是全端可用的解决方案。
还有一种方案，不再编辑区直接预览效果，而是采用markdown编辑器方案，输入区输入markdown语法，预览区提供预览。这种方案是跨端的。插件市场搜富文本编辑，有不少插件。http://ext.dcloud.net.cn/search?q=富文本编辑
更多相关内容 -
Vue指令之v-html
2020-12-01 16:29:26Vue指令之v-html v-html指令是设置innerHTML 1.v-html该怎么使用呢？？？ 我们先在被vue实例挂载的标签div中，放入一个p标签，在p标签内部写入v-html指令，<p v-html="name"></p> ，那么name的值...展开全文Vue指令之v-html
v-html指令是设置innerHTML
1.v-html该怎么使用呢？？？
我们先在被vue实例挂载的标签div中，放入一个p标签，在p标签内部写入v-html指令，<p v-html="name"></p> ，那么name的值哪里来呢？
这就需要在data中去定义了，对于普通的文本和v-text没有什么差异，但是对于html结构就不一样了，它就会被解析出来，如下代码：
2.普通文本：
3.html结构：
4.总结：
- v-html 指令的作用：设置元素的innerHTML
- 内容中有html结构会被解析为标签
- v-text指令无论内容是什么，只会解析为文本
- 解析文本使用v-text,需要解析html结构使用v-html
-
v-text和v-html的用法
2020-06-24 16:45:55接下来，我讲介绍一下v-text和v-html的使用方式以及它们之间的区别。 v-text的使用方法 直接上代码了。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta ...展开全文说明
今天开始温习前端流行的框架之一Vue.js，我的内心是激动的。
接下来，我讲介绍一下v-text和v-html的使用方式以及它们之间的区别。使用方法
直接上代码了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="app"> <p v-text="msg"></p> <p v-html="msg"></p> <p>{{msg}}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> <script> new Vue({ el: "#app", data: { msg: "Hello Vue", }, }); </script> </body> </html>代码运行结果如下图所示。
v-text和v-html起了插值表达式{{}}作用，将msg中的信息显示在视图中。那它们之间有什么不同？请看下面代码。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="app"> <p v-text="msg"></p> <p v-html="msg"></p> <p>{{msg}}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> <script> new Vue({ el: "#app", data: { msg: "<span>Hello Vue</span>", }, }); </script> </body> </html>这里改变了msg的值，运行结果如下图。
我们可以清晰的知道，在v-html的运行中，它解析了HTML代码。而v-text并没有解析，它将msg原样输出。结语
如果这篇文章对你有帮助，记得给我点赞评论吧！谢谢！
-
v-html
2017-06-17 17:25:01为了输出真正的 HTML ，你需要使用 v-html 指令： div v-html="rawHtml">div> 更新元素的 innerHTML 。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用 v-...展开全文双大括号会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，你需要使用
v-html指令：
<div v-html="rawHtml"> </div>更新元素的
innerHTML。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用v-html组合模板,可以重新考虑是否通过使用组件来替代。在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用
v-html，永不用在用户提交的内容上。
-
Vue中v-html的用法
2021-06-14 09:57:15在Vue语法中，通过{{}}可以输出文本变量，当时它并不能实现在一个标签语句加入一个新的标签语句，这时候需要用到v-html属性来完成操作 <!DOCTYPE html> <html lang="en"> <head> <meta ... -
v-html防止XSS注入
2020-08-19 16:52:07vue-dompurify-html插件 安装 cnpm install vue-...div v-dompurify-html="rawHtml"></div> 为什么使用vue-dompurify-html，不用XSS插件呢？ 因为使用XSS插件他会把除了标签和内容之外的所有东西都给过 -
v-html的使用
2019-11-04 20:23:22v-html 如果在HTML代码中想嵌入一个代码块，代码块中有一些标签能够按照HTML语法解读出来，就需要v-html来实现了，例如下面的代码： HTML <!DOCTYPE html> <html lang="en"> <head> <meta ... -
vue中使用v-html，v-html中js代码不生效的问题
2019-02-28 10:44:33templateContent 是后台返回的html片段，以及css样式和js，但是返回的 js是不执行的，因为浏览器在渲染的时候并没有将js渲染，这时要在$nextTick中动态创建script标签并插入 如图 regJs就是js代码片段，至于... -
避免使用 vue 的 v-html 指令
2019-10-20 08:31:15一、问题说明 在日常的后台系统中经常会有输入框的业务，最近有个业务是...并且title是用v-model绑定的，直接用v-html插入Dom中 巧的是测试人员很有专业素养，直接输入一段script,alert脚本，问题就出来了,直接弹出 ... -
[vue] 常见用法之 v-html、v-text、v-model区别
2019-05-13 17:37:54v-model： 指令常用于表单 < input >、< textarea > 及 < select > 元素上，创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素，负责监听用户的输入事件更新数据。 v-model 会... -
vue中用v-html加载html元素及三种方法给v-html元素添加样式（详解）
2020-12-19 21:51:44百度一下，很简单，一个v-html标签搞定！下面以具体的例子介绍如何使用？introduction:" ↵款式:运动休闲鞋 ↵ ↵ ↵高帮款送增高鞋垫1双/袜子1双/除味香包1包 ↵ ↵赠品款式和颜色随机派送 ↵"introduction这个字段... -
Vue v-html用法
2020-06-18 20:34:57在Vue框架下，可以用v-html指令来做。例如： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue demo</title> </head> <body> <script ... -
(精华2020年5月4日更新) vue教程篇 v-text,v-html,v-once,v-pre,v-cloak的使用
2020-05-04 12:08:45DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模板</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>... -
解决v-html指令潜在的xss攻击
2020-04-29 23:50:34我们首先来看一个例子 运行之后由于src地址对应的资源找不到，会触发img标签的error...v-html指令源码 // /vue/src/platforms/web/compiler/directives/html.js export default function html (el: ASTElement, di... -
vue项目 v-html存在植入xss攻击怎么解决
2021-03-22 21:53:12然后在需要使用v-html的页面,将v-html改为 v-dompurify-html即可解决xss攻击问题.但是这样写的话也是比较麻烦的,如果这个项目已经做的很大了,在一个个的去改,这样费事费力,还不易于后期开发的维护.当人员离职入职的... -
解决用v-html插入的文本不换行
2019-10-28 09:36:43用v-html插入的文本不换行 vue中文本换行问题: 问题描述： 一段文字（比如叫test），可能包含\n， 1,如果用{{text}}直接显示，不会换行。 2,直接用v-html=“text”,也不会换行。 第一种解决方法：运用正则的方式... -
vue.js的v-html和v-text的区别
2019-06-08 22:09:31{{}}插值表达式 把{{}}里面的值插入包含它的...DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue</title> <script src="vue.js"></script... -
vue 里面使用 v-html 插入的文本不换行的问题解决
2021-01-12 16:57:23有时候遇到接口返回一串很长的字符串，里面有换行符需要在页面上直接展示出来。 <p>{{text}}</p> //或 <p v-html="text">...用上面这两种方式都无法让文本换行...p v-html="text" style="white-soace:pr -
v-html 解析并插入 html 标签
2018-09-21 19:31:471. 双大括号会将数据解释为普通文本，而非 HTML 代码。 <div id="app"> &...Using v-html directive: </p> </div> <body&a -
Vue的v-html样式无效问题
2019-07-03 12:33:57## 例如我在vue中添加了如下的v-html： 样式无效代码： <table class="table" v-html="table_data" width="100%">{{table_data}}</table> <script> export default { data(){ return{ ... -
vue中v-text，v-html, v-model, {{}}之间的异同
2019-05-16 17:50:47首先我们知道vue中有很多自定义指令，以v- 开头，例如：v-text，v-bind，v-model, v-if,等 在这些指令中，部分指令之间是很容易被混淆，所以今天决定自己总结一下以下几个相似指令之间的异同： 1.v-text v-text是... -
vue指令:v-text,v-html,v-show
2018-08-09 15:56:15指令 指令带有前缀 v-;列表内容 指令需要添加在DOM元素上 常用的指令 ...v-text 解释:更新元素的 textContent。如果要更新部分的 ...v-html 解释: 更新元素的 innerHTML 。 注意：内容按普通 HTML 插入 -... -
Vue中v-html无法渲染
2020-06-05 18:01:42vue 中v-html将原始html渲染为带样式的文本 最近在使用v-html去渲染富文本的时候发现，怎么都渲染不出。 后发现后端为了安全性考虑，将<"、">"、"&"全部进行了转义 这个时候要使用innerText 去渲染出... -
Vue中的v-bind，v-text，v-html, v-model, {{}}
2019-05-22 10:02:531.v-bind 可以将vue变量值和html标签属性绑定起来 2.v-text v-text是用于操作纯文本，它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变，插值处的内容也会随之更新。...3.v-html v-... -
Vue项目--使用事件代理解决v-html 点击事件无效
2019-10-15 00:07:53在之前的项目中，后台返回的是一段拼接好的html字符串，直接放上去完事了。但在现在vue项目里这样却很不方便，我是打算做成一个单页应用。这就要在导航目录上添加路由，以及存在二级目录如何打开的问题。之前是通过... -
v-text v-html {{}} 三者之间的区别
2019-03-21 15:19:10<template> <transition name="el-notification-fade"> <div :class="['el-notification', customClass, horizontalClass]" v-show="visible" :style="positionStyle" ... -
vue爬坑 div中使用v-html，里面的图片溢出问题；
2019-07-30 10:35:05最近项目中，有这样一个需求，点击按钮弹出框显示详情内容，内容是html，我使用的是div的v-html，来显示；...div class="dialog-content" v-html="dialogContent"></div> 对应的css代码如下： <style... -
vue中使用v-html防止xss注入
2021-01-14 09:52:04一、下载 xss 依赖 npm install xss --save 二、main.js中引入xss包并挂载到...三、在vue.config.js中覆写html指令 chainWebpack: config => { config.module .rule("vue") .use("vue-loader") .loader( -
vue如何在v-html中使用过滤器filters
2019-05-30 18:18:45今天在项目中需要使用v-html来输出文本，但是文本中有些内容是需要先过滤一遍的。 vue1.x中是可以直接加“|”来使用过滤器，但是在vue2.x中作者移除了这种写法。 现在可以使用的写法是： <div v-html="$options.... -
Vue v-html渲染成功后执行函数
2019-09-12 14:28:24在给v-html的赋值函数里，赋值成功后执行this.$nextTick(function () {自己的方法} 该方法在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 ...
