扫一扫分享
extBus 是一个面向未来的 web 富文本框架,同时也可以作为一个开箱即用的富文本编辑器,拥有非常好的扩展性和可定制性,是驱动复杂富文本的不二之选!
一直致力于让富文本开发也能像普通前端框架一样,通过简明易懂的 api 和少量的约定,即可编写出健壮的,可预期的行为。在 TextBus 1.0 的时,我们为此做了非常多的探索和努力,取得了不错的成果,但也因为如此,1.0 的设计在某些方面还留下一些遗憾。
幸运的是,TextBus 2.0 即将面世,我们在 1.0 的成果之上,重新设计了整个架构,致力于更简洁的 api,更友好的开发接入方式。
npm install @textbus/editor @textbus/core @textbus/browser
import { createEditor } from '@textbus/editor'
const editor = createEditor('#editor')
editor.onChange.subscribe(() => {
const content = editor.getContent()
console.log(content)
})
和前端框架一样,组件是指带有特定交互行为或结构的一个单独功能模块。要创建一个组件,只需要调用 defineComponent 函数,并编写特定的配置项即可。
import { defineComponent, ContentType, useSlots } from '@textbus/core'
export const myComponent = defineComponent({
type: ContentType.BlockComponent, // 设置组件类型
name: 'MyComponent', // 组件的名字,不可重复
transform(translator, state) { // 将当前组件 json 数据转换为实例
return translator.createSlot(state)
},
setup(slot) {
// 组件的具体逻辑
const slots = useSlots(slot)
return {
render(isOutputMode, slotRender) {
return (
<my-component>
{
slotRender(slots.get(0), () => {
return <div/>
})
}
</my-component>
)
},
toJSON() {
slots.get(0).toJSON()
}
}
}
})
上面示例是一个最简单的组件,但它基本包含了 TextBus 组件的基本形态,更复杂的组件,无非是在这个基础上增加更多的逻辑而已。
组件加载器用于从文档中识别并读取出组件的必要信息,从而生成 TextBus 的组件实例的工具类,由于 TextBus 是跨平台的,所以不同平台的加载器也可能是不同的,我们以 PC 平台为例。
import { Slot, ContentType } from '@textbus/core'
export const myComponentLoader = {
match(element) {
// 匹配一个 dom 元素,返回 true 即表示为当前组件
return element.tagName.toLowerCase() === 'my-component'
},
read(element, injector, slotParser) {
// 读取当前 DOM 元素下组件指定的结构,并返回组件实例
const slot = slotParser(new Slot([
ContentType.Text,
ContentType.InlineComponent
]), element.children[0])
return paragraphComponent.createInstance(injector, slot)
},
component: myComponent
}
格式是指对文档中,插槽内(可编辑片段)的文本进行美化或增强的附加信息,如加粗、对齐方式等。
import { FormatType, VElement } from '@textbus/core'
export const boldFormatter = {
type: FormatType.InlineTag,
name: 'bold',
render() {
return new VElement('strong')
}
}
格式加载器用于从文档中识别并读取出格式信息,由于 TextBus 是跨平台的,所以不同平台的加载器也可能是不同的,我们以 PC 平台为例。
export const boldFormatLoader = {
match(element) {
return ['strong', 'b'].includes(element.tagName.toLowerCase()) ||
['bold', '500', '600', '700', '800', '900'].includes(element.style.fontWeight)
},
read() {
return true
},
formatter: boldFormatter
}
把我们定义好的组件和格式添加到编辑器中。
import { createEditor } from '@textbus/editor'
import { myComponentLoader } from './my-component'
import { boldFormatLoader } from './bold-formatter'
const editor = createEditor('#editor', {
componentLoaders: [
myComponentLoader
],
formatLoaders: [
boldFormatLoader
]
})
至此,我们就扩展了自己的组件和格式,我们可以按照此方法,继续编写出任意你想要的组件和格式。
手机预览