从DIV样式设置fontsize_formats按钮区域和字体按钮区域

Question

我是运行 TinyMCE 4，带有 font_formats 和 fontsize_formats 的下拉菜单。这让我可以设置任何 selected 文本的字体和字体大小，如果我稍后返回并且 select 该文本，字体名称和字体大小将出现在字体大小和字体按钮区域中，如如下所示：

一切都很好，但我还想做的是单击工具栏中的其他按钮，例如我的示例中的 "Box" 按钮，然后读取字体名称和字体大小将 分配给编辑器附加到 的 DIV 并在按钮区域显示那字体名称和大小。我的 Box 按钮后面的插件读取应用于 DIV 的字体名称和大小并不难，但我没有看到将值插入字体名称和字体大小按钮区域的方法。有人知道怎么做吗？

谢谢。

Answer 1

我会尽力帮助你。据我了解，您希望字体和字体大小出现在 "Box" 按钮中。这是我的样本：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>TinyMCE4</title>
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<script type="text/javascript" src="tinymce_develop/js/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
    selector: 'textarea',
    toolbar1: 'fontselect fontsizeselect mybutton',
    fontsize_formats: "8px 10px 12px 14px 18px 20px 24px 36px",
    font_formats: "Andale Mono=andale mono,times;"+
        "Arial=arial,helvetica,sans-serif;"+
        "Arial Black=arial black,avant garde;"+
        "Book Antiqua=book antiqua,palatino;"+
        "Comic Sans MS=comic sans ms,sans-serif;"+
        "Courier New=courier new,courier;"+
        "Georgia=georgia,palatino;"+
        "Helvetica=helvetica;"+
        "Impact=impact,chicago;"+
        "Symbol=symbol;"+
        "Tahoma=tahoma,arial,helvetica,sans-serif;"+
        "Terminal=terminal,monaco;"+
        "Times New Roman=times new roman,times;"+
        "Trebuchet MS=trebuchet ms,geneva;"+
        "Verdana=verdana,geneva;"+
        "Webdings=webdings;"+
        "Wingdings=wingdings,zapf dingbats",

    setup: function(editor) {
    editor.addButton('mybutton', {
        text: 'My button',
        icon: false,
        onclick: function() {
            document.getElementsByTagName("button")[6].childNodes[0].nodeValue = editor.queryCommandValue('FontName') + " " + parseInt(editor.queryCommandValue('FontSize')) + "px";
        }
    });
    }
});
</script>
<form method="post" action="somepage">
    <textarea name="content" >
    <span style="font-family: 'times new roman', times; font-size: 14px;">Here's some</span>
    <span style="font-family: 'comic sans ms', sans-serif; font-size: 20px;">sample</span>
    <span style="font-family: 'times new roman', times; font-size: 14px;">text</span>
    </textarea>
</form>
</body>
</html>

这里的主要代码是：

document.getElementsByTagName("button")[6].childNodes[0].nodeValue = editor.queryCommandValue('FontName') + " " + parseInt(editor.queryCommandValue('FontSize')) + "px";

我想说的是，为了获得我使用的按钮 getElementsByTagName，我找不到使用 TinyMCE 命令的方法（抱歉）。所以 getElementsByTagName 生成一个数组，你应该知道你的按钮在哪里的顺序。在我的示例中，按钮是第 7 个按钮。（在 "File"、"Edit"、"View"、"Format"、"Font-family"、"Font-sizes" 按钮之后，是的，它们也是 "button"。）该数组从零开始，因此我们的按钮变为 [6]。这是我的样本的样子：

选择文本并按下按钮将给出以下结果：

从DIV样式设置fontsize_formats按钮区域和字体按钮区域

Setting fontsize_formats button area and font button area from the DIV style

tinymce-4