微信小程序编辑器editor

最新推荐文章于 2025-03-14 12:25:21 发布

糖果_0812

最新推荐文章于 2025-03-14 12:25:21 发布

阅读量1k

点赞数

分类专栏：微信小程序文章标签：编辑器

本文链接：https://blog.youkuaiyun.com/xiao_xiao_0812/article/details/131639935

版权

本文介绍了如何在微信小程序中创建一个富文本编辑器。首先，通过引用官方示例的assets文件夹来构建页面结构。然后，在other.js中定义onEditorReady函数，用于获取编辑器上下文。在页面的WXML部分，使用wx.createSelectorQuery来选择编辑器并应用format方法来自定义样式。最后，在other.wxss中引入iconfont.wxss以支持字体图标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面显示的效果图如上，

1. 页面结构

assets文件夹在官方给的示例里面有，参照 editor | 微信开放文档

2. other.js

在页面 Page 函数中，创建 onEditorReady 函数，用来获取富文本编辑器示例EditorContext

onEditorReady() {

const that = this;

wx.createSelectorQuery().select('#editor').context(function (res) {

that.editorCtx = res.context

}).exec()

/**
   * 页面的初始数据
   */
  data: {

    //编辑器设置
    editorHeight: 300,
    readOnly: false,
    placeholder: '开始输入...'
  },
/**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

    let neirong = '<ul data-checked="true"><li>asd</li><li>zxc</li><li>qwe</li></ul>';
    wx.createSelectorQuery().select('#editor').context(function (res) {
      this.editorCtx = res.context;
      //初始化编辑器---&

最低0.47元/天解锁文章