评论

实现一个高亮的代码编辑框

如何实现一个高亮的代码编辑框

实现效果

实现思路

说到富文本编辑,首先想到的自然是 editor 组件了,然而 editor 组件设置 html 的方法只有 setContents,但是这个方法是用来初始化内容的,每次设置都会使得光标变到开头,如果用这个方法,每输一个字符光标都会跳到开头,无法使用。
因此设想了一种新的方案,将编辑和显示分开;底层放置一个 rich-text 用于显示高亮后的代码,上层放置一个编辑器,将颜色设置为透明,字体和大小与底层一致;当编辑器输入字符时,通过高亮处理后显示在底层的 rich-text 上;这样就实现了一个高亮的代码编辑框

编辑器选择

小程序中一共有 3 种输入框,inputtextareaeditor,其中 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 进行样式的微调

性能

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

立即体验

代码片段

最后一次编辑于  2020-02-21  
点赞 3
收藏
评论

1 个评论

  • Admin ²º²⁴
    Admin ²º²⁴
    2020-02-21

    默默点赞。阔以。

    2020-02-21
    赞同
    回复
登录 后发表内容