Vue を使用して軽量のリッチ テキスト エディターを実装するにはどうすればよいですか?

フロントエンド テクノロジの継続的な開発に伴い、リッチ テキスト エディタを実装する必要があるプロジェクトがますます増えており、軽量のリッチ テキスト エディタが多くの開発者の追求となっています。 Vue は現在最も人気のあるフロントエンド フレームワークの 1 つであり、柔軟で使いやすいため、軽量のリッチ テキスト エディターの実装に非常に適しています。この記事では、Vue を使用して軽量のリッチ テキスト エディターを実装する方法を紹介します。

1. リッチ テキスト エディター ライブラリをインストールして導入する

Vue フレームワーク自体にはリッチ テキスト エディターの機能がないため、サードパーティのライブラリを使用する必要があります。紹介された。一般的なリッチ テキスト エディター ライブラリには、Quill、TinyMCE、CKEditor などが含まれます。この記事では Quill を例に挙げます。Quill は、拡張が簡単で、多くのカスタマイズ可能なテーマとプラグインを提供する、オープン ソースの最新のリッチ テキスト エディターです。

Quill をインストールする方法は非常に簡単です。npm コマンドを直接使用するだけです:

npm install quill

Vue に Quill を導入するには、インポート メソッドを使用し、コンポーネント スクリプトに Quill を導入する必要があります。

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

そのうち、quill.core.css を導入する必要があります。quill.snow.css と quill.bubble.css の 2 つです。 Quill に付属するテーマ、デフォルトは snow です。

2. リッチ テキスト エディター コンポーネントを作成する

Vue では、コンポーネントは独立したインターフェイス パーツです。その後の使用とメンテナンスを容易にするために、リッチ テキスト エディター コンポーネントを変換する必要があります。 text エディターはコンポーネントにカプセル化されています。コンポーネントを作成する前に、Quille の使用方法を理解する必要があります。

Quill の基本的な使用法は非常に簡単です。HTML で空の div 要素を作成し、JavaScript でそれをインスタンス化するだけです。ここで説明した操作を Vue で実装するには、以下に示すように、mounted() ライフ サイクルで実行できます。

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

上記のコードでは、最初に空のスペースを作成します。テンプレート div を作成し、mounted() ライフサイクルで Quill オブジェクトを使用してリッチ テキスト エディターをインスタンス化します。ご覧のとおり、リッチ テキスト エディターをインスタンス化するときは、Quill オブジェクトのオプションとモジュール構成項目を使用し、テーマも指定します。これらは Quill の公式ドキュメントに記載されています。

最後に、getContent() メソッドを使用してエディター内のコンテンツを取得します。これはカプセル化されたメソッドであり、特定のニーズに応じて他の書式設定メソッドを追加できます。

3. リッチ テキスト エディターの構成

より良いユーザー エクスペリエンスを実現するには、いくつかの共通ツールバー、書式設定、および言語サポートを Quill の構成およびその他の機能に追加する必要があります。 Quill の構成は非常に豊富です。ここにいくつかの例を示します。

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'
})

上記のコードでは、modules 属性を変更することで、使用する必要があるモジュールを選択します。ツールバー モジュールは、段落、太字、斜体、下線、取り消し線、リスト、引用符、コード、フォント、整列などの一般的に使用されるボタンを追加できるカスタマイズ可能なツールバーを提供します。

さらに、Quill は Syntax プラグインと History プラグインもサポートしています。 Syntax プラグインはエディターでのコードの強調表示を有効にし、History プラグインは元に戻す操作とやり直し操作を記録して提供します。

options では、プレースホルダー属性と readOnly 属性を設定できます。プレースホルダー属性はエディターの空白領域に表示され、編集プロンプト テキストを提供します。readOnly 属性はコントロールを制御します編集できるかどうか。

language 属性では、言語を設定できます。ここでは中国語を選択しました。

4. リッチ テキスト エディター コンポーネントの使用

Vue アプリケーションでこのコンポーネントを使用するのは非常に簡単です:

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

上記のコードでは、次のようにするだけです。コンポーネントをタグとして指定し、$refs を使用してコンポーネント インスタンスを取得し、getContent() メソッドを使用してリッチ テキスト エディターでコンテンツを取得します。

要約すると、この記事を通じて、Vue で軽量のリッチ テキスト エディターを実装する方法を簡単にマスターできます。 Vue Quill ライブラリを使用すると、強力なリッチ テキスト エディターをすばやく簡単に作成できます。

以上がVue を使用して軽量のリッチ テキスト エディターを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。