QXS-BNS

Appearance

On this page

富文本编辑器 ​

qxs-blocksuite-editor 是基于 BlockSuite 官方 PageEditor 的富文本编辑器组件，提供完整的格式化工具栏和块级编辑功能。

引入与使用 ​

ts
import '@qxs-bns/components-wc/editor'

在页面中直接使用 qxs-blocksuite-editor 即可，完整示例见下方。

loading

基本用法 ​

html
<script type="module">
  import '@qxs-bns/components-wc/editor'
</script>

<qxs-blocksuite-editor content="<p>初始内容</p>"></qxs-blocksuite-editor>

属性 ​

属性名类型默认值说明
contentstring''编辑器内容（HTML 格式），配合 @content-change 事件实现双向绑定
readonlybooleanfalse是否只读模式
previewbooleanfalse预览模式（无边框、无选中菜单）
upload-image(file: File) => Promise<string>base64自定义图片上传方法，返回图片 URL

工具栏功能 ​

编辑器提供完整的格式化工具栏，选中文字后自动显示：

文本格式 ​

  • 加粗 - 将选中文字加粗
  • 斜体 - 将选中文字设为斜体
  • 下划线 - 为选中文字添加下划线
  • 删除线 - 为选中文字添加删除线
  • 行内代码 - 将选中文字设为代码样式

块级格式 ​

通过 / 命令菜单或快捷键可以转换块类型：

块类型说明快捷键
标题 1一级标题# + 空格
标题 2二级标题## + 空格
标题 3三级标题### + 空格
无序列表项目符号列表- 或 * + 空格
有序列表编号列表1. + 空格
待办列表可勾选的任务列表[] + 空格
引用引用块> + 空格
代码块代码编辑区域``` + 空格
分割线水平分割线--- + 空格

表格 ​

通过 / 命令菜单输入"表格"可以插入表格。选中表格后会显示单元格工具栏，支持以下操作：

操作说明
上方添加行在当前行上方插入新行
下方添加行在当前行下方插入新行
左侧添加列在当前列左侧插入新列
右侧添加列在当前列右侧插入新列
删除行删除当前行
删除列删除当前列
删除表格删除整个表格

其他功能 ​

  • 拖拽排序 - 通过拖拽手柄调整块顺序
  • 撤销/重做 - Ctrl+Z / Ctrl+Shift+Z
  • 斜杠命令 - 输入 / 打开命令菜单
  • 链接 - 选中文字后添加链接
  • 颜色 - 设置文字颜色和背景色

方法 ​

方法名返回值说明
getContent()string获取当前编辑器内容（HTML 格式）

示例 ​

Vue 3 ​

vue
<script setup>
import { onMounted, ref } from 'vue'

onMounted(() => import('@qxs-bns/components-wc/editor'))

const content = ref('<h1>标题</h1><p>这是初始内容</p>')

function getContent() {
  const editor = document.querySelector('qxs-blocksuite-editor')
  console.log(editor.getContent())
}
</script>

<template>
  <qxs-blocksuite-editor :content="content" />
</template>

Vue 3 双向绑定 ​

使用 content 属性传入内容，通过 content-change 事件监听内容变化：

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

const content = ref('<h1>标题</h1><p>初始内容</p>')
</script>

<template>
  <qxs-blocksuite-editor
    :content="content"
    @content-change="(e: CustomEvent) => content = e.detail"
  />
</template>

React ​

jsx
import { useState } from 'react'
import '@qxs-bns/components-wc/editor'

export default function Editor() {
  const [content, setContent] = useState('<p>初始内容</p>')

  return (
    <qxs-blocksuite-editor
      content={content}
      onContentChange={(e) => setContent(e.detail)}
    />
  )
}

或者使用原生 DOM API：

vue
<script setup>
import { ref, onMounted } from 'vue'

const editorRef = ref(null)
const content = ref('<h1>标题</h1><p>初始内容</p>')

onMounted(async () => {
  await import('@qxs-bns/components-wc/editor')
  
  const editor = document.createElement('qxs-blocksuite-editor')
  editor.content = content.value
  
  editor.addEventListener('content-change', (e) => {
    content.value = e.detail
  })
  
  editorRef.value.appendChild(editor)
})
</script>

<template>
  <div ref="editorRef"></div>
</template>

原生 HTML ​

html
<script type="module">
  import '@qxs-bns/components-wc/editor'

  const editor = document.querySelector('qxs-blocksuite-editor')

  document.getElementById('save').addEventListener('click', () => {
    console.log('内容:', editor.getContent())
  })
</script>

<qxs-blocksuite-editor content="<p>编辑内容</p>"></qxs-blocksuite-editor>
<button id="save">保存</button>

自定义图片上传 ​

默认情况下，图片以 Base64 格式内嵌。如需上传到服务器，可通过 upload-image 属性自定义上传逻辑：

html
<qxs-blocksuite-editor 
  .upload-image=${async (file) => {
    // 上传到服务器
    const formData = new FormData()
    formData.append('file', file)
    const res = await fetch('https://your-api.com/upload', {
      method: 'POST',
      body: formData,
    })
    const { url } = await res.json()
    return url  // 返回图片 URL
  }}
></qxs-blocksuite-editor>

在题目组件中使用自定义上传 ​

在题目组件中使用富文本时，可以通过 qxs-subject-list 的 upload-image 属性统一设置上传方法：

html
<qxs-subject-list
  .upload-image=${customUploadFn}
  :subject-list="list"
></qxs-subject-list>

这个上传方法会自动应用到所有题型（单选题、多选题、填空题、问答题、量表题）的富文本描述中。

在题目组件中使用 ​

富文本编辑器已集成到各题目组件中，通过点击"添加题目描述（图文）"按钮添加：

  • 单选题/多选题/排序题
  • 填空题
  • 文本题
  • 量表题

添加后会显示富文本编辑区域，支持上述所有格式化功能。