Vue.js的RTF编辑器– Tiptap

插件名称	tiptap
发布时间	2020年6月15日
插件作者	heyscrumpy

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

这是Vue.js 的1＃富文本编辑器。基于Prosemirror。

安装和下载：

# 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组件添加到模板。

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

块引用
代码块
HardBreak
标题
订购清单
项目符号列表
项目清单
待办事项
待办事项清单
胆大
码
斜体
链接
罢工
强调
历史

基本设定

<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）

isActive（）现在可用于多个属性
更改registerPlugin以在扩展插件之后添加插件
更新依赖