实例方法

DesignerInstance 接口定义了编辑器实例的所有方法。

接口定义

interface DesignerInstance {
  getContent(): string
  setContent(content: string): void
  insertSection(html: string, options?: any): void
  destroy(): void
  on(event: string, callback: Function): void
  off(event: string, callback?: Function): void
  doLayout(): void
  getEditor(): any
}

方法

getContent()

获取编辑器当前内容。

• 返回: string - HTML 内容

const content: string = designerRef.value?.getContent()
console.log(content)

setContent(content)

设置编辑器内容。

• 参数:
  • content: string - HTML 内容

designerRef.value?.setContent('<div class="pb-section">Hello</div>')

insertSection(html, options)

插入一个 Section。

• 参数:
  • html: string - Section 的 HTML 内容
  • options?: any - 可选配置

designerRef.value?.insertSection('<div class="pb-section">New Section</div>')

destroy()

销毁编辑器实例，释放资源。

designerRef.value?.destroy()

注意

销毁后无法再使用该实例，需要重新创建。

on(event, callback)

监听事件。

• 参数:
  • event: string - 事件名称
  • callback: Function - 回调函数

designerRef.value?.on('change', (content: string) => {
  console.log('Content changed:', content)
})

支持的事件：

• ready - 编辑器就绪
• change - 内容变化
• confirm - 确认操作（iframe 模式）

off(event, callback)

移除事件监听。

• 参数:
  • event: string - 事件名称
  • callback?: Function - 回调函数（可选）

const handler = (content: string) => {
  console.log(content)
}

// 添加监听
designerRef.value?.on('change', handler)

// 移除特定处理函数
designerRef.value?.off('change', handler)

// 移除所有该事件的处理函数
designerRef.value?.off('change')

doLayout()

手动触发布局调整。

designerRef.value?.doLayout()

适用场景：

• 容器大小改变
• 显示/隐藏侧边栏
• 窗口大小调整

getEditor()

获取底层 UEditor 实例。

• 返回: any - UEditor 编辑器实例

const editor = designerRef.value?.getEditor()
if (editor) {
  // 调用 UEditor 的方法
  editor.execCommand('bold')
}

使用示例

Vue 3

<template>
  <div>
    <button @click="handleGetContent">获取内容</button>
    <button @click="handleSetContent">设置内容</button>
    
    <UEditorPlusDesigner
      ref="designerRef"
      :config="config"
      @ready="handleReady"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { UEditorPlusDesigner } from 'ueditor-plus-designer'
import type { DesignerInstance } from 'ueditor-plus-designer'

const designerRef = ref<DesignerInstance | null>(null)

const handleReady = () => {
  console.log('Editor ready')
  
  // 监听内容变化
  designerRef.value?.on('change', (content: string) => {
    console.log('Content:', content)
  })
}

const handleGetContent = () => {
  if (designerRef.value) {
    const content = designerRef.value.getContent()
    alert(content)
  }
}

const handleSetContent = () => {
  designerRef.value?.setContent('<div>New content</div>')
}
</script>

React

import React, { useRef } from 'react'
import { UEditorPlusDesigner } from './components/UEditorPlusDesigner'
import type { DesignerInstance } from './components/UEditorPlusDesigner'

function App() {
  const designerRef = useRef<DesignerInstance | null>(null)

  const handleReady = () => {
    console.log('Editor ready')
    
    // 监听内容变化
    designerRef.current?.on('change', (content: string) => {
      console.log('Content:', content)
    })
  }

  const handleGetContent = () => {
    if (designerRef.current) {
      const content = designerRef.current.getContent()
      alert(content)
    }
  }

  const handleSetContent = () => {
    designerRef.current?.setContent('<div>New content</div>')
  }

  return (
    <div>
      <button onClick={handleGetContent}>获取内容</button>
      <button onClick={handleSetContent}>设置内容</button>
      
      <UEditorPlusDesigner
        ref={designerRef}
        config={{ ueditorPath: '/ueditor-plus' }}
        onReady={handleReady}
      />
    </div>
  )
}

原生 JavaScript

const designer = UEditorPlusDesigner.createDesigner({
  ueditorPath: '/ueditor-plus'
})

designer.on('ready', function() {
  console.log('Ready')
  
  // 监听变化
  designer.on('change', function(content) {
    console.log('Content:', content)
  })
})

designer.mount('#container')

// 获取内容
document.getElementById('btn-get').onclick = function() {
  const content = designer.getContent()
  alert(content)
}

// 设置内容
document.getElementById('btn-set').onclick = function() {
  designer.setContent('<div>New content</div>')
}

// 销毁
document.getElementById('btn-destroy').onclick = function() {
  designer.destroy()
}

最佳实践

1. 等待 Ready

始终在 ready 事件后调用方法：

// ✅ 推荐
const handleReady = () => {
  const content = designerRef.value?.getContent()
}

// ❌ 不推荐（可能失败）
const content = designerRef.value?.getContent()

2. Null 检查

使用可选链或条件检查：

// ✅ 使用可选链
const content = designerRef.value?.getContent()

// ✅ 条件检查
if (designerRef.value) {
  const content = designerRef.value.getContent()
}

3. 清理事件监听

组件卸载时清理：

// Vue
onUnmounted(() => {
  designerRef.value?.off('change')
  designerRef.value?.destroy()
})

// React
useEffect(() => {
  return () => {
    designerRef.current?.off('change')
    designerRef.current?.destroy()
  }
}, [])

4. 错误处理

包裹可能失败的操作：

try {
  const content = designerRef.value?.getContent()
  if (content) {
    // 处理内容
  }
} catch (error) {
  console.error('获取内容失败:', error)
}

相关链接

• DesignerConfig
• 事件系统
• 素材类型