小程序富文本编辑器编辑器第一次体验

最后，微信在5月9日的v2.7.0版本中添加了编辑器富文本编辑器组件，现在有时间为体验做准备

5月6日，我写了一个小程序富文本解析的“伪请求”，从wxParse到towxml的坑。当官员有更全面的富文本组件时，我仍然感觉到。谁知道这需要几天时间。编辑器富文本组件已发布。

熟悉下文档

第一个是兼容版本，最低要求是2.7.0，使用时确认开发工具的调试基础库。

然后，您需要注意当前支持的标签。从当前公共号码格式化的文章的样式仍然非常复杂。我总觉得当前的富文本编辑并不一定都支持“我的猜测是正确的”

从文档中可以看出，支持的标签不多，但常用的是基础知识。

初尝试

使用仍然相对简单，官方文档已经明确说明，组件直接引入wxml

然后在js中初始化组件。

onEditorReady（）{const that=this wx.createSelectorQuery（）。select（'＃editor'）。context（function（res）{that.editorCtx=res.context}）。exec（）}，

具体来说，您也可以直接下载官方演示，可以直接在开发工具中运行，也可以相对简单。

结合我的博客小程序

最后，我想试试，我可以在我的博客小程序中用编辑器替换towxml，毕竟，towxml太大了。

实施也相对简单。获取文章详细信息后，使用setContents为富文本指定值。首先写一个简单的演示。核心代码如下：

/** *初始化富文本框*/onEditorReady: async function（）{const that软件开发

=这个wx.createSelectorQuery（）。select（'＃editor'）。context（function（res）{that.editorCtx=res.context}）。exec（）let result=await api.getPostsById（'ee3099285ccee97e0ca03888750d4603'）console。 Info（result.data）that.editorCtx.setContents（{html: result.data.content，success:（res）=＆gt; {console.log（res）}，fail:（res）=＆gt; {console.log （res）}}）}，

运行后，我发现它是空白的，但在读完日志数据后，它成功了。调用setContents方法也很成功。

首先确认代码是否有问题，编写分配了html的致命固定字符串，并发现它可以在运行后成功呈现，并且证明代码应该没问题。

确认代码确实没问题后，首先想到的是开发工具是否应该更新到最新版本。检查更新后，发现确实存在最新版本，因此更新了开发工具。

不幸的是，即使您更新到最新版本，它仍然无法显示，但神奇的是使用手机预览可以成功呈现。

遗憾的是，渲染的效果并不是特别理想，因为不支持部分标签。

以下是对样式存在问题的html代码的简单介绍。例如，屏幕截图中使用的教程标题不居中，颜色不是原始红色。

使用教程

在代码中使用section标签进行渲染，但当前编辑器不应该支持。

类似地，文章中代码块的样式呈现并不理想，出于与上述相同的原因，不支持代码标记。

总结

编辑器富文本编辑器仍然基本上足以满足需求，但对于从第三方生成的复杂html文本，支持并不完美。

目前，仍然无法替换towxml组件，并期待编辑器的后续更新。