DesignerConfig

编辑器配置接口，用于初始化 UEditor Plus Designer。

接口定义

interface DesignerConfig {
  container?: HTMLElement | string
  ueditorPath?: string
  ueditorConfig?: UEditorConfig
  categoryLoader?: () => Promise<MaterialCategory[]>
  styleLoader?: (params?: MaterialQueryParams) => Promise<StyleListData>
  onReady?: () => void
  onChange?: (content: string) => void
}

属性

container

容器元素或选择器（主要用于独立版本）。

• 类型: HTMLElement | string
• 默认值: undefined
• 必需: 否

// 使用元素
const container = document.getElementById('editor')
const config = { container }

// 使用选择器
const config = { container: '#editor' }

ueditorPath

UEditor Plus 静态文件路径。

• 类型: string
• 默认值: '/ueditor-plus'
• 必需: 否

const config = {
  ueditorPath: '/static/ueditor'
}

ueditorConfig

UEditor 编辑器配置对象。

• 类型: UEditorConfig
• 默认值: {}
• 必需: 否

详见 UEditorConfig。

categoryLoader

分类数据加载函数。

• 类型: () => Promise<MaterialCategory[]>
• 默认值: 内置加载器
• 必需: 否

const categoryLoader = async (): Promise<MaterialCategory[]> => {
  const res = await fetch('/api/categories')
  return res.json()
}

styleLoader

素材数据加载函数。

• 类型: (params?: MaterialQueryParams) => Promise<StyleListData>
• 默认值: 内置加载器
• 必需: 否

const styleLoader = async (
  params?: MaterialQueryParams
): Promise<StyleListData> => {
  const res = await fetch('/api/materials', {
    method: 'POST',
    body: JSON.stringify(params)
  })
  return res.json()
}

onReady

编辑器就绪回调。

• 类型: () => void
• 默认值: undefined
• 必需: 否

const config = {
  onReady: () => {
    console.log('Editor is ready')
  }
}

onChange

内容变化回调。

• 类型: (content: string) => void
• 默认值: undefined
• 必需: 否

const config = {
  onChange: (content) => {
    console.log('Content changed:', content)
  }
}

UEditorConfig

UEditor 编辑器配置接口。

interface UEditorConfig {
  serverUrl?: string
  toolbars?: string[][]
  autoHeightEnabled?: boolean
  imagePopup?: boolean
  iframeCssStylesAddition?: string[]
  [key: string]: any
}

常用属性

属性	类型	默认值	说明
serverUrl	string	-	服务器请求地址
toolbars	string[][]	-	工具栏按钮配置
autoHeightEnabled	boolean	true	是否自动长高
initialFrameHeight	number	320	初始高度
initialFrameWidth	string|number	'100%'	初始宽度
imagePopup	boolean	true	图片弹出层
iframeCssStylesAddition	string[]	-	额外CSS样式
zIndex	number	900	层级

使用示例

最简配置

const config: DesignerConfig = {
  ueditorPath: '/ueditor-plus'
}

完整配置

const config: DesignerConfig = {
  ueditorPath: '/ueditor-plus',
  
  ueditorConfig: {
    autoHeightEnabled: false,
    initialFrameHeight: 600,
    toolbars: [
      ['source', 'undo', 'redo', 'bold', 'italic']
    ],
    serverUrl: '/api/ueditor',
    iframeCssStylesAddition: [
      'body { background: #f5f5f5; }'
    ]
  },
  
  categoryLoader: async () => {
    const res = await fetch('/api/categories')
    return res.json()
  },
  
  styleLoader: async (params) => {
    const res = await fetch('/api/materials', {
      method: 'POST',
      body: JSON.stringify(params)
    })
    return res.json()
  },
  
  onReady: () => {
    console.log('Ready')
  },
  
  onChange: (content) => {
    localStorage.setItem('content', content)
  }
}

相关类型

• MaterialCategory
• MaterialQueryParams
• StyleListData