TinyMCE は素晴らしいツールであり、多くの問題を解決してくれました。しかし、解決が難しい問題があります。TinyMCE はリスト内のアイテムのフォント サイズを変更しますが、それらのアイテムの前にある箇条書き (順序なしリスト) または数字 (順序付きリスト) のサイズは変更しません。
ユーザーが最終的に得られるのは、次のようなものです。
画像でわかるように、2 つのリストのフォントのサイズは異なりますが、箇条書きのサイズは同じです。
TinyMCE で箇条書きをフォントに合わせて変更する方法を知っている人はいますか?
こことここでTinyMCE フォーラムを検索した後、このソリューションを思いつきました。
tinyMCE.onAddEditor.add(function(manager, editor) {
// TinyMCE doesn't change the font of the li portions of the list,
// we have do that ourselves here. See http://www.tinymce.com/forum/viewtopic.php?id=26100
editor.onExecCommand.add(function(editor, cmd, ui, val) {
if (cmd === "FontSize") {
var node = editor.selection.getNode();
if (node) {
var children = $(node).children("li");
if (children) {
// TinyMCE keeps an attribute that we want it to recompute,
// clear it. See http://www.tinymce.com/forum/viewtopic.php?id=25676
children.removeAttr('data-mce-style');
children.css("font-size", val);
}
}
}
});
});
スティーブの回答を少し編集して、jquery の代わりに tinymce domutils を使用しました。リスト全体の選択のチェックも追加しました。
ed.on('ExecCommand', function checkListNodes(evt) {
let cmd = evt.command;
if (cmd === 'FontSize' || cmd === 'FontName') {
let val = evt.value;
let node = evt.target.selection.getNode();
let nodeParent = node.parentNode;
if (node.nodeName === 'SPAN' && nodeParent.nodeName === 'LI') {
if (cmd === 'FontSize') {
ed.dom.setStyle(nodeParent, 'font-size', val);
}
if (cmd === 'FontName') {
ed.dom.setStyle(nodeParent, 'font-family', val);
}
} else if (node.nodeName === 'UL' || node.nodeName === 'OL') {
let li = ed.dom.select('li', node);
if (cmd === 'FontSize') {
ed.dom.setStyle(li, 'font-size', val);
}
if (cmd === 'FontName') {
ed.dom.setStyle(li, 'font-family', val);
}
}
}
});
残念ながら、これは色の変更には機能しないことに注意してください。詳細はこちらForeColor コマンドをキャッチできません、tinymce 4.1.4
私は問題に取り組み、いくつかの優れた機能を追加しました。これは今私のために働く：
ed.onExecCommand.add(function(editor, cmd, ui, val) {
if (cmd === "FontSize" || cmd === "FontName" || cmd === "ForeColor" || cmd === "Bold" || cmd === "Italic") {
var node = editor.selection.getNode();
if (node) {
var children = $(node).closest("li");
if(children.length == 0)
var children = $(node).find("li");
if (children) {
children.removeAttr('data-mce-style');
if(cmd === "FontSize")
children.css("font-size", val);
if(cmd === "FontName")
children.css("font-family", val);
if(cmd === "ForeColor")
children.css("color", val);
if(cmd === "Bold") {
if(children.find("strong").length > 0) {
children.removeAttr('data-mce-style');
children.css("font-weight", "bold");
} else {
children.removeAttr('data-mce-style');
children.css("font-weight", "normal");
}
}
if(cmd === "Italic") {
if(children.find("em").length > 0) {
children.removeAttr('data-mce-style');
children.css("font-style", "italic");
} else {
children.removeAttr('data-mce-style');
children.css("font-style", "normal");
}
}
}
}
}
if (cmd === "InsertOrderedList" || cmd === "InsertUnorderedList") {
var node = editor.selection.getNode();
if (node) {
$(node).find("li").each(function() {
var children = $(this).find("span:first");
if (children.length > 0) {
$(this).removeAttr('data-mce-style');
if(children.css("font-size") != "undefined")
$(this).css("font-size", children.css("font-size"));
if(children.css("font-family") != "undefined")
$(this).css("font-family", children.css("font-family"));
if(children.css("color") != "undefined")
$(this).css("color", children.css("color"));
if($(this).find("em").length > 0)
$(this).css("font-style", "italic");
if($(this).find("strong").length > 0)
$(this).css("font-weight", "bold");
}
});
}
}
});
これは私のために働く：
tinyMCE.init で、セットアップ時にコールバックを追加しました。
setup: function(ed) {
ed.onKeyDown.add(function(ed, e) {
tinyMceKeyDownCallbacks(ed,tiny_id);
});
}
次に、スパンを持つすべての li をスパン クラスまたはスタイルで更新する jquery 関数:
function tinyMceKeyDownCallbacks(inst,tiny_id){
var spans = $(inst.getBody()).find("li span");
console.log("S: "+spans.length);
spans.each(function(){
var span = $(this);
span.parents('li').addClass(span.attr('class'));
span.parentsUntil('li').attr('style',span.attr('style'));
});
}
SP が言及しているように、TinyMCEはエディターで設定されたスタイルを含む内部<li>コンテンツをラップします。<span>そのスパンをターゲットにして、スタイルを<li>プログラムで一致するものにコピーできます。
$('.content-custom li').each(function() {
var spanStyle = $(this).find('span').attr('style');
$(this).attr('style', spanStyle);
});
TinyMCE はすべてをスパンでラップするためです。あなたが持っていたような問題を回避するために、私はこれをしました:
<ol>
<li style="font-size: <something you want>;">one</li>
<li style="font-size: <something you want>;">two</li>
</ol>