@ithinkdt/editor

许可证

MIT

安装

npm i @ithinkdt/editor

需要您自行安装 peer 依赖 vue@>=3.5。

介绍

@ithinkdt/editor 提供 iThinkDT 常用编辑器组件，包括：

• 基于 TinyMCE 的富文本编辑器
• 基于 Monaco Editor 的代码编辑器
• 富文本图片上传配置注入
• 富文本格式刷、中文语言包与默认皮肤
• 代码格式化与编辑器生命周期事件
• ts、js、json、css、html 等常用代码语言支持

富文本编辑器

基础使用

import { defineComponent, ref } from 'vue'
import { DtTextEditor } from '@ithinkdt/editor'

export default defineComponent({
    setup() {
        const content = ref('<p>Hello iThinkDT</p>')

        return () => (
            <DtTextEditor
                v-model={content.value}
                height="420px"
                placeholder="请输入内容"
            />
        )
    },
})

配置图片上传

可以通过 @ithinkdt/editor/richtext 导出的插件全局配置图片上传：

import { createApp } from 'vue'
import { plugin as editorPlugin } from '@ithinkdt/editor/richtext'

import App from './App.vue'

const app = createApp(App)

app.use(editorPlugin({
    async fileUploader(blobInfo, progress) {
        const formData = new FormData()
        formData.append('file', blobInfo.blob(), blobInfo.filename())

        const res = await fetch('/api/files', {
            method: 'POST',
            body: formData,
        })

        progress(100)

        const data = await res.json()
        return data.url
    },
}))

app.mount('#app')

也可以在局部通过 DtTextEditorProvider 覆盖配置：

import { defineComponent, ref } from 'vue'
import { DtTextEditor, DtTextEditorProvider } from '@ithinkdt/editor'

export default defineComponent({
    setup() {
        const content = ref('')

        async function upload(blobInfo: { blob: () => Blob, filename: () => string }) {
            const formData = new FormData()
            formData.append('file', blobInfo.blob(), blobInfo.filename())

            const res = await fetch('/api/files', {
                method: 'POST',
                body: formData,
            })

            const data = await res.json()
            return data.url
        }

        return () => (
            <DtTextEditorProvider fileUploader={upload}>
                <DtTextEditor v-model={content.value} autoUpload height="420px" />
            </DtTextEditorProvider>
        )
    },
})

自定义工具栏

import { defineComponent, ref } from 'vue'
import { DtTextEditor } from '@ithinkdt/editor/richtext'

export default defineComponent({
    setup() {
        const content = ref('')

        return () => (
            <DtTextEditor
                v-model={content.value}
                height="360px"
                language="zh-CN"
                toolbar="undo redo | bold italic underline | bullist numlist | image link | fullscreen"
                plugins="preview image link lists fullscreen wordcount"
            />
        )
    },
})

主动上传图片

import { defineComponent, ref } from 'vue'
import { DtTextEditor, type TextEditorInst } from '@ithinkdt/editor/richtext'

export default defineComponent({
    setup() {
        const editor = ref<TextEditorInst>()
        const content = ref('')

        async function submit() {
            await editor.value?.uploadImages()
            await fetch('/api/articles', {
                method: 'POST',
                body: JSON.stringify({ content: content.value }),
            })
        }

        return () => (
            <>
                <DtTextEditor ref={editor} v-model={content.value} autoUpload={false} />
                <button type="button" onClick={submit}>保存</button>
            </>
        )
    },
})

代码编辑器

基础使用

import { defineComponent, ref } from 'vue'
import { DtCodeEditor } from '@ithinkdt/editor'

export default defineComponent({
    setup() {
        const code = ref('const message = "Hello iThinkDT"')

        return () => (
            <DtCodeEditor
                v-model={code.value}
                lang="ts"
                height="360px"
                minimap={false}
            />
        )
    },
})

监听变更与初始化

import { defineComponent, ref } from 'vue'
import { DtCodeEditor } from '@ithinkdt/editor/code'

export default defineComponent({
    setup() {
        const code = ref('{"name":"iThinkDT"}')

        function handleChange(value: string) {
            console.log('实时内容：', value)
        }

        function handleUpdate(value: string) {
            console.log('失焦后同步：', value)
        }

        return () => (
            <DtCodeEditor
                v-model={code.value}
                lang="json"
                height="320px"
                autoFormat
                options={{ tabSize: 4 }}
                onChange={handleChange}
                onUpdate={handleUpdate}
                onInit={(editor, monaco) => console.log(editor, monaco)}
            />
        )
    },
})

API 参考

导出

| 导出 | 入口 | 说明 | |------|------|------| | DtTextEditor | @ithinkdt/editor、@ithinkdt/editor/richtext | 富文本编辑器组件 | | DtTextEditorProvider | @ithinkdt/editor、@ithinkdt/editor/richtext | 富文本配置 Provider | | plugin | @ithinkdt/editor/richtext | 富文本配置插件 | | DtCodeEditor | @ithinkdt/editor、@ithinkdt/editor/code | 代码编辑器组件 |

DtTextEditor Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | modelValue | string | '' | 编辑器内容 | | autoUpload | boolean | false | 是否启用 TinyMCE 自动图片上传 | | plugins | string | 内置插件集合 | TinyMCE 插件列表 | | toolbar | string | 内置工具栏 | TinyMCE 工具栏配置 | | placeholder | string | '' | 占位提示 | | inline | boolean | false | 是否使用行内编辑模式 | | language | 'zh-CN' \| 'en' | 'zh-CN' | 编辑器语言 | | outputFormat | 'html' \| 'text' | 'html' | 输出格式 | | modelEvents | string | 'change keydown blur focus paste' | 同步内容的事件 | | statusbar | boolean | true | 是否显示状态栏 | | elementpath | boolean | true | 是否显示元素路径 | | readonly | boolean | false | 是否只读 | | disabled | boolean | false | 是否禁用 | | setup | Function | — | TinyMCE 初始化回调 | | width | string | '100%' | 宽度 | | height | string | '100%' | 高度 | | fileUploader | EditorOptions['images_upload_handler'] | — | 图片上传处理函数 |

DtTextEditor 事件与实例

| 事件 | 说明 | |------|------| | update:modelValue | 编辑器内容更新 |

| 实例方法 | 说明 | |----------|------| | uploadImages() | 手动上传编辑器中的图片 |

plugin(options) 与 DtTextEditorProvider

| 选项 | 类型 | 说明 | |------|------|------| | fileUploader | EditorOptions['images_upload_handler'] | TinyMCE 图片上传处理函数 |

DtCodeEditor Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | modelValue | string | '' | 编辑器内容 | | lang | 'ts' \| 'js' \| 'json' \| 'css' \| 'html' | 'ts' | 代码语言 | | autoFormat | boolean | true | 外部内容写入时是否自动格式化 | | readonly | boolean | false | 是否只读 | | disabled | boolean | false | 是否禁用 | | minimap | boolean | true | 是否显示 Monaco 缩略图 | | options | IStandaloneEditorConstructionOptions | {} | Monaco Editor 原生配置 | | width | string | '100%' | 宽度 | | height | string | '100%' | 高度 |

DtCodeEditor 事件与实例

| 事件 | 说明 | |------|------| | change | 内容实时变化时触发 | | update | 编辑器失焦后触发 | | update:modelValue | 编辑器失焦后同步 v-model | | init | 编辑器创建后触发，参数为 (editor, monaco) | | dispose | 编辑器销毁前触发，参数为 (editor, monaco) |

| 实例属性 | 说明 | |----------|------| | editor | Monaco IStandaloneCodeEditor 实例 |