Welcome

カキノタblog

自分の興味あるテーマを中心に、図解多めに記事を作成していきたいと思います。

Quill テーマ

Quillで公式にサポートされているテーマはSnowとBubbleの2つです。テーマを使うと、最小限の労力でエディターの外観を簡単に作成できます。

設定方法

Bubbleテーマ

簡単なTooltipベースのテーマであり、文字列を選択するとバブルのようにボタン群が表示されます。

// テーマ用のcssを追加する
<link rel="stylesheet" href="//cdn.quilljs.com/1.3.6/quill.bubble.css">

<script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
<script>
	var quill = new Quill('.editor', {
		theme: 'bubble' // テーマを指定する
	});
</script>

Demo:

Bubble Theme - Quill Rich Text Editor

Snowテーマ

シンプルでフラットなToolbar型のテーマです。

// テーマ用のcssを追加する
<link rel="stylesheet" href="//cdn.quilljs.com/1.3.6/quill.snow.css">

<script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
<script>
	var quill = new Quill('.editor', {
		theme: 'snow' // テーマを指定する
	});
</script>

Demo:

Snow Theme - Quill Rich Text Editor

参考リンク