TextEditor 编辑器

文本编辑，双击 Text 元素进入编辑状态。

继承

TextEditor  >  InnerEditor

适用平台

目前仅 web 平台 PC 端支持。

安装插件

需要安装 text-editor 插件、图形编辑器插件 才能使用，点此访问 Github 仓库。

npm

npm install @leafer-in/text-editor

pnpm

pnpm add @leafer-in/text-editor

yarn

yarn add @leafer-in/text-editor

bun

bun add @leafer-in/text-editor

或通过 script 标签引入，使用全局变量 LeaferIN.textEditor 访问插件内部功能。

text-editor.min

<script src="https://unpkg.com/@leafer-in/text-editor@2.3.1/dist/text-editor.min.js"></script>
<script>
  const { TextEditor } = LeaferIN.textEditor
</script>

text-editor

<script src="https://unpkg.com/@leafer-in/text-editor@2.3.1/dist/text-editor.js"></script>
<script>
  const { TextEditor } = LeaferIN.textEditor
</script>

关键属性

config: ITextEditorConfig

文本编辑器配置。

打开文本编辑器后，可直接通过 app.editor.innerEditor 访问到 文本编辑器实例 。

interface ITextEditorConfig {
  selectAll: boolean // 是否自动全选文本，默认为true
}

// 配置文本编辑器
app.editor.getInnerEditor('TextEditor').config.selectAll = false

editDom: HTMLDivElement

编辑文本框，覆盖在画布上的可编辑 dom 元素（用来临时代替文本）。

默认添加了 css 类名：'leafer-text-editor'

继承

TextEditor  >  InnerEditor

示例

正常文本

倾斜加粗

转为小写

多行文本

// #文本编辑器
import { App, Text } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件  
import '@leafer-in/viewport' // 导入视口插件（可选）
import '@leafer-in/text-editor' // 导入文本编辑插件

const app = new App({
    view: window,
    editor: {}
})

app.tree.add(Text.one({
    text: 'Action is the proper fruit of knowledge.',
    editable: true, fill: '#FFE04B', fontSize: 16,
}, 100, 100, 100))

改变字体

字间距

行高

居中对齐

裁剪文本

转为大写