Tinymce 4 设置fontsize_可从DIV样式设置按钮区域和字体按钮区域的格式_Tinymce 4

Tinymce 4 设置fontsize_可从DIV样式设置按钮区域和字体按钮区域的格式

Tinymce 4 设置fontsize_可从DIV样式设置按钮区域和字体按钮区域的格式,tinymce-4,Tinymce 4,我正在运行TinyMCE 4，其中包含字体格式和字体大小格式的下拉列表。这使我可以设置任何选定文本的字体和字体大小，如果我稍后返回并选择该文本，字体名称和字体大小将显示在fontsize和font按钮区域中，如下所示：这一切都很好，但我还想做的是单击工具栏中的其他按钮，比如我的示例中的“Box”按钮，让它读取指定给编辑器附加到的DIV的字体名称和字体大小，并在按钮区域显示该字体名称和大小。我的Box按钮后面的插件读取应用于DIV的字体名称和大小并不困难，但我没有看到将值插入字体名称和字体大小

我正在运行TinyMCE 4，其中包含字体格式和字体大小格式的下拉列表。这使我可以设置任何选定文本的字体和字体大小，如果我稍后返回并选择该文本，字体名称和字体大小将显示在fontsize和font按钮区域中，如下所示：

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

谢谢。

我会尽力帮助你的。据我所知，您希望字体和字体大小出现在“框”按钮中。这是我的样本：

<!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>

我想说的是，为了获得我使用的按钮，我找不到带有TinyMCE命令的aproach（抱歉）。所以getElementsByTagName生成一个数组，您应该知道按钮的顺序。在我的示例中，按钮是第7个按钮。（在“文件”、“编辑”、“查看”、“格式”、“字体系列”、“字体大小”按钮之后，是的，它们也是“按钮”。）数组从零开始，因此我们的按钮变为

[6]

。以下是我的示例的外观：

选择文本并按下按钮将显示以下结果：

谢谢！这并不完全是我想要的，但我认为您提供的代码将告诉我如何做我想要的。我的想法是单击“框”，在“字体大小”按钮中显示编辑器附加到的DIV的字体大小（而不是所选文本），并在“字体系列”按钮中显示DIV的字体名称。我给了你赏金分。

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