插件名称 | tiptap |
---|---|
发布时间 | 2020年6月15日 |
插件作者 | heyscrumpy |
用于Vue.js应用程序的无呈现(完全可自定义)和可扩展的WYSIWYG RTF编辑器。
这是Vue.js 的1#富文本编辑器。基于Prosemirror。
# Yarn
$ yarn add tiptap
# NPM
$ npm install tiptap --save
1.将您选择的组件导入项目。
import { Editor, EditorContent, EditorMenuBar, EditorMenuBubble, EditorFloatingMenu } from 'tiptap';
2.将EditorContent组件添加到模板。
<template>
<editor-content :editor="editor" />
</template>
3.注册组件并创建一个基本编辑器。
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
}
},
mounted() {
this.editor = new Editor({
content: '<p>默认的内容</p>',
})
}
}
4.编辑器的所有可能选项。
editorProps: {},
editable: true,
autoFocus: null,
extensions: [],
content: '',
topNode: 'doc',
emptyDocument: {
type: 'doc',
content: [{
type: 'paragraph',
}],
},
useBuiltInExtensions: true,
disableInputRules: false,
disablePasteRules: false,
dropCursor: {},
parseOptions: {},
injectCSS: true,
onInit: () => {},
onTransaction: () => {},
onUpdate: () => {},
onFocus: () => {},
onBlur: () => {},
onPaste: () => {},
onDrop: () => {},
5.安装和导入扩展。所有可能的扩展:
<template>
<editor-content :editor="editor" />
</template>
<script>
// 导入编辑器
import { Editor, EditorContent } from 'tiptap'
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
}
},
mounted() {
this.editor = new Editor({
content: '<p>这只是一段无聊的段落</p>',
})
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>
属性 | 类型 | 默认 | 描述 |
---|---|---|---|
content | Object|String | null | Prosemirror使用的编辑器状态对象。您还可以将HTML传递到content 广告位。两者同时使用时,该content 插槽将被忽略。 |
editorProps | Object | {} | Prosemirror editorProps列表。 |
editable | Boolean | true | 设置为false 编辑器时为只读。 |
autoFocus | Boolean | false | 将编辑器集中在init上。 |
extensions | Array | [] | 编辑器使用的扩展名列表。这可能是Nodes ,Marks 或Plugins 。 |
useBuiltInExtensions | Boolean | true | 默认情况下,tiptap增加了Doc ,Paragraph 并且Text 节点到Prosemirror架构。 |
dropCursor | Object | {} | 配置为prosemirror-dropcursor 。 |
parseOptions | Object | {} | Prosemirror parseOptions的列表。 |
onInit | Function | undefined | 这将在初始化时返回当前state 和view Prosemirror 的Object 。 |
onFocus | Function | undefined | 这将返回一个对象,其焦点为event 和和当前state 和view Prosemirror。 |
onBlur | Function | undefined | 这将在模糊时返回具有event 和当前state 和view Prosemirror 的对象。 |
onUpdate | Function | undefined | 这将返回一个带有state Prosemirror,a getJSON() 和getHTML() function以及当前transaction 变化的对象。 |
方法 | 争论 | 描述 |
---|---|---|
setContent | content, emitUpdate, parseOptions | 替换当前内容。您可以传递HTML字符串或JSON文档。emitUpdate 默认为false 。parseOptions 默认为构造函数中提供的那些。 |
clearContent | emitUpdate | 清除当前内容。emitUpdate 默认为false 。 |
setOptions | options | 覆盖当前的编辑器属性。 |
registerPlugin | plugin , handlePlugins | 注册一个Prosemirror插件。您可以传递handlePlugins 带有参数的函数(plugin, oldPlugins) 来定义newPlugins 将被调用的顺序。handlePlugins 默认为推plugin 到的前面oldPlugins 。 |
getJSON | – | 将当前内容获取为JSON。 |
getHTML | – | 以HTML格式获取当前内容。 |
focus | – | 关注编辑器。 |
blur | – | 模糊编辑器。 |
destroy | – | 销毁编辑器。 |
名称 | 描述 |
---|---|
<editor-content /> | 这里将呈现内容。 |
<editor-menu-bar /> | 这里将显示一个菜单栏。 |
<editor-menu-bubble /> | 此处将呈现菜单气泡。 |
<editor-floating-menu /> | 这里将显示一个浮动菜单。 |
该<editor-menu-bar />
组件是无渲染的,并且将通过作用域插槽接收一些属性。
属性 | 类型 | 描述 |
---|---|---|
commands | Array | 所有命令的列表。 |
isActive | Object | 用于检查所选文本是节点还是标记的函数对象。`isActive。{node |
getMarkAttrs | Function | 获取您选择的所有标记属性的函数。 |
getNodeAttrs | Function | 获取所选所有节点属性的函数。 |
focused | Boolean | 编辑器是否专注。 |
focus | Function | 聚焦编辑器的功能。 |
v1.27.1(04/24/2020)