在TinyMCE中设置默认字体大小失败 [英] Setting default font size in TinyMCE is failing

问题描述

我正在使用TinyMCE，我想将默认字体大小设置为12.

I am using TinyMCE and I want to set the default font-size to 12.

在这里，我为活动的TinyMCE编辑器分配了一个变量，但是它不起作用...

Here, I assigned a variable to the active TinyMCE editor, but it's not working...

HTML内容:

<textarea id="text_message"></textarea>

JavaScript:

$("#text_message").tinymce({        
    // Location of TinyMCE script
    script_url: '/static/app/a/scripts/tinymce/jscripts/tiny_mce/tiny_mce.js'
});

var fontSize = 12;
tinyMCE.activeEditor.formatter.apply('fontSize', 
{
    value: fontSize
});

推荐答案

您应该等待几个不同的事件阶段:

There's a couple of different event stages you should wait for:

1. 页面已准备就绪，处于某种状态. (根据情况，也可以使用tinyMCE.init().)
2. 编辑器已经初始化，可以开始使用它了.

第一个可以使用以下任一方法来实现:

The first can be accomplished using either:

$(document).ready()

或者:

$(window).load()

两个都处理与页面准备情况有关的事件. $.ready()在DOM可用时触发，在window的情况下$.load()在页面内容已加载时触发(例如内联img，script和link源). .ready()会先于其他先触发，但在许多情况下，两者都可以工作.

Both handle events related to the readiness of the page. $.ready() triggers when the DOM is available, $.load() in the case of window triggers when the page content has been loaded (such as inline img, script, and link sources). .ready() fires slightly before the other, but in many cases either will work.

^{注意，下面我有jQuery(function($){...});，它是$(document).ready();的快捷方式，有助于管理与其他全局使用$的框架的冲突.}

^{Note, below I've got jQuery(function($){...}); which is a shortcut to $(document).ready(); and helps manage conflicts with other frameworks that use $ globally.}

在第二阶段，您需要向您的初始化事件处理程序中添加编辑器创建请求，例如:

At the second stage you need to add an initialization event handler to your editor creation request, such as:

$.tinymce({ init_instance_callback: function(){ ... } });

完整:

$tiny.tinymce({
    // ... other stuff here, comma-delineated
    init_instance_callback: function(){
        ac = tinyMCE.activeEditor;

        ac.dom.setStyle(ac.getBody(), 'fontSize', fontSize);
    }
    // ... other stuff here, comma-delineated
});

在这里您可以为font-size设置 display 值(使用fontSize的Javascript属性，因为Javascript不允许在font-size之类的标签中使用-) .这将等待您要添加的编辑器进行初始化，然后说嘿，我现在在这里".收到通气口点火的通知后，可以将编辑器body(ac.getBody()返回的内容)设置为font-size: 18px.

Here is where you can set the display value for font-size (using the Javascript property of fontSize, since Javascript doesn't allow - in labels such as font-size). This waits for the editor you're adding to initialize and say "Hey, I'm here now". Once you get that notification of the vent firing, you can set the editor body (what ac.getBody() returns) to be font-size: 18px.

这意味着font-size不会在您选择保存编辑器内容后返回；在大多数情况下(除非您选择初始化选项).因此，这是一个默认值"，但不会在内容本身内进行显式设置.

What this means is that the font-size will not be returned once you choose the save the editor content; it's above it in in the editor "body" (literally, the iframe's body element), in most cases (unless you choose the plugins : "fullpage" initialization option). So it's a "default", but does not get set explicitly within the content itself.

如果您安装了带有Firebug附加组件的Chrome或Firefox，请在此小提琴上观看console:

If you have Chrome or Firefox with Firebug add-on installed, watch the console on this fiddle:

http://jsfiddle.net/userdude/9PuUx/1/

这是工作代码演示，并链接到小提琴演示(我使用18px轻松查看更改):

Here is the working code demo and link to a fiddle demo (I use 18px to easily see the change):

jQuery(function a($){
    var $tiny = $("#text_message"),
        fontSize = '18px',
        ac;

    $tiny.tinymce({
        mode : "textareas",
        theme : "advanced",
        theme_advanced_buttons1 : "fontsizeselect,bold,underline,italic",
        init_instance_callback: function(){
            ac = tinyMCE.activeEditor;

            ac.dom.setStyle(ac.getBody(), 'fontSize', fontSize);
        }
    });
});​

http://jsfiddle.net/userdude/9PuUx/

tinyMCE文档和API可能会有些混乱和缺乏，我也不是使用它的专家，所以我知道可能还有其他四到五种方式来解释正在发生的事情以及如何做到这一点.你的旅费可能会改变.如果您对我的操作方式有疑问，或者它似乎未达到您想要或期望的效果，请发表评论并告诉我.

The tinyMCE documentation and API can be a bit confusing and lacking, and I'm not an expert in using it either, so I know there's perhaps four or five other ways to interpret what's going on and how to do this. Your mileage may vary. If you have an issue with the way I did this or it does not seem to do what you want or expect, just leave a comment and let me know.

这篇关于在TinyMCE中设置默认字体大小失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！