编辑器插件准则
@ atlaskit/ 编辑- 核心的准则插件
概览
指针插件提供了在编辑器中显示垂直指针的能力. 准则作为垂直线在特定位置提供,可按不同样式和状态定制。 此插件的设计仅包含基本逻辑以渲染出准则. 常用的配置和水电设施位于 editor-common 软件包.
主要特点
- 显示指南 - 在编辑器内指定位置调整垂直准则
- 灵活定位 - 使用坐标值相对于编辑中心的位置指南
- 自定义样式 - 配置行样式(固态/干态)、颜色和盖样式
- 国家管理 - 控制可见度和各项准则的活跃状态
- 插件集成 - 使用宽度插件计算正确的定位
安装
yarn add @atlaskit/editor-plugin-guideline
- 无 - 说吧 @atlaskit/editor-plugin-指针
- 来源 - 说吧 键盘
使用量
基本示例
pluginInjectionApi?.dependencies?.guideline?.actions?.displayGuideline(view)({
guidelines: [{
key: "guideline_01",
position: {
x: -100
},
active: true,
style: "dashed",
color: "rgba(0, 0, 0, 0.2)"
},
{
key: "guideline_02",
position: {
x: 300
},
show: false
}]
});
准则配置
准则配置由三部分组成:
- 密钥 (要求) - 准则的独特标识符
- 职位 (要求) - 准则的x坐标立场
- 州/区 (可选) - 显示状态和样式选项
职位
位置值定义为: type Position = { x: number };
位置图 :
│ editor width │
│------------------- max 1800px --------------------│
│ │
│ center line (when position x=0) │
│ │ │
│--------- x < 0 ---------│--------- x > 0 ---------│
│ │ │
┌────────────┬────────────┬────────────┬────────────┐
│ │ │ │ │
│ │ │ │ │
│ │ │ │ │
│ │-- 380px ---│--- 380px --│ │
│ │ │ │ │
│ │ │ │ │
│ │ │ │ │
└────────────┴────────────┴────────────┴────────────┘
│ editor content │
│-------- max 760px ------│
│---------- or 1800px in full-width mode ----------│
- 何时
x0,在编辑器中心显示垂直行 - 负值会移动左行( 最多为编辑器宽度的下半部分)
- 正值将行向右移动(最多为编辑器宽度的一半)
- 忽略可见范围以外的准则
状态和样式
配置下列状态和样式选项的指南 :
type GuidelineConfig = {
// ...
active?: boolean; // default false
show?: boolean; // default true
styles?: {
lineStyle?: 'dashed' | 'solid'; // default 'solid'
color?: CSSToken; // default undefined
capStyle?: 'line' // default undefined
}
};
active- 等同网格插件中的亮点状态show- 隐藏指南(用于动画)styles.color- 用有效的 CSS 颜色来覆盖导线颜色styles.lineStyle- 线条样式可以是“ 固态” 或“ dashed ”styles.capStyle- 线盖样式,支持“行”
支助
对于内部阿特拉斯人, 访问懒惰的通道 # 帮助编辑器 # 支助或访问 去/编辑-帮助 以提交错误.
许可证
请看 阿特拉斯前端 - 许可证 获取更多的许可证信息.