Quill の各バージョンは、次のようなさまざまなソースから構築され、すぐに使用できます。故宮またはそのCDN。ただし、アプリケーションのビルド パイプラインの一部としてソースから Quill をビルドしたいユースケースもあるでしょう。このような願望がまだ浮かんでいないとしても、心配する必要はありません。 Quill を使用する最も簡単な方法は、事前に構築されたバージョンを使用することです。
Quill は以下を使用して構築されますウェブパックこのガイドは主に Webpack ユーザーを対象としています。ただし、一部の原則は他のビルド環境にも適用される場合があります。
このガイドで説明されているすべての最小限の動作例は、次の場所にあります。Quill-webpack-example。
Webpack と適切なローダーを開発依存関係としてアプリに追加する必要があります。 Parchment をソースからビルドする場合も、Typescript コンパイラーが必要です。
babel-loader、babel-preset-es2015ts-loader、typescripthtml-loaderWebpack 構成ファイルには、それぞれのエントリ ソース ファイルを指すように Quill と Parchment のエイリアスを付ける必要もあります。これがないと、Webpack はソースからビルドするのではなく、NPM に含まれる事前にビルドされたファイルを使用します。
Quill はビルドとともに配布されますquill.jsとquill.core.js。両方のビルドのエントリ ファイルの目的は、Quill.jsとコア.js, 必要な依存関係をインポートして登録することです。おそらく、使用する形式、モジュール、またはテーマのみを含む同様のエントリ ポイントがアプリケーション内に必要になるでしょう。
import Quill from 'quill/core';
import Toolbar from 'quill/modules/toolbar';
import Snow from 'quill/themes/snow';
import Bold from 'quill/formats/bold';
import Italic from 'quill/formats/italic';
import Header from 'quill/formats/header';
Quill.register({
'modules/toolbar': Toolbar,
'themes/snow': Snow,
'formats/bold': Bold,
'formats/italic': Italic,
'formats/header': Header
});
export default Quill;
ルールは簡単に上書きできるため、スタイルシートの領域ではソースから構築してもそれほどメリットはありません。しかし、css-loaderのチルダ接頭辞は、アプリケーションの CSS ファイルに Quill スタイルを含めるのに役立つ場合があります。
@import "~quill/dist/quill.core.css"
// Rest of your application CSS
を見てみましょうQuill-webpack-example最小限の動作例として。