vue的tap插件_Vue.js的RTF编辑器– Tiptap

用于Vue.js应用程序的无呈现(完全可自定义)和可扩展的WYSIWYG RTF编辑器。

安装和下载：

# Yarn

$ yarn add tiptap

# NPM

$ npm install tiptap --save

基本用法：

1.将您选择的组件导入项目。

Editor ：核心课程

EditorContent：核心组件

EditorMenuBar：基本菜单栏

EditorMenuBubble：在附加到所选文本的气泡中显示菜单栏

EditorFloatingMenu：在浮动面板中显示菜单栏

import { Editor, EditorContent, EditorMenuBar, EditorMenuBubble, EditorFloatingMenu } from 'tiptap';

2.将EditorContent组件添加到模板。

3.注册组件并创建一个基本编辑器。

export default {

components: {

EditorContent,

},

data() {

return {

editor: null,

}

},

mounted() {

this.editor = new Editor({

content: '

默认的内容

',

})

}

}

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.安装和导入扩展。所有可能的扩展：

块引用

代码块

HardBreak

标题

订购清单

项目符号列表

项目清单

待办事项

待办事项清单

胆大

码

斜体

链接

罢工

强调

历史

基本设定

// 导入编辑器

import { Editor, EditorContent } from 'tiptap'

export default {

components: {

EditorContent,

},

data() {

return {

editor: null,

}

},

mounted() {

this.editor = new Editor({

content: '

这只是一段无聊的段落

',

})

},

beforeDestroy() {

this.editor.destroy()

},

}

编辑器属性

属性类型默认描述contentObject|StringnullProsemirror使用的编辑器状态对象。您还可以将HTML传递到content广告位。两者同时使用时，该content插槽将被忽略。

editableBooleantrue设置为false编辑器时为只读。

autoFocusBooleanfalse将编辑器集中在init上。

extensionsArray[]编辑器使用的扩展名列表。这可能是Nodes，Marks或Plugins。

useBuiltInExtensionsBooleantrue默认情况下，tiptap增加了Doc，Paragraph并且Text节点到Prosemirror架构。

dropCursorObject{}配置为prosemirror-dropcursor。

parseOptionsObject{}

onInitFunctionundefined这将在初始化时返回当前state和viewProsemirror 的Object 。

onFocusFunctionundefined这将返回一个对象，其焦点为event和和当前state和viewProsemirror。

onBlurFunctionundefined这将在模糊时返回具有event和当前state和viewProsemirror 的对象。

onUpdateFunctionundefined这将返回一个带有stateProsemirror，a getJSON()和getHTML()function以及当前transaction变化的对象。

编辑器方法

方法争论描述setContentcontent, emitUpdate, parseOptions替换当前内容。您可以传递HTML字符串或JSON文档。emitUpdate默认为false。parseOptions默认为构造函数中提供的那些。

clearContentemitUpdate清除当前内容。emitUpdate默认为false。

setOptionsoptions覆盖当前的编辑器属性。

registerPluginplugin， handlePlugins注册一个Prosemirror插件。您可以传递handlePlugins带有参数的函数(plugin, oldPlugins)来定义newPlugins将被调用的顺序。handlePlugins默认为推plugin到的前面oldPlugins。

getJSON–将当前内容获取为JSON。

getHTML–以HTML格式获取当前内容。

focus–关注编辑器。

blur–模糊编辑器。

destroy–销毁编辑器。

组件

名称描述这里将呈现内容。

这里将显示一个菜单栏。

此处将呈现菜单气泡。

这里将显示一个浮动菜单。

编辑器菜单栏

该组件是无渲染的，并且将通过作用域插槽接收一些属性。

属性类型描述commandsArray所有命令的列表。

isActiveObject用于检查所选文本是节点还是标记的函数对象。`isActive。{node

getMarkAttrsFunction获取您选择的所有标记属性的函数。

getNodeAttrsFunction获取所选所有节点属性的函数。

focusedBoolean编辑器是否专注。

focusFunction聚焦编辑器的功能。

变更日志：

v1.27.1(04/24/2020)

isActive()现在可用于多个属性

更改registerPlugin以在扩展插件之后添加插件

更新依赖