Github で編集する

Quillをカスタマイズする方法

Quill はカスタマイズと拡張を念頭に置いて設計されました。これは、きめ細かく明確に定義されたエディターコアを実装することで実現されます。API。コアは次のように強化されます。モジュール、同じものを使用してAPIにアクセスできます。

一般に、一般的なカスタマイズは次のように処理されます。構成、ユーザーインターフェイスによるテーマおよび CSS による機能モジュール、およびエディターのコンテンツ羊皮紙。

構成

Quill は Configuration™ よりも Code を優先しますが、非常に一般的なニーズ、特に同等のコードが長かったり複雑になる場合には、Quill が提供するサービスを提供します。構成オプション。これは、カスタム機能を実装する必要があるかどうかを判断するために最初に検討するのに適した場所です。

最も強力なオプションの 2 つは、modulesとtheme。個々の機能を追加または削除するだけで、Quill でできることやできることを大幅に変更または拡張できます。モジュールまたは別のものを使用するテーマ。

テーマ

Quill は標準ツールバーテーマを正式にサポートしています雪およびフローティングツールチップテーマバブル。 Quill は多くの従来のエディタのように iframe 内に制限されていないため、既存のテーマの 1 つを使用して、CSS だけで多くの視覚的な変更を行うことができます。

UI インタラクションを大幅に変更したい場合は、theme設定オプションを使用すると、スタイルのない Quill エディターが得られます。ただし、すべてのブラウザでスペースが表示され、順序付けられたリストに適切な番号が付けられるようにするなど、最小限のスタイルシートを含める必要があります。

<link rel="stylesheet" href="https://cdn.quilljs.com/1.3.6/quill.core.css">

そこから、カスタムドロップダウンやツールチップなどの独自の UI 要素を実装して添付できます。の最後のセクション羊皮紙を使ったクローニング培地では、実際の例を示します。

モジュール

Quill は、機能を強化するモジュールに囲まれた小さな編集コアで構成されるモジュール式アーキテクチャで設計されています。この機能の一部は編集に非常に不可欠です。歴史元に戻すとやり直しを管理するモジュール。すべてのモジュールが同じパブリックを使用するため、API開発者に公開されているため、必要に応じてコアモジュールを交換することも可能です。

Quill のコア自体と同様に、多くのモジュール追加の構成オプションと API を公開します。モジュールの交換を決定する前に、そのドキュメントを参照してください。多くの場合、必要なカスタマイズは構成または API 呼び出しとしてすでに実装されています。

それ以外の場合、既存のモジュールがすでにカバーしている機能を大幅に変更したい場合は、単にそのモジュールを含めない (またはテーマにデフォルトで含まれている場合は明示的に除外する) ことができ、同じものを使用して Quill の外部で好みに合わせて機能を実装できます。APIデフォルトのモジュールが使用します。

var quill = new Quill('#editor', {
  modules: {
    toolbar: false    // Snow includes toolbar by default
  },
  theme: 'snow'
});

いくつかのモジュール—クリップボード、キーボード、と歴史- 提供する API に応じてコア機能として含める必要があります。たとえば、「元に戻す」と「やり直し」はエディターの基本的な期待される機能ですが、これを処理するネイティブブラウザーの動作は一貫性がなく、予測できません。 History モジュールは、独自の Undo Manager を実装し、公開することでギャップを埋めます。undo()とredo()APIとして。

それでも、Quill のモジュラー設計に忠実でありながら、History モジュールを置き換える独自の Undo マネージャーを実装することで、Undo と Redo (またはその他のコア機能) の動作方法を大幅に変更できます。同じ API インターフェイスを実装している限り、Quill は代替モジュールを喜んで使用します。これを最も簡単に行うには、既存のモジュールを継承し、変更するメソッドを上書きします。を見てください。モジュールコアを上書きする非常に簡単な例のドキュメントクリップボードモジュール。

最後に、既存のモジュールでは提供されていない機能を追加することもできます。この場合、これを Quill モジュールとして編成すると便利かもしれません。カスタムモジュールの構築ガイドカバー。もちろん、このロジックを Quill から切り離してアプリケーションコード内に保持することも確かに有効です。

コンテンツとフォーマット

Quill では、ドキュメントモデルを通じて理解できるコンテンツと形式の変更と拡張が可能です。羊皮紙。コンテンツと形式は、Parchment ではブロットまたは属性として表され、DOM のノードまたは属性にほぼ対応します。

クラスとインライン

Quill は可能な場合、インラインスタイル属性の代わりにクラスを使用しますが、両方とも選択できるように実装されています。この実際の例は次のように実装されています。遊び場のスニペット。

var ColorClass = Quill.import('attributors/class/color');
var SizeStyle = Quill.import('attributors/style/size');
Quill.register(ColorClass, true);
Quill.register(SizeStyle, true);

// Initialize as you would normally
var quill = new Quill('#editor', {
  modules: {
    toolbar: true
  },
  theme: 'snow'
});

アトリビュータのカスタマイズ

特定のアトリビュータを選択するだけでなく、既存のアトリビュータをカスタマイズすることもできます。追加のフォントを追加するためのフォントホワイトリストの例を次に示します。

var FontAttributor = Quill.import('attributors/class/font');
FontAttributor.whitelist = [
  'sofia', 'slabo', 'roboto', 'inconsolata', 'ubuntu'
];
Quill.register(FontAttributor, true);

これらのクラスのスタイルを CSS ファイルに追加する必要があることに注意してください。

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
.ql-font-roboto {
  font-family: 'Roboto', sans-serif;
}
</style>

ブロットのカスタマイズ

ブロットで表される形式もカスタマイズできます。ここでは、太字の書式設定を表すために使用される DOM ノードを変更する方法を示します。

var Bold = Quill.import('formats/bold');
Bold.tagName = 'B';   // Quill uses <strong> by default
Quill.register(Bold, true);

// Initialize as you would normally
var quill = new Quill('#editor', {
  modules: {
    toolbar: true
  },
  theme: 'snow'
});

ブロットの拡張

既存の形式を拡張することもできます。以下は、内容の書式設定を許可しないリスト項目の簡単な ES6 実装です。コードブロックはまさにこの方法で実装されます。

var ListItem = Quill.import('formats/list/item');

class PlainListItem extends ListItem {
  formatAt(index, length, name, value) {
    if (name === 'list') {
      // Allow changing or removing list format
      super.formatAt(name, value);
    }
    // Otherwise ignore
  }
}

Quill.register(PlainListItem, true);

// Initialize as you would normally
var quill = new Quill('#editor', {
  modules: {
    toolbar: true
  },
  theme: 'snow'
});

を呼び出すことで、利用可能なブロットとアトリビュータのリストを表示できます。console.log(Quill.imports);。このオブジェクトの直接変更はサポートされていません。使用Quill.registerその代わり。

Parchment、Blots、および Attributors に関する完全なリファレンスは、Parchment 独自のリンクにあります。お読みください。詳しいウォークスルーについては、以下をご覧ください。羊皮紙を使ったクローニング培地Quill はプレーンテキストだけを理解することから始まり、すべての形式を追加します中くらいサポートします。ほとんどの場合、フォーマットのほとんどはすでに Quill に実装されているため、フォーマットを最初から構築する必要はありませんが、このより深いレベルで Quill がどのように機能するかを理解することは依然として役立ちます。

なぜQuillなのか Quill をビルドパイプラインに追加する