Movabletype7,8のTinyMCEのテーブル要素の初期値

らら
らら

はじめに

Wordpressでも設定するあれです。Movabletypeでも試してみました。

TinyMCEのtalbe初期値,border-collapse,boder,widthをなんとかしてみようという話・・

ネット上でないので試してみた・・

プラグインをつくってみる・・

js_includeにJavaScript入れる・・ExtendTinyMCEを参考に・・

下記を見ながら・・・

https://www.tiny.cloud/docs/plugins/opensource/table/

ファイル構成


├─mt-static
│  └─plugins
│      └─ExTinyMCETable
│              extension.js
└─plugins
    └─ExTinyMCETable
        │  config.yaml
        │
        └─tmpl
                extension.tmpl

mt-static\plugins\ExTinyMCETable\extension.jsの内容


(function ($) {
	var config   = MT.Editor.TinyMCE.config;
	$.extend(config, {
//		invalid_styles: { 
//			'tr' : 'width height',
//			'th' : 'width height',
//			'td' : 'width height'
//		},
		table_default_attributes: {},
		table_default_styles: {},
		content_style: 'table {width: 100%}',
		table_use_colgroups: false,
		table_resize_bars: false
	});
}(jQuery));

plugins\ExTinyMCETable\tmpl\extension.tmpl


<mt:setvarblock name="js_include" append="1">
<script type="text/javascript" src="<mt:var name="static_uri">plugins/ExTinyMCETable/extension.js?v1.0.0"></script>
</mt:setvarblock>

plugins\ExTinyMCETable\config.yaml


id: ExTinyMCETable
name: ExTinyMCETable
version: 1.0.0
author_link:
author_name:
description: <MT_TRANS phrase="Extend TinyMCE Table.">
l10n_lexicon:
    ja:
        Extend TinyMCE Table.: "TinyMCEのtable機能拡張セット"
editors:
    tinymce:
        extension: extension.tmpl

動作確認・・

記事、ウェブページの、tinymceの部分は動作した・・

でも・・MTBlockEditorのテーブルでは、動作しなかった・・・泣

デバックすると・・下記の const DefaultRenderOptionで固定でいるよう・・

table_default_stylesとか拾ってくるようになっているみたいだけど・・固定になるようです・・

\mt-static\plugins\TinyMCE6\tiny_mce\models\dom\model.min.js

サポートきいてみた

TinyMCEの設定は内部構造に該当し、カスタマイズは想定しておりません。

今後のアップデートによって別の仕組みに変更となる可能性もあり、内部の設定を直接変更することは非推奨となります。

まぁ。。ブラウザーデバッカーで確認したとき、TinyMCE内に設定した値をマージする処理もあったりしたけど。テーブルプラグインの方で・・

リセット？されてたのか。MTがやっているのかわからないかったので・・聞いてみた。TinyMCE側でやっているようで、MTの方ではない様です。

mt-static\plugins\ExTinyMCETable\extension.jsの内容を差し替え

サポート、今後の保証はないけど...下記で。。

今後のアップデートによって別の仕組みに変更となる可能性ってあるので・・・自己判断で・・


tinyMCE.on("AddEditor", (ev) => {
	const config = {
		table_default_attributes: {},
		table_default_styles: {},
		content_style: "table {width: 100%}",
		table_use_colgroups: false,
		table_resize_bars: false,
	};
	const ed = ev.editor;
	ed.on("init", () => {
		Object.keys(config).forEach((key) => {
			ed.options.set(key, config[key]);
		});
	});
});

さいごに

レスポンシブ対応だと、困りますよね・・

関連

Movabletype 6 から7へアップデート検証

記事
https://www.omakase.net/blog/2023/03/movabletype-6-7up.html

関連記事