实现效果
实现思路
说到富文本编辑,首先想到的自然是 editor
组件了,然而 editor
组件设置 html
的方法只有 setContents
,但是这个方法是用来初始化内容的,每次设置都会使得光标变到开头,如果用这个方法,每输一个字符光标都会跳到开头,无法使用。
因此设想了一种新的方案,将编辑和显示分开;底层放置一个 rich-text
用于显示高亮后的代码,上层放置一个编辑器,将颜色设置为透明,字体和大小与底层一致;当编辑器输入字符时,通过高亮处理后显示在底层的 rich-text
上;这样就实现了一个高亮的代码编辑框
编辑器选择
小程序中一共有 3 种输入框,input
、textarea
和 editor
,其中 input
只能输入单行文本,并不适合此场景;textarea
可以编辑多行文本,本是个不错的方案,然而一方面 textarea
是原生组件,会受到一些限制,另一方面,似乎在真机上给 textarea
设置字体无法生效,用默认的字体又有点丑;因此最终还是选用了 editor
高亮方案
这里选择了轻量且强大的 prismjs
代码实现
rich-text
通过 absolute
布局固定在 editor
下方,editor
被设置成透明颜色(除光标外)
<view class="editor-view">
<rich-text class="highlight" nodes="{{code}}" />
<editor id="editor" class="editor" placeholder="请输入 html" bindinput="input" />
</view>
每输入一个字符,在 js
中进行高亮处理后在 rich-text
中显示
const Prism = require("./prism.js");
Page({
input(e) {
// markdown 则改为 Prism.highlight(e.detail.text, Prism.languages.markdown, "markdown")
this.setData({
code: "<pre style=\"color:#ccc;font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;\">" + Prism.highlight(e.detail.text, Prism.languages.html, "html") + "</pre>"
})
}
})
应用场景
- markdown 编辑器
markdown
编辑器作为一种简单的富文本编辑器,通过这样的方式实现就可以比较美观 - 富文本编辑完成后进行微调
在editor
中编辑完成后,可以通过编辑html
进行样式的微调
性能
在模拟器中是非常流畅的,在真机上稍有延缓,个人觉得是可以接受的(可以适当限制内容长度,过长的内容不进行高亮处理)
默默点赞。阔以。