xtf-editor

组件说明

xtf-editor 是富文本编辑器组件，基于 uni-app 的 editor 原生组件封装。支持工具栏操作、图片插入、只读模式和自定义样式，适用于文章编辑、备注输入和内容发布等场景。

---

基础用法

1. 最简示例

<template>
  <xtf-editor v-model="content" placeholder="请输入内容..." />
</template>

<script>
export default {
  data() {
    return {
      content: ''
    }
  }
}
</script>

2. 自定义工具栏

通过 toolbarActions 设置工具栏按钮：

<template>
  <xtf-editor v-model="content" placeholder="请输入内容..." :toolbar-actions="toolbarActions" />
</template>

<script>
export default {
  data() {
    return {
      content: '',
      toolbarActions: [
        { key: 'bold', type: 'format', name: 'bold', icon: 'format_bold', label: '加粗' },
        { key: 'italic', type: 'format', name: 'italic', icon: 'format_italic', label: '斜体' },
        {
          key: 'underline',
          type: 'format',
          name: 'underline',
          icon: 'format_underlined',
          label: '下划线'
        },
        {
          key: 'ordered',
          type: 'format',
          name: 'list',
          value: 'ordered',
          icon: 'format_list_numbered',
          label: '有序列表'
        },
        {
          key: 'bullet',
          type: 'format',
          name: 'list',
          value: 'bullet',
          icon: 'format_list_bulleted',
          label: '无序列表'
        },
        { key: 'clear', type: 'command', command: 'clear', icon: 'format_clear', label: '清除格式' }
      ]
    }
  }
}
</script>

3. 只读模式

通过 readOnly 设置只读模式：

<template>
  <xtf-editor v-model="content" read-only :show-toolbar="false" />
</template>

<script>
export default {
  data() {
    return {
      content: '<p>这是只读的富文本内容。</p>'
    }
  }
}
</script>

---

全部属性

属性	类型	默认值	作用描述	适用范围
value / modelValue	String | Object	''	编辑器内容	双向绑定
placeholder	String	''	占位提示文字	占位符
readOnly	Boolean	false	是否只读	只读
disabled	Boolean	false	是否禁用	禁用
minHeight	String | Number	360	最小高度（rpx）	高度
showToolbar	Boolean	true	是否显示工具栏	工具栏
toolbarActions	Array	[]	工具栏按钮列表	工具栏
showImgSize	Boolean	true	图片是否显示尺寸	图片
showImgToolbar	Boolean	true	图片是否显示工具栏	图片
showImgResize	Boolean	true	图片是否可调整大小	图片
customClass	String	''	自定义类名	样式覆盖
customStyle	String | Object	''	自定义样式	动态样式覆盖
editorClass	String	''	原生 editor 节点的自定义类名	编辑区样式覆盖
editorStyle	String | Object	''	原生 editor 节点样式，会与 minHeight 合并	编辑区样式覆盖

---

事件

事件名称	触发时机	回调参数	参数说明
change	内容变化时触发	({ html, text, delta })	HTML、纯文本与 Delta 内容快照
focus	获得焦点时触发	(event)	原生 editor 焦点事件对象
blur	失去焦点时触发	(event)	原生 editor 失焦事件对象
ready	编辑器初始化完成时触发	-	-
statuschange	格式状态变化时触发	(status)	格式状态
insert-image	通过 insertImage 成功插入图片时触发	(payload)	与实际调用原生 editorContext.insertImage 一致：传入 options 时为原对象；选择图片时为 { src, alt: 'image' }

源码核验补充

input、update:modelValue、update:value 均传出 HTML；change 传 { html, text, delta }，ready 传 { editorCtx }。公开方法为 format、undo、redo、clear、removeFormat、insertDivider、insertDate、insertText、insertImage、getContents、setContents。insertImage(options) 在 options.src 存在时原样传给原生 editorContext.insertImage 并触发 insert-image；未传 src 时会调用 uni.chooseImage，再以 { src, alt: 'image' } 插入。工具项需使用 type: 'format' 加 name/value，或 type: 'command' 加 command。

事件使用示例

<template>
  <xtf-editor
    v-model="content"
    editor-class="article-editor"
    :editor-style="{ backgroundColor: '#ffffff', minHeight: '480rpx' }"
    @ready="onReady"
    @change="onChange"
    @focus="onFocus"
    @blur="onBlur"
    @statuschange="onStatusChange"
    @insert-image="onInsertImage"
  />
</template>

<script>
export default {
  data() {
    return { content: '' }
  },
  methods: {
    onReady({ editorCtx }) {
      console.log('编辑器已就绪：', !!editorCtx)
    },
    onChange({ html, text }) {
      console.log('内容变化：', html, text)
    },
    onFocus(event) {
      console.log('获得焦点：', event.type)
    },
    onBlur(event) {
      console.log('失去焦点：', event.type)
    },
    onStatusChange(status) {
      console.log('格式状态：', status)
    },
    onInsertImage(options) {
      console.log('插入图片：', options.src)
    }
  }
}
</script>

---

主题说明

• 工具栏使用 xtf-icon 组件显示图标
• 激活工具使用主题色高亮
• 编辑区域使用原生 editor 组件
• 只读模式隐藏工具栏并禁用交互

如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖相关 CSS 变量。