富文本编辑器组件

editor 组件是 Uniapp 中用于实现富文本编辑功能的核心组件，支持文本、图片的混排编辑。该组件兼容 H5、App-vue 和微信小程序等平台，开发者可以使用该组件进行内容的编辑和导出。导出内容支持带标签的 html 和纯文本 text，编辑器内部则采用 delta 格式进行存储。

1. 什么是 editor 组件？

editor 组件是用于实现富文本编辑的组件，支持对文本的格式化操作、图片插入、样式设置等功能。在 Web 开发中通常使用 contenteditable 来实现富文本编辑，但该 API 仅在 H5 平台可用。editor 组件为 Uniapp 提供了跨平台的解决方案，兼容 H5、App-vue 和微信小程序。

使用场景

• 文章编辑：支持文本的加粗、斜体、下划线、对齐等操作，适用于新闻文章、博客等场景。
• 图片混排：支持在编辑内容中插入图片，并对图片进行大小、对齐等操作。
• 内容管理系统：在内容管理系统中，富文本编辑是常见的需求，editor 组件可以满足大多数富文本编辑的功能。

2. editor 组件的常用属性

editor 组件提供了多种属性，支持对编辑器进行配置，如是否只读、占位符设置、图片编辑工具等。以下是常用属性的详细说明：

属性名	类型	默认值	说明
read-only	Boolean	false	设置编辑器是否为只读模式。
placeholder	String		编辑器未输入内容时的提示信息。
show-img-size	Boolean	false	是否在点击图片时显示图片大小控件。
show-img-toolbar	Boolean	false	是否在点击图片时显示图片工具栏控件。
show-img-resize	Boolean	false	是否在点击图片时显示修改图片尺寸的控件。
@ready	EventHandle		编辑器初始化完成时触发。
@focus	EventHandle		编辑器聚焦时触发，事件参数 detail 包含 {html, text, delta}。
@blur	EventHandle		编辑器失去焦点时触发，事件参数 detail 包含 {html, text, delta}。
@input	EventHandle		编辑器内容改变时触发，事件参数 detail 包含 {html, text, delta}。
@statuschange	EventHandle		当编辑器内容或格式发生变化时触发，返回选区已设置的样式。

2.1 设置只读模式 read-only

• 说明：设置 read-only 属性为 true 时，编辑器进入只读模式，用户无法进行编辑。
• 类型：Boolean
• 默认值：false

<template>
  <view>
    <!-- 只读模式下的富文本编辑器 -->
    <editor :read-only="true" placeholder="这是只读模式" />
  </view>
</template>

2.2 图片编辑工具 show-img-toolbar

• 说明：设置 show-img-toolbar 为 true 时，点击图片会显示图片工具栏，用于修改图片的属性，如对齐方式等。
• 类型：Boolean
• 默认值：false

<template>
  <view>
    <!-- 支持图片工具栏的编辑器 -->
    <editor show-img-toolbar placeholder="点击图片以显示工具栏" />
  </view>
</template>

2.3 内容变化事件 @input

• 说明：当编辑器内容发生变化时，会触发 @input 事件，事件参数包含编辑器当前的 html、text 和 delta 内容。
• 类型：EventHandle

<template>
  <view>
    <!-- 监听编辑器内容变化 -->
    <editor @input="onInput" placeholder="编辑内容将触发 input 事件" />
  </view>
</template>

<script setup>
const onInput = (e) => {
  // 打印编辑器当前的 HTML 内容
  console.log('当前 HTML:', e.detail.html);
};
</script>

3. 支持的 HTML 标签与样式

editor 组件支持部分 HTML 标签和内联样式的编辑与渲染。开发者可以通过这些标签和样式进行内容的格式化，丰富编辑器的功能。

3.1 支持的标签

以下是 editor 组件支持的 HTML 标签。未被支持的标签会被自动移除或转为支持的标签进行存储。

标签类型	标签	平台差异说明
行内元素	<span> <strong> <b> <ins> <em> <i> <u> <a> <del> <s> <sub> <sup> <img>	其中 <ins> <del> 在百度小程序中不支持
块级元素	<br> <p> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <ol> <ul> <li>	其中 <br> 仅百度小程序支持，<p> 百度小程序不支持

---

3.2 支持的内联样式

以下是 editor 组件支持的内联样式，支持在行内元素或块级元素上设置。不同平台支持的样式有所差异。

样式类型	样式	平台差异说明
块级样式	text-align direction margin padding line-height text-indent	百度小程序仅支持 text-align 和 direction
行内样式	font font-size font-style font-weight color background-color	百度小程序仅支持 color 和 background-color

4. 富文本编辑器的使用案例

以下案例展示了 editor 组件的实际应用，展示了文本编辑、图片插入与工具栏、内容变化监听等常用功能。

<template>
  <view class="container">
    <view class="page-body">
      <!-- 富文本编辑器工具栏 -->
      <view class="toolbar" @tap="formatText">
        <button data-name="bold">加粗</button>
        <button data-name="italic">斜体</button>
        <button data-name="underline">下划线</button>
        <button data-name="insertImage">插入图片</button>
      </view>

      <!-- 富文本编辑器 -->
      <editor id="editor" placeholder="开始编辑..." show-img-toolbar show-img-resize @input="onInput" @ready="onEditorReady" />
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 创建 editorCtx 用于控制编辑器
let editorCtx = ref(null);

// 监听编辑器内容变化
const onInput = (e) => {
  console.log('当前 HTML 内容:', e.detail.html);
};

// 编辑器初始化完成时触发
const onEditorReady = () => {
  uni.createSelectorQuery()
    .select('#editor')
    .context((res) => {
      editorCtx.value = res.context;
    })
    .exec();
};

// 格式化文本，如加粗、斜体等
const formatText = (e) => {
  const { name } = e.target.dataset;
  if (name === 'insertImage') {
    uni.chooseImage({
      count: 1,
      success: (res) => {
        editorCtx.value.insertImage({
          src: res.tempFilePaths[0],
          alt: '图片',
        });
      },
    });
  } else {
    editorCtx.value.format(name);
  }
};
</script>

<style scoped>
/* 工具栏样式 */
.toolbar {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  background-color: #f5f5f5;
}

button {
  padding: 10px;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #005bb5;
}
</style>