How to implement a lightweight rich text editor using Vue?

With the continuous development of front-end technology, more and more projects need to implement rich text editors, and lightweight rich text editors have become the pursuit of many developers. As one of the most popular front-end frameworks at present, Vue is flexible and easy to use, so it is very suitable for implementing a lightweight rich text editor. This article will introduce how to use Vue to implement a lightweight rich text editor.

1. Install and introduce the rich text editor library

The Vue framework itself does not have the function of a rich text editor, and a third-party library needs to be introduced. Common rich text editor libraries include Quill, TinyMCE, CKEditor, etc. This article takes Quill as an example. Quill is an open source modern rich text editor that is easy to extend and provides many customizable themes and plug-ins.

The method to install Quill is very simple, just use the npm command directly:

npm install quill

To introduce Quill in Vue, you must use the import method and introduce Quill in the component script:

import Quill from 'quill'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Among them, quill.core.css must be introduced, quill.snow.css and quill.bubble.css are the two themes that come with Quill , the default is snow.

2. Create a rich text editor component

In Vue, a component is an independent interface part. In order to facilitate subsequent use and maintenance, we need to convert the rich text The editor is encapsulated into a component. Before creating components, we need to understand how to use Quill.

The basic usage of Quill is very simple, just create an empty div element in HTML and instantiate it in JavaScript. To implement the operation just described in Vue, it can be executed in the mounted() life cycle, as shown below:

<template>
  <div ref="editor"></div>
</template>

<script>
  export default {
    name: 'RichTextEditor',
    mounted () {
      this.quill = new Quill(this.$refs.editor, {
        modules: { /* 配置 Quill 的 options 和 modules */ },
        theme: 'snow' /* 选择一个主题 */
      })
    },
    methods: {
      // 导出 HTML 或纯文本格式化后的内容
      getContent () {
        return this.quill.root.innerHTML.trim()
      }
    }
  }
</script>

<style lang="scss" scoped>
  /* 在样式中设置组件宽度和高度 */
  .ql-container {
    width: 300px;
    height: 200px;
  }
  .ql-editor {
    height: 150px;
  }
</style>

In the above code, we first create an empty space in the template div, and then use the Quill object in the mounted() life cycle to instantiate the rich text editor. As you can see, when instantiating the rich text editor, we use the options and modules configuration items of the Quill object, and also specify the theme. These can be found in the official Quill documentation.

Finally, we use the getContent() method to get the content in the editor. This is an encapsulated method, and other formatting methods can be added according to specific needs.

3. Configuring Rich Text Editor

In order to achieve a better user experience, we need to add some common toolbars, formatting and language support to Quill's configuration and other functions. Quill's configuration is very rich, here are some examples:

this.quill = new Quill(this.$refs.editor, {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline', 'strike'],
      ['blockquote', 'code-block'],
      [{ list: 'ordered' }, { list: 'bullet' }],
      [{ script: 'sub' }, { script: 'super' }],
      [{ indent: '-1' }, { indent: '+1' }],
      [{ direction: 'rtl' }],
      [{ color: [] }, { background: [] }],
      [{ font: [] }],
      [{ align: [] }],
      ['clean']
    ],
    syntax: {
      highlight: text => hljs.highlightAuto(text).value
    },
    history: {
      delay: 1000,
      maxStack: 50,
      userOnly: true
    }
  },
  theme: 'snow',
  placeholder: '请输入内容 ...',
  readOnly: false,
  scrollingContainer: '.ql-editor',
  language: 'zh-CN'
})

In the above code, we select the modules we need to use by changing the modules attribute. The Toolbar module provides a customizable toolbar in which you can add some commonly used buttons, such as Paragraph, Bold, Italic, Underline, Strike, List, Quote, Code, Font, Align, etc.

In addition, Quill also supports Syntax plug-in and History plug-in. The Syntax plug-in enables code highlighting in the editor, while the History plug-in records and provides undo and redo operations.

In options, we can set the placeholder attribute and the readOnly attribute. The placeholder attribute is displayed in the blank area of ​​the editor and provides editing prompt text; the readOnly attribute controls the editor. Whether it can be edited.

In the language attribute, we can set the language, here we selected Chinese.

4. Using the Rich Text Editor Component

Using this component in a Vue application is very simple:

<template>
  <RichTextEditor ref="editor" />
</template>

<script>
  import RichTextEditor from '@/components/RichTextEditor.vue'

  export default {
    components: {
      RichTextEditor
    },
    methods: {
      // 获取富文本编辑器中的内容
      getContent () {
        console.log(this.$refs.editor.getContent())
      }
    }
  }
</script>

In the above code, we just Use the component as a tag, then use $refs to get the component instance, and use the getContent() method to get the content in the rich text editor.

In summary, through this article you can easily master the method of implementing a lightweight rich text editor in Vue. Using the Vue Quill library, you can quickly and easily create a powerful rich text editor.

The above is the detailed content of How to implement a lightweight rich text editor using Vue?. For more information, please follow other related articles on the PHP Chinese website!