Laravel/vueのちょっとした事の覚え書き。Laravel 8.xで作業した際の情報。
高機能テキストエディタ。
テーブルのラインを表示する
デフォルトだと表の線が出ない。tdタグにborderを付ける。
mountedのreplaceの後に付けるか、ckeditorのconfig.jsに記述する
CKEDITOR.replace("ckeditor");
mountedかconfig.js↓
CKEDITOR.on('instanceReady', function (ev) {
ev.editor.dataProcessor.htmlFilter.addRules( {
elements : {
td : function( element ) {
element.attributes.class = 'border';
}
}
})});
テーブルの幅を100%にする
デフォルトで表が500なので100%にする。
public/ckeditor/plugins/table/dialogs/table.js に設定があるが難読化されているので「500」で検索して「100%」に変更する。
https://stackoverflow.com/questions/8039564/ckeditor-default-tabble-width
ツールバーのカスタマイズ
public/ckeditor/samples/index.htmをchromeなどで開く。toolbarの編集ツールで編集し、ソースを取得し public/ckeditor/config.js に貼り付け。すぐには反映されないのでリロードやキャッシュクリアする。
https://stackoverflow.com/questions/14940452/force-ckeditor-to-refresh-config
更新の反映
ckeditorの変更内容がなかなか反映されない場合、timestampを更新すると反映される。
CKEDITOR.timestamp = +new Date;
実行時の整形とかプラグインの追加削除
呼び出し時にaddCssで調整したりプラグインの追加削除を行う。下記はデフォルトのフォントサイズを24にする例も入れている。autogrowはサイズ自動拡張。
CKEDITOR.addCss('.cke_editable p { margin-top: 0 !important; margin-bottom: 0 !important;}');
CKEDITOR.addCss('.cke_editable ul { margin-top: 0 !important; margin-bottom: 0 !important;}');
CKEDITOR.addCss('.cke_editable ol { margin-top: 0 !important; margin-bottom: 0 !important;}');
CKEDITOR.replace('ckeditor'+id, {
autoGrow_onStartup: 'true',
extraPlugins: 'autogrow, image2',
removePlugins: 'resize, image',
contentsCss: "body {font-size: 24px;}",
});
リンクをデフォルトで新規タブで開く様にする
\plugins\link\dialogs\link.js のnotSetを検索して_blankにする。
type : 'select',
id : 'linkTargetType',
label : commonLang.target,
'default' : '_blank',
https://stackoverflow.com/questions/46558041/ckeditor-default-target-link-blank-not-work-properly
自動的にckeditorを拡張する
編集して改行していくと自動的にした方向にサイズ拡張する。と言うのは上の「実行時の整形とかプラグインの追加削除」のautoGrowがそう。
行間を無くす
行間がやたら隙間が空く。 ckeditor/content.css を編集する。
p, h1, h2, h3, h4, h5, h6{
margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
.cke_editable
{
font-size: 13px;
/*line-height: 1.6;*/
line-height: 23.04px;
/* Fix for missing scrollbars with RTL texts. (#10488) */
word-wrap: break-word;
}
h1,h2,h3,h4,h5,h6
{
font-weight: normal;
/*line-height: 1.2;*/
line-height: 28.8px;
}
日本語フォント選択を追加
ckeditor/config.jsのフォントに追加する。ツールバーのフォントメニューも追加しておく事。
config.font_names='ＭＳ Ｐゴシック;ＭＳ Ｐ明朝;ＭＳ ゴシック;ＭＳ 明朝;Arial/Arial, Helvetica, sans-serif;Comic Sans MS/Comic Sans MS, cursive;Courier New/Courier New, Courier, monospace;Georgia/Georgia, serif;Lucida Sans Unicode/Lucida Sans Unicode, Lucida Grande, sans-serif;Tahoma/Tahoma, Geneva, sans-serif;Times New Roman/Times New Roman, Times, serif;Trebuchet MS/Trebuchet MS, Helvetica, sans-serif;Verdana/Verdana, Geneva, sans-serif';
一定時間毎に保存
編集中一定時間毎に編集内容をサーバーに送信。
editor.checkDirty() and resetDirty()
mounted()で開始、5秒毎に変更が無いかチェックし変更があればサーバーに送信。
this.autosave = setInterval(() => {this.checksavedata()}, 5000);
checksavedata(){
if(this.editfield > 0){
if (CKEDITOR.instances['ckeditor'+this.editfield].checkDirty()){
CKEDITOR.instances['ckeditor'+this.editfield].resetDirty();
const itemIndex = this.articles.findIndex(
(mitem) => mitem.id === this.editfield
);
this.articles[itemIndex].note = CKEDITOR.instances['ckeditor'+this.editfield].getData();
axios
.patch("/article/" + this.editfield, this.articles[itemIndex])
.then((res) => {
console.log(res.data);
})
.catch((err) => {
this.handleErrors(err);
});
}
}
},
貼り付けた画像をドラッグしてリサイズ
image2を使う。
https://ckeditor.com/cke4/addon/image2
zipダウロードしてckeditor2のpluginフォルダーに展開。
ckeditorのconfig.jsに追記
config.removePlugins = 'image';
config.extraPlugins = 'image2';
