微信原生小程序富文本组件editor-page

博主： renlmingj
发布时间：2025 年 07 月 31 日
25 次浏览
暂无评论
6022字数
分类：微信小程序

##### 一、根目录文件夹 components 中新建 editor-page 文件夹并新建同名组件

###### 1、wxml代码

```html

<view class="rich-editor-container">
  
  <scroll-view class="toolbar" scroll-x>
    
    <view class="tool-group">
      <image src="/images/editor/bold.png" bindtap="handleBold" class="icon" />
      <image src="/images/editor/italic.png" bindtap="handleItalic" class="icon" />
      <image src="/images/editor/underline.png" bindtap="handleUnderline" class="icon" />
      <image src="/images/editor/super.png" bindtap="formatText" data-value="super" class="icon" />
      <image src="/images/editor/sub.png" bindtap="formatText" data-value="sub" class="icon" />
    </view>

<view class="tool-group">
      <image src="/images/editor/align-left.png" bindtap="handleAlignLeft" class="icon" />
      <image src="/images/editor/align-center.png" bindtap="handleAlignCenter" class="icon" />
      <image src="/images/editor/align-right.png" bindtap="handleAlignRight" class="icon" />
    </view>

<view class="tool-group">
      <image src="/images/editor/heading1.png" bindtap="handleHeaderChange" data-value="h1" class="icon" />
      <image src="/images/editor/heading2.png" bindtap="handleHeaderChange" data-value="h2" class="icon" />
      <image src="/images/editor/heading3.png" bindtap="handleHeaderChange" data-value="h3" class="icon" />
      <image src="/images/editor/heading4.png" bindtap="handleHeaderChange" data-value="h4" class="icon" />
      <image src="/images/editor/heading5.png" bindtap="handleHeaderChange" data-value="h5" class="icon" />
      <image src="/images/editor/heading6.png" bindtap="handleHeaderChange" data-value="h5" class="icon" />
    </view>

<view class="tool-group">
      <image src="/images/editor/list-ul.png" bindtap="handleInsertUnorderedList" class="icon" />
      <image src="/images/editor/list-ol.png" bindtap="handleInsertOrderedList" class="icon" />
    </view>

<view class="tool-group">
      <image src="/images/editor/image.png" bindtap="handleInsertImage" class="icon" />
    </view>

<view class="tool-group">
      <image src="/images/editor/undo.png" bindtap="handleUndo" class="icon" />
      <image src="/images/editor/redo.png" bindtap="handleRedo" class="icon" />
      <image src="/images/editor/clear.png" bindtap="handleClear" class="icon" />
    </view>
  </scroll-view>

<editor id="editor" placeholder="{{placeholder}}" bindinput="onInputChange" bindready="onEditorReady" class="editor"></editor>
</view>
```

