Question

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

ed1

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

感谢。

Answer 1

我会尽力帮助你。据我所知，你想要字体和字体大小出现在＆＃34; Box＆＃34;按钮。这是我的样本：

<!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个按钮。（＆＃34; File＆＃34;，＆＃34; Edit＆＃34;，＆＃34; View＆＃34;，＆＃34; Format＆＃34;，＆＃34; Font-family＆＃34;，＆＃34;字体大小＆＃34;按钮，是的，它们也是＆＃34;按钮＆＃34;。）数组从零开始，因此我们的按钮变为[6]。以下是我的示例的外观： sample

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

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

1 个答案: