wysiwyg富文本编辑器_用于Vuetify组件的WYSIWYG编辑器，通过vuetify简化了集成技巧

最新推荐文章于 2024-05-17 09:46:55 发布

cuk5340

最新推荐文章于 2024-05-17 09:46:55 发布

阅读量537

点赞数

文章标签： python java javascript 编程语言机器学习 ViewUI

原文链接：https://vuejsexamples.com/wysiwyg-editor-for-vuetify-component-simplifies-integration-tiptap-with-vuetify/

版权

wysiwyg富文本编辑器

窃听 (tiptap-vuetify)

WYSIWYG editor for Vuetify. Component simplifies integration tiptap with vuetify.

Vuetify的所见即所得编辑器。组件通过vuetify简化了集成操作。

View demo 查看演示 View Github 查看Github

特征 (Features)

used vuetify components
二手的vuetify组件
support for different types of icons (fa, md, mdi)
支持不同类型的图标( fa ， md ， mdi )
internationalization (en, fr, pl, es, ru, uk, ptbr), with automatic detection of the current language through the Vuetify
国际化(en，fr，pl，es，ru，uk，ptbr)，并通过Vuetify自动检测当前语言
easy to start using
易于开始使用
props and events are available
道具和活动可用
TypeScript support
TypeScript支持
the project is ready to actively develop if there is support (stars)!
如果有支持，项目就可以积极发展了！
the ability to create and use your own extensions
创建和使用自己的扩展的能力
choose where the extension buttons should be displayed: in the toolbar or in the bubble menu
选择扩展按钮的显示位置：在工具栏或气泡菜单中
Vuetify 2.x and 1.x support
Vuetify 2.x和1.x支持

安装 (Installation)

yarn add tiptap-vuetify
# Or 
npm install --save tiptap-vuetify

开始吧 (Get started)

NPM(ES模块) (NPM (ES modules))

Installing the package and Vuetify 2 from scratch:
从头开始安装软件包和Vuetify 2：

import Vue from 'vue'
import Vuetify from 'vuetify'
// import plugin
import { TiptapVuetifyPlugin } from 'tiptap-vuetify'
// don't forget to import CSS styles
import 'tiptap-vuetify/dist/main.css'
// Vuetify's CSS styles 
import 'vuetify/dist/vuetify.min.css'


// Vuetify Object (as described in the Vuetify 2 documentation)
const vuetify = new Vuetify()

// use Vuetify's plugin
Vue.use(Vuetify)
// use this package's plugin
Vue.use(TiptapVuetifyPlugin, {
  // the next line is important! You need to provide the Vuetify Object to this place.
  vuetify, // same as "vuetify: vuetify"
  // optional, default to 'md' (default vuetify icons before v2.0.0)
  iconsGroup: 'md'
})

More about vuetify icons you can read here.

您可以在此处阅读有关vuetify图标的更多信息。

Use in your component. Here is a complete example:
在您的组件中使用。这是一个完整的示例：

<template>
  <div>
    <!-- Use the component in the right place of the template -->
    <tiptap-vuetify
      v-model="content"
      :extensions="extensions"
    />
  </div>
</template>

<script>
// import the component and the necessary extensions
import { TiptapVuetify, Heading, Bold, Italic, Strike, Underline, Code, Paragraph, BulletList, OrderedList, ListItem, Link, Blockquote, HardBreak, HorizontalRule, History } from 'tiptap-vuetify'

export default {
  // specify TiptapVuetify component in "components"
  components: { TiptapVuetify },
  data: () => ({
    // declare extensions you want to use
    extensions: [
      History,
      Blockquote,
      Link,
      Underline,
      Strike,
      Italic,
      ListItem,
      BulletList,
      OrderedList,
      [Heading, {
        options: {
          levels: [1, 2, 3]
        }
      }],
      Bold,
      Link,
      Code,
      HorizontalRule,
      Paragraph,
      HardBreak
    ],
    // starting editor's content
    content: `
      <h1>Yay Headlines!</h1>
      <p>All these <strong>cool tags</strong> are working now.</p>
    `
  })
}
</script>

纳克斯特 (Nuxt)

If you have Nuxt.js, here is a description of how to integrate with it.

如果您有Nuxt.js，这里是如何与它集成的描述。

CDN (CDN)

There is another use case with the script tag (CDN version of package):

脚本标记还有另一个用例(软件包的CDN版本)：

<script src="https://unpkg.com/tiptap-vuetify"></script>

要么

<script src="https://cdn.jsdelivr.net/npm/tiptap-vuetify"></script>

The plugin should be installed automatically after connecting the script. The only thing is that the Vuetify object must be set in window.vuetify so that the plugin gets access to it. Write if you have questions.

连接脚本后应自动安装插件。唯一的事情是，必须在window.vuetify设置Vuetify对象，以便插件可以访问它。有问题请写信。

道具 (Props)

占位符 (placeholder)

Placeholder is displayed when there is no content in the editor.

当编辑器中没有内容时，将显示占位符。

How to use:

如何使用：

<tiptap-vuetify
    placeholder="Write something …"
  />

扩展名 (extensions)

You can use the necessary extensions. The corresponding buttons are added automatically (in the order in which you specify the extension).

您可以使用必要的扩展名。相应的按钮会自动添加(按照您指定扩展名的顺序)。

How to import and use them can be seen in the example above.

在上面的示例中可以看到如何导入和使用它们。

Available extensions:

可用的扩展名：

Bold
Bold
Italic
Italic
Strike
Strike
Underline
Underline
Code
Code
CodeBlock
CodeBlock
Paragraph
Paragraph
BulletList
BulletList
OrderedList
OrderedList
ListItem
ListItem
Link
Link
Blockquote
Blockquote
HardBreak
HardBreak
HorizontalRule
HorizontalRule
History
History

I can easily add more.

我可以轻松添加更多。

工具栏属性 (toolbar-attributes)

You can specify your attributes for the toolbar (<v-toolbar> vuetify component).

您可以指定工具栏的属性( <v-toolbar> vuetify组件)。

For example, change the color:

例如，更改颜色：

:toolbar-attributes="{ color: 'yellow' }"

编辑器属性 (editor-properties)

Tiptap Editor properties (passed to the constructor).

提示Editor属性(传递给构造函数)。

You can see the full list of properties here.

您可以在此处查看属性的完整列表。

Only these properties are not available: content, onUpdate, they are used in this package. If you want to add extensions to the extensions property, then use the native-extensions prop of this package.

只有以下属性不可用： content ， onUpdate ，它们在此包中使用。如果要向extensions属性添加扩展，请使用此包的native-extensions属性。

本地扩展 (native-extensions)

How to use:

如何使用：

<tiptap-vuetify
  :native-extensions="nativeExtensions"
/>

// in script:
data () {
  return {
    nativeExtensions: [new TiptapExtension1(), new TiptapExtension2()]
  }
}

输出格式 (output-format)

The format to output from the v-model. This defaults to html

从v模型输出的格式。默认为html

For example, to get json instead:

例如，改为获取json：

<tiptap-vuetify
  output-format="json"
/>

大事记 (Events)

@在里面 (@init)

first argument (object):

第一个参数 (对象)：

{
  // tiptap editor instance
  editor: Editor
}

How to use:

如何使用：

<tiptap-vuetify
  @init="onInit"
/>

插槽 (Slots)

How to use:

如何使用：

Since Vue 2.6.0 (new syntax):
从Vue 2.6.0 (新语法)开始：

<tiptap-vuetify
  v-model="content"
  :extensions="extensions"
  :toolbar-attributes="{ color: 'yellow' }"
>
  <template #toolbar="{ buttons, commands, isActive }">
    <!--You can render the buttons as you wish (you can see in the source code how this is done).-->
    <pre>{{ buttons }}</pre>
  </template>
</tiptap-vuetify>

Before 2.6.0:
在2.6.0之前：

<tiptap-vuetify>
  <div 
    slot="toolbar" 
    slot-scope="{ buttons, commands, isActive }"
  >
    <!--You can render the buttons as you wish (you can see in the source code how this is done).-->
    <pre>{{ buttons }}</pre>
  </div>
</tiptap-vuetify>

Footer of the Editor.

编辑器的页脚。

工具栏之前 (toolbar-before)

You can add content before the toolbar.

您可以在工具栏之前添加内容。

工具栏后 (toolbar-after)

You can add content after the toolbar.

您可以在工具栏后面添加内容。

去做 (TODO)

images uploading (free hosting by default) Relevant issue.
图像上传(默认情况下免费托管) 相关问题。
site with full-docs and examples
带有完整文档和示例的网站
emoticons
表情符号
tests
测试
support for more extensions
支持更多扩展

翻译自: https://vuejsexamples.com/wysiwyg-editor-for-vuetify-component-simplifies-integration-tiptap-with-vuetify/

wysiwyg富文本编辑器

cuk5340

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
wysiwyg富文本编辑器_用于Vuetify组件的WYSIWYG编辑器，通过vuetify简化了集成技巧

wysiwyg富文本编辑器窃听 (tiptap-vuetify)WYSIWYG editor for Vuetify. Component simplifies integration tiptap with vuetify. Vuetify的所见即所得编辑器。组件通过vuetify简化了集成操作。 View demo查看演示 View Github 查看Github 特征 (Fe...
复制链接

扫一扫