Vue.js的RTF编辑器– Tiptap

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>

编辑器属性

属性类型默认描述
contentObject|StringnullProsemirror使用的编辑器状态对象。您还可以将HTML传递到content广告位。两者同时使用时,该content插槽将被忽略。
editorPropsObject{}Prosemirror editorProps列表。
editableBooleantrue设置为false编辑器时为只读。
autoFocusBooleanfalse将编辑器集中在init上。
extensionsArray[]编辑器使用的扩展名列表。这可能是NodesMarksPlugins
useBuiltInExtensionsBooleantrue默认情况下,tiptap增加了DocParagraph并且Text节点到Prosemirror架构。
dropCursorObject{}配置为prosemirror-dropcursor
parseOptionsObject{}Prosemirror parseOptions的列表。
onInitFunctionundefined这将在初始化时返回当前stateviewProsemirror 的Object 。
onFocusFunctionundefined这将返回一个对象,其焦点为event和和当前stateviewProsemirror。
onBlurFunctionundefined这将在模糊时返回具有event和当前stateviewProsemirror 的对象。
onUpdateFunctionundefined这将返回一个带有stateProsemirror,a getJSON()getHTML()function以及当前transaction变化的对象。

编辑器方法

方法争论描述
setContentcontent, emitUpdate, parseOptions替换当前内容。您可以传递HTML字符串或JSON文档。emitUpdate默认为falseparseOptions默认为构造函数中提供的那些。
clearContentemitUpdate清除当前内容。emitUpdate默认为false
setOptionsoptions覆盖当前的编辑器属性。
registerPluginplugin, 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 />组件是无渲染的,并且将通过作用域插槽接收一些属性。

属性类型描述
commandsArray所有命令的列表。
isActiveObject用于检查所选文本是节点还是标记的函数对象。`isActive。{node
getMarkAttrsFunction获取您选择的所有标记属性的函数。
getNodeAttrsFunction获取所选所有节点属性的函数。
focusedBoolean编辑器是否专注。
focusFunction聚焦编辑器的功能。

变更日志:

v1.27.1(04/24/2020)

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