Loading...
功能特性
- 为选中的文本应用字体样式，包括大小、字体、颜色、背景色和粗细。
- 支持自定义字体、大小、颜色和粗细。
插件
FontBackgroundColorPlugin: 使用background-color样式控制背景色FontColorPlugin: 使用color样式控制字体颜色FontFamilyPlugin: 使用内联元素和font-family样式更改字体FontSizePlugin: 使用 CSS 类或font-size样式控制字体大小FontWeightPlugin: 使用font-weight样式控制字体粗细
Kit 使用
安装
添加字体样式功能最快的方式是使用 FontKit，它包含了预配置的字体插件及其 Plate UI 组件。
- 包含所有字体插件（
FontColorPlugin、FontBackgroundColorPlugin、FontSizePlugin、FontFamilyPlugin），并具有合理的默认值。
添加 Kit
将 kit 添加到你的插件中：
import { createPlateEditor } from 'platejs/react';
import { FontKit } from '@/components/editor/plugins/font-kit';
const editor = createPlateEditor({
plugins: [
// ...otherPlugins,
...FontKit,
],
});手动使用
安装
pnpm add @platejs/basic-styles
添加插件
在创建编辑器时，将字体插件包含在你的 Plate 插件数组中。
import {
FontBackgroundColorPlugin,
FontColorPlugin,
FontFamilyPlugin,
FontSizePlugin,
} from '@platejs/basic-styles/react';
import { createPlateEditor } from 'platejs/react';
const editor = createPlateEditor({
plugins: [
// ...otherPlugins,
FontColorPlugin,
FontBackgroundColorPlugin,
FontFamilyPlugin,
FontSizePlugin,
],
});配置插件
你可以使用自定义选项和目标元素来配置各个字体插件。
import {
FontColorPlugin,
FontBackgroundColorPlugin,
FontSizePlugin,
FontFamilyPlugin,
} from '@platejs/basic-styles/react';
import { KEYS } from 'platejs';
import { createPlateEditor } from 'platejs/react';
const editor = createPlateEditor({
plugins: [
// ...otherPlugins,
FontColorPlugin.configure({
inject: {
nodeProps: {
defaultNodeValue: 'black',
},
targetPlugins: [KEYS.p],
},
}),
FontSizePlugin.configure({
inject: {
targetPlugins: [KEYS.p],
},
}),
FontBackgroundColorPlugin.configure({
inject: {
targetPlugins: [KEYS.p],
},
}),
FontFamilyPlugin.configure({
inject: {
targetPlugins: [KEYS.p],
},
}),
],
});inject.nodeProps.defaultNodeValue: 设置默认字体颜色值。inject.targetPlugins: 指定哪些元素类型可以接收字体样式（影响 HTML 解析）。
添加工具栏按钮
你可以将 FontColorToolbarButton 和 FontSizeToolbarButton 添加到你的 Toolbar 中，以控制字体颜色和大小。
插件
FontBackgroundColorPlugin
用于字体背景色格式化的插件。将 background-color 样式应用于选中的文本。
FontColorPlugin
用于字体颜色格式化的插件。将 color 样式应用于选中的文本。
FontFamilyPlugin
用于字体格式化的插件。将 font-family 样式应用于选中的文本。
FontSizePlugin
用于字体大小格式化的插件。将 font-size 样式应用于选中的文本。
FontWeightPlugin
用于字体粗细格式化的插件。将 font-weight 样式应用于选中的文本。
转换
tf.backgroundColor.addMark
在选中的文本上设置字体背景色标记。
tf.color.addMark
在选中的文本上设置字体颜色标记。
tf.fontFamily.addMark
在选中的文本上设置字体标记。
tf.fontSize.addMark
在选中的文本上设置字体大小标记。
tf.fontWeight.addMark
在选中的文本上设置字体粗细标记。
API
toUnitLess
将字体大小值转换为无单位值。