> 注：所有图标均可在 [阿里巴巴矢量图标库](https://www.iconfont.cn/) 获取

###### 2、wxss/scss代码

```scss
/* 富文本编辑器 */
.rich-editor-container {
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #eee;
}

.toolbar {
  white-space: nowrap;
  padding: 8px 10px;
  background-color: #f8f8f8;
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
}

.tool-group {
  display: inline-flex;
  align-items: center;
  margin-right: 10px;
  padding-right: 10px;
  border-right: 1px solid #ddd;
}

.tool-group:last-child {
  border-right: none;
  margin-right: 0;
  padding-right: 0;
}

.icon {
  width: 24px;
  height: 24px;
  margin: 0 5px;
  opacity: 0.7;
}

.icon:active {
  opacity: 1;
}

.editor {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
}
```

###### 3、js代码

```js
// 富文本编辑器
Component({
  properties: {
    placeholder: {
      type: String,
      value: '请输入内容...'
    },
    uploadUrl: {
      type: String,
      value: ''
    },
    content: {
      type: String,
      value: ''
    },
    uploadFormData: {
      type: Object,
      value: {}
    }
  },

data: {
  },

methods: {
    onEditorReady() {
      let that = this;
      that.createSelectorQuery()
        .select('#editor')
        .context((res) => {
          that.editorCtx = res.context;
          if(that.properties.content) {
            that.setContents(that.properties.content);
          }
          that.triggerEvent('ready');
        })
        .exec()
    },

onInputChange(e) {
      this.triggerEvent('inputchange', e.detail)
    },

// 文字样式
    handleBold() {
      this.editorCtx.format('bold')
    },

handleItalic() {
      this.editorCtx.format('italic')
    },

handleUnderline() {
      this.editorCtx.format('underline')
    },

formatText(e) {
      this.editorCtx.format('script', e.target.dataset.value);
    },

// 对齐方式
    handleAlignLeft() {
      this.editorCtx.format('align', 'left')
    },

handleAlignCenter() {
      this.editorCtx.format('align', 'center')
    },

handleAlignRight() {
      this.editorCtx.format('align', 'right')
    },

// 标题
    handleHeaderChange(e) {
      this.editorCtx.format('header', e.target.dataset.value);
    },

// 列表
    handleInsertUnorderedList() {
      this.editorCtx.format('list', 'bullet')
    },

handleInsertOrderedList() {
      this.editorCtx.format('list', 'ordered')
    },

// 图片上传
    handleInsertImage() {
      wx.chooseMedia({
        count: 1,
        mediaType: ['image'],
        sourceType: ['album', 'camera'],
        sizeType: ['compressed'],
        success: (res) => {
          wx.cropImage({
            src: res.tempFiles[0].tempFilePath, // 图片路径
            cropScale: '16:9', // 裁剪比例
            success: (lab) => {
              wx.compressImage({
                src: lab.tempFilePath, // 图片路径
                quality: 30, // 压缩质量
                success: (url) => {
                  this._insertImage(url.tempFilePath);
                }
              })
            }
          })
        }
      })
    },

// 其他操作
    handleUndo() {
      this.editorCtx.undo()
    },

handleRedo() {
      this.editorCtx.redo()
    },

handleClear() {
      this.editorCtx.clear({
        success: () => {
          wx.showToast({
            title: '已清空',
            icon: 'success'
          })
        }
      })
    },

// 插入图片到编辑器
    _insertImage(src) {
      this.editorCtx.insertImage({
        src: src,
        data: {
          id: 'image_' + Date.now(),
          role: 'editorImage'
        },
        success: () => {
          this.triggerEvent('insertimage', {
            src
          })
        },
        fail: (err) => {
          wx.showToast({
            title: '插入图片失败',
            icon: 'none'
          })
        }
      })
    },

// 公共方法
    getContents() {
      return new Promise((resolve, reject) => {
        if (!this.editorCtx) {
          reject(new Error('Editor not ready'))
          return
        }

this.editorCtx.getContents({
          success: resolve,
          fail: reject
        })
      })
    },

setContents(html) {
      return new Promise((resolve, reject) => {
        if (!this.editorCtx) {
          reject(new Error('Editor not ready'))
          return
        }

this.editorCtx.setContents({
          html: html,
          success: resolve,
          fail: reject
        })
      })
    },

clear() {
      return new Promise((resolve, reject) => {
        if (!this.editorCtx) {
          reject(new Error('Editor not ready'))
          return
        }

this.editorCtx.clear({
          success: resolve,
          fail: reject
        })
      })
    }
  }
})
```

###### 4、json代码

```js
{
  "component": true,
  "usingComponents": {}
}
```

##### 二、组件调用

###### 1、json代码

```json
{
  "usingComponents": {
    "editor-page": "/components/editor-page/editor-page"
  }
}
```

###### 2、wxml代码

```html
<editor-page id="myEditor" placeholder="请输入内容..." upload-url="https://123.com" bind:ready="onEditorReady" bind:inputchange="onInputChange"></editor-page>
```

###### 3、js代码

```js
// 编辑器准备就绪
onEditorReady() {
  this.setContent();
},
// 获取内容
onInputChange(e) {
  this.setData({
    html: e.detail.html
  })
},

// 设置内容
async setContent() {
  const editor = this.selectComponent('#myEditor');
  await editor.setContents('<h1>文章标题</h1><p>这是预设的内容</p><p><b>加粗文字</b>和<i>斜体文字</i></p>');
},
```

##### 三、效果图展示

![效果图](https://www.renlmingj.cn/usr/uploads/2025/07/1871280529.png)

最后修改：2025 年 07 月 31 日