uniapp小程序开发-富文本编辑器mp-html，juice外部样式转内联样式

都雅宁 2023-04-08 原文

前言

在开发一款公司的小程序过程中，有一个需求：web端后端可以上传word文档，后端转为html字符串；小程序接收显示，并且可以在小程序进行编辑修改。
其实在日常小程序中很少见到富文本编辑器的使用，所以这次使用的过程中也尝试了多种，但是最好用的还是mp-html

mp-html

这款插件也是DCloud插件库里的一款，内部其实也是封装使用微信中原生的editor

这款插件的兼容性也很不错，目前也是有人维护的，

如果小程序有需要还是可以支棱起来的

如何使用

	在使用上我还是踩了一些坑的，文档以及百度上的一些资料都太模糊，不足以让我一个初学者去使用。现在我记录一下我的使用过程

第一步

使用 npm install mp-html -dev 安装
安装成功后，在node_modules中找到mp-html

第二步

找到node_modules/mp-html/tools/config.js 这个文件的配置可以开启编辑器，媒体，视频等插件，必须要删除之前的注释符号才是真的打开配置

第三步

在我们的终端，将使用命令路径切换至 cd .\node_modules\mp-html\
执行npm install
npm run build:uni-app
这样就把编辑器启动好了

第四步

可以封装一个组件，组件中直接引用
import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'

components: {
	mpHtml
},

// html 可以一段字符串‘<p style="font-size:20px">dgfhfghfghfghjghj</p>’
	<mp-html ref="article" container-style="padding:20px" :content="html"  :editable="editable" @remove="remove" />

遇到的问题

因为后端解析的word文档是一个完整的html字符串，例如：
<html><head><style>...</style></head><body>.....</body></html>
而对于我们的富文本是不支持解析这些标签的，而且富文本编辑器仅支持内联样式。后端提供的字符串全部是外联样式。在此，可以使用一个插件解决问题：juice

juice

还有一个插件与juice齐名的插件：inline-css ，因为安装过程中一直反应一个async-hooks 未安装，一直安装一直失败，网上没有找到一个解决方式，我就没有用这个了。如果有人看到可以私信我，帮我一下！感激哦！！！
使用方式

var juice = require('juice');
var result = juice("<style>div{color:red;}</style><div/>");

<div style="color: red;"></div>

截取body内的内容

我们可以使用一个正则就可以解决

var rx = /<body[^>]*>([\s\S]+?)<\/body>/i;
var m = rx.exec(result);
 if (m) this.nodes = m[1];

后记

如果小程序中仅需要展示的话，微信原生的rich-text足够了（wxparser也是可以的，但是需要加一下配置）

wxparser 配置(不能在页面的子组件中使用，无效，可以使用slot)

在pages.json里面，需要使用wxparser 的页面单独配置就可以

 "mp-weixin": {
   "usingComponents": {
      "wxparser": "plugin://wxparserPlugin/html-parser"
    }
  }

结语

这篇仅开发过程中遇到的问题记录。排版随便，见谅

富文内联

有关uniapp小程序开发-富文本编辑器mp-html，juice外部样式转内联样式的更多相关文章

ruby - 使用 ruby 将 HTML 转换为纯文本并维护结构/格式 - 2
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。最佳答案首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
ruby - 如何使用文字标量样式在 YAML 中转储字符串？ - 2
我有一大串格式化数据(例如JSON)，我想使用Psychinruby同时保留格式转储到YAML。基本上，我希望JSON使用literalstyle出现在YAML中:---json:|{"page":1,"results":["item","another"],"total_pages":0}但是，当我使用YAML.dump时，它不使用文字样式。我得到这样的东西:---json:!"{\n\"page\":1,\n\"results\":[\n\"item\",\"another\"\n],\n\"total_pages\":0\n}\n"我如何告诉Psych以想要的样式转储标量？解
ruby - 如何在 Ruby 中拆分参数字符串 Bash 样式？ - 2
我正在为一个项目制作一个简单的shell，我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止，我一直在使用CSV::parse_line，将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"
ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2
我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？最佳答案参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司
微信小程序通过字典表匹配对应数据 - 2
前言一般来说，前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可，但要是匹配的code码比较多或者多个页面用到时，为了便于后期维护，后台就会使用字典表让前端匹配，下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs？{{method(a,b)}}可以看到，上述代码是一个调用方法传值的操作，在vue中很常见，多用于数据之间的转换，但由于微信小程序诸多限制的原因，你并不能优雅的这样操作，可能有人会说，为什么不用if判断实现呢？但是if判断的局限性在于如果存在数据量过大时，大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立
计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU
微信小程序开发入门与实战（Behaviors使用） - 2
@作者:SYFStrive @博客首页:HomePage📜：微信小程序📌：个人社区（欢迎大佬们加入）👉：社区链接🔗📌：觉得文章不错可以点点关注👉：专栏连接🔗💃：感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序（🔥）目录自定义组件-behaviors 1、什么是behaviors 2、behaviors的工作方式 3、创建behavior 4、导入并使用behavior 5、behavior中所有可用的节点 6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors 1、什么是behaviorsbehaviors是小程序中，用于实现
ruby-on-rails - rspec - 我怎样才能让 "pendings"有我的文本而不仅仅是 "No reason given" - 2
我有这个代码:context"Visitingtheusers#indexpage."dobefore(:each){visitusers_path}subject{page}pending('iii'){shouldhave_no_css('table#users')}pending{shouldhavecontent('Youhavereachedthispageduetoapermissionic错误')}它会导致几个待处理，例如ManagingUsersGivenapractitionerloggedin.Visitingtheusers#indexpage.#Noreason
ruby - 如何为 pbcopy 生成富文本链接 - 2
我一直在玩一个脚本，它在Chrome中获取选定的文本并在Google中查找它，提供四个最佳选择，然后粘贴相关链接。它以不同的格式粘贴，具体取决于当前在Chrome中打开的页面-DokuWiki打开的DokuWiki格式，普通网站的HTML，我想要我的WordPress所见即所得编辑器的富文本。我尝试使用pbpaste-Preferrtf来查看没有其他样式的富文本链接在粘贴板上的样子，但它仍然输出纯文本。在文本编辑中保存文件并进行试验后，我想出了以下内容text=%q|{\rtf1{\field{\*\fldinst{HYPERLINK"URL"}}{\fldrsltTEXT}}}|te
ruby-on-rails - 尝试打开 .gitignore 以在文本编辑器中对其进行编辑，但在 OS X Mountain Lion 上找不到文件位置 - 2
我使用“newapp_name”创建了一个新的Rails应用程序，我正在尝试编辑.gitignore文件，但在我的应用程序文件夹中找不到它。我在哪里可以找到它？我安装了Git。最佳答案 .gitignore位于项目的root中，而不是app子目录中。首先打开终端并进入您的目录。您需要使用ls-a来显示stash文件。然后使用打开.gitignore 关于ruby-on-rails-尝试打开.gitignore以在文本编辑器中对其进行编辑，但在OSXMountainLion上找不到文件位