Program Resource

開発者向け各種コード、アルゴリズム、リソース情報ライブラリ もしくはねふぁの覚え書き

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='MS Pゴシック;MS P明朝;MS ゴシック;MS 明朝;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';
Print Friendly, PDF & Email