スキップしてメイン コンテンツに移動

Quillエディタ

JavaScript(最近は「JS」って表記しているのが多い気がする)でリッチテキストエディタができるQuillを試しています。

わかった人向けな解説が多いので、自分の知識ではマダマダな感じ。
やりたいのは、
・フォント指定でMSゴシック/MS明朝を選択したい
・文字と背景に色をつけたい
・画像を貼り付けて、それのリサイズがしたい
なんだけど、なかなか難しい。

かなり検索しまくっていろんな人の記述をコピペしつつ、とりあえずプロトタイプはできた。

あとはどうやってサーバに送ろう・・・。

※image-resize.min.jsは
  https://github.com/kensnyder/quill-image-drop-module/blob/master/README.md
 を参照



===========================================
HTML
===========================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Quill</title>
<!-- Main Quill library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="http://cdn.quilljs.com/1.3.6/quill.min.js"></script>
<!-- https://github.com/kensnyder/quill-image-drop-module/blob/master/README.md -->
<script src="image-resize.min.js"></script>

<!-- Theme included stylesheets -->
<link href="http://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<link href="http://cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>

<div id="toolbar"></div>
<div id="editor" style="max-height:400px;overflow:auto">
<p><span style="font-size: 16px; font-family: MS ゴシック;"> </span><span style="font-size: 32px; font-family: MS 明朝;">東</span><span style="font-size: 32px; font-family: MS ゴシック; color: rgb(230, 0, 0);">京</span><span style="font-size: 32px; font-family: MS 明朝;">特</span><span style="font-size: 32px; font-family: MS 明朝; color: rgb(0, 138, 0);">許</span><span style="font-size: 32px; font-family: MS 明朝;">許</span><strong style="font-size: 32px; font-family: MS 明朝; color: rgb(0, 102, 204);">可</strong><span style="font-size: 32px; font-family: MS 明朝; background-color: rgb(255, 255, 204);">局</span></p><p><img src="http://ri-sandbox.s3.amazonaws.com/qulljs.png"></p><p><span style="font-family: MS ゴシック; font-size: 16px;">あかさたな</span></p><p><img src="http://ri-sandbox.s3.amazonaws.com/pi-rate.png"></p><p>  &nbsp; <img src="data:image/png;base64,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CSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABhAgsAIExgAQCECSwAgDCBBQAQJrAAAMIEFgBAmMACAAgTWAAAYQILACBMYAEAhAksAIAwgQUAECawAADCBBYAQJjAAgAIE1gAAGECCwAgTGABAIQJLACAMIEFABAmsAAAwgQWAECYwAIACBNYAABh/w9jjgu5/BIoQwAAAABJRU5ErkJggg==" style="" width="480"></p>
</div>
<script src="script.js"></script>
<div>HTML: </div>
<button id="btn1" onClick="callMe()">Get HTML From Delta</button>


</body>
</html>


===========================================
"style.css"
===========================================
/* Styles go here */

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
content: attr(data-value);
}


.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before
{
content: attr(data-value);
font-family: attr(data-value);
}


.ql-snow{
.ql-picker{
&.ql-size{
.ql-picker-label,
.ql-picker-item{
&::before{
content: attr(data-value) !important;
font-family: attr(data-value) !important;
}
}
}
}
}



/* Set droplist names - -item is the currently selected font, -label is the font's appearance in the droplist*/

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='']::before
{
content: 'Default';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="MS ゴシック"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="MS ゴシック"]::before
{
content: "MS ゴシック";
font-family: "MS ゴシック";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='system-ui']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='system-ui']::before
{
content: 'system-ui';
font-family: 'system-ui';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='sans-serif']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='sans-serif']::before
{
content: 'sans-serif';
font-family: 'sans-serif';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='arial']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='arial']::before
{
content: 'arial';
font-family: 'arial';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before
{
content: 'monospace';
font-family: 'monospace';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Courier']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Courier']::before
{
content: 'Courier';
font-family: 'Courier';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='cursive']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='cursive']::before
{
content: 'cursive';
font-family: 'cursive';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Comic Sans MS']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Comic Sans MS']::before
{
content: 'Comic Sans MS';
font-family: 'Comic Sans MS';
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='fantasy']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='fantasy']::before
{
content: 'fantasy';
font-family: 'fantasy';
}

/****************************************************
Set the font-family content used for the HTML content.
*****************************************************/
.ql-font-arial {
font-family: 'Arial';
}

.ql-font-times-new-roman {
font-family: 'Times New Roman';
}

===========================================
"script.js"
===========================================
const fontFamilyArr = ["MS ゴシック","MS 明朝",'system-ui', 'sans-serif', 'arial', 'serif', 'monospace', 'Courier', 'cursive', 'Comic Sans MS','fantasy'];
var Font = Quill.import('attributors/style/font');
Font.whitelist = fontFamilyArr;
Quill.register(Font, true);

const fontSizeArr = ['8px','9px','10px','12px','14px','16px','20px','24px','32px','42px','54px','68px','84px','98px'];

var Size = Quill.import('attributors/style/size');
Size.whitelist = fontSizeArr;
Quill.register(Size, true);

var quill = new Quill('#editor', {
theme: 'snow',
modules: {
imageResize: {
displaySize: true
},
toolbar: [
[{ 'size': fontSizeArr }],
[{ 'font': fontFamilyArr }],
['bold', 'italic', 'underline', 'strike'],
[{'color': []}, {'background': []}],
['link', 'blockquote', 'image', 'video'],
[{ list: 'ordered' }, { list: 'bullet' }]
]


}
});

