Simditor富文本编辑器核心方法详解

Simditor是一款轻量级的富文本编辑器，提供了丰富的API方法供开发者调用。本文将全面解析Simditor的核心方法及其使用方式，帮助开发者更好地掌握这款编辑器的功能。

基本使用方法

在使用Simditor的方法前，首先需要初始化编辑器实例并保持对该实例的引用：

// 初始化Simditor
const editor = new Simditor({
  textarea: document.getElementById('editor')
});

// 调用setValue方法设置编辑器内容
editor.setValue('欢迎使用Simditor编辑器');

核心方法解析

1. 内容操作方法

setValue(content)

• 参数：content (String) - 要设置的HTML内容
• 功能：完全替换编辑器当前内容
• 示例：editor.setValue('<p>新内容</p>')

getValue()

• 返回值：String - 编辑器中的HTML内容
• 功能：获取编辑器当前内容
• 示例：const content = editor.getValue()

sync()

• 功能：手动同步编辑器内容到原始textarea
• 说明：通常在需要强制同步时使用

2. 选择与范围控制

focus()

• 功能：将焦点设置到编辑器
• 说明：使编辑器获得焦点，可立即输入

blur()

• 功能：使编辑器失去焦点
• 说明：常用于结束编辑状态

selection

• 功能：获取当前选区对象
• 说明：可用于更精细的选区操作

3. 编辑器状态控制

enable()

• 功能：启用编辑器
• 说明：将编辑器从禁用状态恢复

disable()

• 功能：禁用编辑器
• 说明：使编辑器变为只读状态

destroy()

• 功能：销毁编辑器实例
• 说明：释放资源，还原原始textarea

4. 格式操作方法

formatBlock(tagName)

• 参数：tagName (String) - 块级标签名(如'h1', 'p')
• 功能：对选区应用块级格式
• 示例：editor.formatBlock('h2')

createLink(url, title)

• 参数：
  • url (String) - 链接地址
  • title (String) - 可选，链接标题
• 功能：为选中文本创建链接
• 示例：editor.createLink('https://example.com')

5. 其他实用方法

undo()

• 功能：撤销上一步操作
• 说明：支持多级撤销

redo()

• 功能：重做被撤销的操作
• 说明：与undo配合使用

cleanPaste(html)

• 参数：html (String) - 要粘贴的HTML
• 功能：清理并粘贴HTML内容
• 说明：自动清理不安全标签和样式

高级技巧

1. 链式调用：Simditor的许多方法支持链式调用，如：

   editor.setValue('内容').focus().formatBlock('p');
   

2. 事件监听：可以结合事件监听实现更复杂的交互：

   editor.on('valuechanged', function() {
     console.log('内容已变更');
   });
   

3. 自定义扩展：通过方法组合可以实现自定义功能扩展。

注意事项

1. 调用方法前确保编辑器已完成初始化
2. 对内容进行大量操作时考虑性能影响
3. 处理用户输入时注意XSS防护
4. 移动端需特别测试触摸相关操作

通过熟练掌握这些核心方法，开发者可以充分发挥Simditor的潜力，构建出功能丰富、用户体验良好的富文本编辑功能。