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

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

WBOY

リリース： 2023-06-25 19:13:35

オリジナル

4100 人が閲覧しました

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

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

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 です。

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

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

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

より良いユーザーエクスペリエンスを実現するには、いくつかの共通ツールバー、書式設定、および言語サポートを 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 属性では、言語を設定できます。ここでは中国語を選択しました。

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

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 サイトの他の関連記事を参照してください。