function callMe() //display current HTML
{
var html = quill.root.innerHTML;
alert(html);
}

コメント

このブログの人気の投稿

Windows Server 2016 にOracle11gをインストール

.Net3.5が要るらしい。 orz 一回目のインストールの際に「.Net3.5が必要」ってダイアログが山ほど出てきた。 .Net3.5が必要な場合のエラーダイアログはどうして「ダウンロードしてインストールせよ」なんだろう? 参考にした  http://otndnld.oracle.co.jp/easy/oracle11gr1/windows/pdf/SelfStudy_01_win.pdf だと、LISTNERの追加設定(?)が必要そうに書いてあるけど、やってみたら「すでに作成済み」ってなる。 それを信じて進めてみたらどうにもうまくいかない。。。 OracleDBをGUIで操作しよう、っていうのが間違いのようか気がする (逆にSQLserverをCLIでやるのは狂気の沙汰だと思う)。 一旦、アンインストールすることにして、スタートメニューにある「Universal Installer」 を実行してアンインストールしようとしたら「batファイルを実行せよ」というダイアログが。 ググりかたが悪かったのか、 「アンインストールはUniversal Installerからしかないぜ。その他の方法はどーなっても知らないぜHAHAHA」(意訳) と書いてるOracleさんしか見つからない。 どっちを信じたらとも思ったが、目の前のほうが正しいだろうという考えに従いそのバッチ を実行しました。(Universal Installerさんは何度やっても消そうともしてくれないし) バッチ実行後、しばらく放置したら終わったらしい。 Oracleさんがインストールされていたっぽいディレクトリもだいたい消えていた。 消えたよね?ってことで一度再起動してから、Oracle11gのインストールを再び実行。 エラーは出ずに無事終了。 (.Net3.5がインストール済みだったからかな??)  sqlplus / as sysdba は問題ない。でも、別PC(Linux機)からの接続はNG。  lsnrctl status コマンドの実行結果から、やはりlocalhost以外からの接続はLISTENしてない模様。 listener.oraをちょっと修正して、LISTNERサービスを再起動。  lsnrctl status を再度実行すると、IPアドレスの分も表示されたので、外部からも接続できるだろう...

1607と1703の場合

※1607とか1703のころの情報です。それ以後では古いゴミ情報と言っても過言ではないでしょう。 Windows10の日本語補助フォントが入っていないことに気づいた。 MSの説明によると、オンデマンドでインストールされるらしいのだけど、 オフラインの場合はどーすれば?ということであれこれ試してみた。 オンラインの場合 「設定」→「システム」→「アプリと機能」→「オプション機能の管理」→「機能の追加」 とたどって「日本語補助フォント」を追加すればいいのだけど、 オフラインの場合は「機能の追加」のところでインターネット接続できない ためにその後の画面が真っ白のまま。 せめて『インターネットに繋がらないため、追加項目が表示できない』程度の メッセージを出してくれれば、とは思う。。。 同じくオンラインの場合、DISMコマンドでも追加できる。どっちかというと こっちが好み。  Dism /Online /Add-Capability /CapabilityName:Language.Fonts.Jpan~~~und-JPAN~0.0.1.0  (参考: https://blogs.msdn.microsoft.com/japan_platform_sdkwindows_sdk_support_team_blog/2015/11/24/windows-10-12-2/ ) だが、オフラインの場合はうまくいかない。/Sourceで指定すべきcabファイルがないからである。 あれこれと検索しているうちに海外サイトで 「WindowsUpdale.logに記載されているcabファイルのURLをゲットする」 という手段が紹介されていた→ URL なるほど。ということで、インターネット接続できる1607で「日本語補助フォント」をインストールし その後、PowerShellでGet-WindowsUpdatelogを実行。デスクトップにできたログファイルを みるとインストールした時刻近辺に   http://download.windowsupdate.com/c/msdownload/update/software/updt/2016/07/microsoft-windows-languagefeatures-fonts-jpan...

LS220DのHDD交換

 BuffaloのNASであるLS220Dの赤色LEDが点滅していました。。。 HDD故障だそうです。 元から入っていたのは、東芝の1TB(TOSHIBA DT01ACA1)でした。 手元にWDの2TB(WD20EARS)、4TB(WD40EZRX)、6TB(WD60EZAZ)、SeaGateの4TB(ST4000DM000)、8TB(ST8000AS0002)が あったので、後日容量アップができるのでは、と思い入れてみました。 RAID再構築をクリックしてみたら・・・  WD   2TB:「指定したメソッドに対するパラメータが不正です。」   4TB:「指定したメソッドに対するパラメータが不正です。」   6TB:リビルド成功  SeaGate   4TB:「指定したメソッドに対するパラメータが不正です。」   8TB:「指定したメソッドに対するパラメータが不正です。」 という散々な結果でした。 何がダメなんだろう?と思い返してみると、WDの6TBだけは未使用の ものでした。 ほかのHDDは入れる前にパーティション情報をWindows上で消したけど、 もしかしてMBR領域(というかHDDの先頭セクタ0)になにか情報があると ダメなのかも。 ということで、Linux機にWD 4TB(/dev/sdb)をつないで、  sudo dd if=/dev/zero of=/dev/sdb bs=512 count=1  sudo sgdisk -Z /dev/sdb を実行してからLS220に入れました。 「破損」という表示になってしまいしたが、RAID再構築を押すと 再構築が始まった、、、、ぽい。