uniapp editor组件的使用方法

在uniapp中使用editor组件时，如何实现富文本的插入图片和自定义样式功能？我在绑定@insertimage事件上传图片后，编辑器无法显示图片链接，只能看到空白的img标签，该怎么解决？另外，如何通过CSS修改编辑器默认字体大小和行间距？官方文档对样式自定义部分说明较少，求具体实现方法。

2 回复

uniapp的editor组件用于富文本编辑。在template中添加<editor>标签，通过@ready、@input等事件监听内容变化。可使用editorContext操作内容，如插入图片、设置样式等。注意：仅支持微信小程序和App端。


UniApp 的 editor 组件用于富文本编辑，支持插入图片、视频等多媒体内容。以下是基本使用方法：

1. 基本结构

在 .vue 文件中引入组件：

<template>
  <view>
    <editor
      id="editor"
      class="editor"
      :placeholder="placeholder"
      @ready="onEditorReady"
      @focus="onFocus"
      @blur="onBlur"
    ></editor>
    <button @click="insertImage">插入图片</button>
  </view>
</template>

2. 组件属性

  • placeholder：占位文本
  • show-img-size：是否显示图片尺寸（布尔值）
  • show-img-toolbar：是否显示图片工具栏（布尔值）
  • show-img-resize：是否显示图片缩放控件（布尔值）

3. 事件处理

<script>
export default {
  data() {
    return {
      placeholder: '开始输入...'
    }
  },
  methods: {
    onEditorReady(e) {
      // 编辑器准备就绪
      uni.createSelectorQuery()
        .select('#editor')
        .context(res => {
          this.editorCtx = res.context
        }).exec()
    },
    onFocus(e) {
      console.log('编辑器聚焦', e)
    },
    onBlur(e) {
      console.log('编辑器失焦', e)
    },
    insertImage() {
      // 插入网络图片示例
      this.editorCtx.insertImage({
        src: 'https://example.com/image.jpg',
        width: '80%',
        success: function() {
          console.log('插入图片成功')
        }
      })
    }
  }
}
</script>

4. 样式设置

<style>
.editor {
  width: 100%;
  height: 300px;
  border: 1px solid #ccc;
  padding: 10px;
}
</style>

5. 常用方法

通过 editorContext 可调用：

  • insertText({ text })：插入文本
  • insertImage(options)：插入图片
  • clear()：清空内容
  • getContents()：获取编辑器内容
  • setContents(contents)：设置编辑器内容

注意事项：

  1. 需通过 uni.createSelectorQuery() 获取编辑器实例
  2. 部分功能在 App 端和 H5 端支持度不同
  3. 插入本地图片需先上传到服务器获取网络地址

建议查阅 UniApp 官方文档获取最新 API 支持情况。

回到顶部