实现效果

实现思路

说到富文本编辑，首先想到的自然是 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>"
    })
  }
})

应用场景

1. markdown 编辑器
   markdown 编辑器作为一种简单的富文本编辑器，通过这样的方式实现就可以比较美观
2. 富文本编辑完成后进行微调
   在 editor 中编辑完成后，可以通过编辑 html 进行样式的微调

性能

在模拟器中是非常流畅的，在真机上稍有延缓，个人觉得是可以接受的（可以适当限制内容长度，过长的内容不进行高亮处理）

立即体验

代码片段