vue.js 渲染函数_Vue.js的不可渲染且可扩展的RTF编辑器[通俗易懂]

vue.js 渲染函数

轻按 (tiptap)

A rich-text editor for Vue.js.

Vue.js的富文本编辑器。

什么是无renderless ？ (What means renderless?)

With renderless components you’ll have (almost) full control over markup and styling. I don’t want to tell you what a menu should look like or where it should be rendered in the DOM. That’s all up to you. There is also a good article about renderless components by Adam Wathan.

使用无渲染组件，您将(几乎)完全控制标记和样式。 我不想告诉您菜单的外观或在DOM中的显示位置。 这完全取决于您。 Adam Wathan也有一篇关于无渲染组件的好文章 。

数据如何存储在后台？ (How is the data stored under the hood?)

You can save your data as a raw HTML string or can get a JSON-serializable representation of your document. And of course, you can pass these two types back to the editor.

您可以将数据另存为原始HTML字符串，也可以获取文档的JSON序列化表示。 当然，您可以将这两种类型传递回编辑器。

例子 (Examples)

To check out some live examples, visit tiptap.scrumpy.io.

要查看一些实时示例，请访问tiptap.scrumpy.io 。

安装 (Installation)

npm install tiptap

or

要么

yarn add tiptap

基本设定 (Basic Setup)

<template>
  <editor>
    <!-- Add HTML to the scoped slot called `content` -->
    <div slot="content" slot-scope="props">
      <p>Hi, I'm just a boring paragraph</p>
    </div>
  </editor>
</template>

<script>
// Import the editor
import { Editor } from 'tiptap'

export default {
  components: {
    Editor,
  },
}
</script>

编辑器属性 (Editor Properties)

范围插槽 (Scoped Slots)

插槽属性 (Slot Properties)

The menubar and menububble slot will receive some properties.

menubar和menubar menububble槽将接收一些属性。

扩展名 (Extensions)

By default, the editor will only support paragraphs. Other nodes and marks are available as extensions. There is a package called tiptap-extensions with the most basic nodes, marks, and plugins.

默认情况下，编辑器仅支持段落。 其他节点和标记可用作扩展 。 有一个名为tiptap-extensions的程序包，其中包含最基本的节点，标记和插件。

可用扩展 (Available Extensions)

<template>
  <editor :extensions="extensions">
    <div slot="content" slot-scope="props">
      <h1>Yay Headlines!</h1>
      <p>All these <strong>cool tags</strong> are working now.</p>
    </div>
  </editor>
</template>

<script>
import { Editor } from 'tiptap'
import {
  // Nodes
  BlockquoteNode,
  BulletListNode,
  CodeBlockNode,
  CodeBlockHighlightNode,
  HardBreakNode,
  HeadingNode,
  ImageNode,
  ListItemNode,
  OrderedListNode,
  TodoItemNode,
  TodoListNode,

  // Marks
  BoldMark,
  CodeMark,
  ItalicMark,
  LinkMark,
  StrikeMark,
  UnderlineMark,

  // General Extensions
  HistoryExtension,
  PlaceholderExtension,
} from 'tiptap-extensions'

export default {
  components: {
    Editor,
  },
  data() {
    return {
      extensions: [
        new BlockquoteNode(),
        new BulletListNode(),
        new CodeBlockNode(),
        new HardBreakNode(),
        new HeadingNode({ maxLevel: 3 }),
        new ImageNode(),
        new ListItemNode(),
        new OrderedListNode(),
        new TodoItemNode(),
        new TodoListNode(),
        new BoldMark(),
        new CodeMark(),
        new ItalicMark(),
        new LinkMark(),
        new StrikeMark(),
        new UnderlineMark(),
        new HistoryExtension(),
        new PlaceholderExtension(),
      ],
    }
  },
}
</script>

创建自定义扩展 (Create Custom Extensions)

The most powerful feature of tiptap is that you can create your own extensions. There are 3 types of extensions.

Tiptap最强大的功能是您可以创建自己的扩展程序。 有3种扩展名。

扩展类 (Extension Class)

节点|标记类 (Node|Mark Class)

创建一个节点 (Create a Node)

Let’s take a look at a real example. This is basically how the default blockquote node from tiptap-extensions looks like.

让我们看一个真实的例子。 这基本上是来自tiptap-extensions的默认blockquote节点的外观。

import { Node } from 'tiptap'
import { wrappingInputRule, setBlockType, wrapIn } from 'tiptap-commands'

export default class BlockquoteNode extends Node {

  // choose a unique name
  get name() {
    return 'blockquote'
  }

  // the prosemirror schema object
  // take a look at https://prosemirror.net/docs/guide/#schema for a detailed explanation
  get schema() {
    return {
      content: 'block+',
      group: 'block',
      defining: true,
      draggable: false,
      // define how the editor will detect your node from pasted HTML
      // every blockquote tag will be converted to this blockquote node
      parseDOM: [
        { tag: 'blockquote' },
      ],
      // this is how this node will be rendered
      // in this case a blockquote tag with a class called `awesome-blockquote` will be rendered
      // the '0' stands for its text content inside
      toDOM: () => ['blockquote', { class: 'awesome-blockquote' }, 0],
    }
  }

  // this command will be called from menus to add a blockquote
  // `type` is the prosemirror schema object for this blockquote
  // `schema` is a collection of all registered nodes and marks
  command({ type, schema }) {
    return wrapIn(type)
  }

  // here you can register some shortcuts
  // in this case you can create a blockquote with `ctrl` + `>`
  keys({ type }) {
    return {
      'Ctrl->': wrapIn(type),
    }
  }

  // a blockquote will be created when you are on a new line and type `>` followed by a space
  inputRules({ type }) {
    return [
      wrappingInputRule(/^\s*>\s$/, type),
    ]
  }

}

创建节点作为Vue组件 (Create a Node as a Vue Component)

The real power of the nodes comes in combination with Vue components. Let us build an iframe node, where you can change its URL (this can also be found in our examples).

节点的真正功能与Vue组件结合在一起。 让我们构建一个iframe节点，您可以在其中更改其URL(这也可以在我们的示例中找到)。

import { Node } from 'tiptap'

export default class IframeNode extends Node {

  get name() {
    return 'iframe'
  }

  get schema() {
    return {
      // here you have to specify all values that can be stored in this node
      attrs: {
        src: {
          default: null,
        },
      },
      group: 'block',
      selectable: false,
      // parseDOM and toDOM is still required to make copy and paste work
      parseDOM: [{
        tag: 'iframe',
        getAttrs: dom => ({
          src: dom.getAttribute('src'),
        }),
      }],
      toDOM: node => ['iframe', {
        src: node.attrs.src,
        frameborder: 0,
        allowfullscreen: 'true',
      }],
    }
  }

  // return a vue component
  // this can be an object or an imported component
  get view() {
    return {
      // there are some props available
      // `node` is a Prosemirror Node Object
      // `updateAttrs` is a function to update attributes defined in `schema`
      // `editable` is the global editor prop whether the content can be edited
      props: ['node', 'updateAttrs', 'editable'],
      data() {
        return {
          // save the iframe src in a new variable because `this.node.attrs` is immutable
          url: this.node.attrs.src,
        }
      },
      methods: {
        onChange(event) {
          this.url = event.target.value

          // update the iframe url
          this.updateAttrs({
            src: this.url,
          })
        },
      },
      template: `
        <div class="iframe">
          <iframe class="iframe__embed" :src="url"></iframe>
          <input class="iframe__input" type="text" :value="url" @input="onChange" v-if="editable" />
        </div>
      `,
    }
  }

}

建立菜单 (Building a Menu)

This is a basic example of building a custom menu. A more advanced menu can be found at the examples page.

这是构建自定义菜单的基本示例。 在示例页面上可以找到更高级的菜单。

<template>
  <editor :extensions="extensions">
    <div slot="menubar" slot-scope="{ nodes, marks }">
      <div v-if="nodes && marks">
        <button :class="{ 'is-active': nodes.heading.active({ level: 1 }) }" @click="nodes.heading.command({ level: 1 })">
          H1
        </button>
        <button :class="{ 'is-active': marks.bold.active() }" @click="marks.bold.command()">
          Bold
        </button>
      </div>
    </div>
    <div slot="content" slot-scope="props">
      <p>This text can be made bold.</p>
    </div>
  </editor>
</template>

<script>
import { Editor } from 'tiptap'
import { HeadingNode, BoldMark } from 'tiptap-extensions'

export default {
  components: {
    Editor,
  },
  data() {
    return {
      extensions: [
        new HeadingNode({ maxLevel: 3 }),
        new BoldMark(),
      ],
    }
  },
}
</script>

开发设置 (Development Setup)

Currently, only Yarn is supported for development because of a feature called workspaces we are using here.

目前，由于我们在此使用的称为工作区的功能，仅支持Yarn进行开发。

# install dependencies
yarn install

# serve examples at localhost:3000
yarn start

# build dist files for packages
yarn build:packages

# build dist files for examples
yarn build:examples

翻译自: https://vuejsexamples.com/a-renderless-and-extendable-rich-text-editor-for-vue-js/

vue.js 渲染函数