Question

我知道有很多Q＆amp; As已经存在，但到目前为止我找不到一个帮助我了。

无论我对我的css文件做什么 - “content.min.css等” - 似乎总是有一个内联元素“font-size：small;”即使我在“content.min.css”中使用“font-size：15pt！important”，也要推翻。

这是生成的tinymce-code中的HTML：

<body id="tinymce" class="mce-content-body " contenteditable="true" onload="window.parent.tinymce.get('mce_1').fire('load');" spellcheck="false">
    <p>
        <span data-mce-style="font-size: small;"></span>
    </p>
    <p>
        <span data-mce-style="font-size: small;" style="font-size: small;"></span>
    </p>
</body>

我想摆脱'style =“前面的尺寸：小;”设置。但是怎么样？

Answer 1

解决方案：

在ko.bindingHandler中包含tinymce选项 content_css：“/ my-local-path / mycontent.css”
将文件“/my-local-path/mycontent.css”添加到您的解决方案

我发布了我的bindingHandler，以防其他人需要查看示例。

ko.bindingHandlers.tinymce = {
init: function (element, valueAccessor, allBindingsAccessor,
                context, arg1, arg2) {
    var options = allBindingsAccessor().tinymceOptions || {};
    var modelValue = valueAccessor();
    var value = ko.utils.unwrapObservable(valueAccessor());

    var el = $(element);
    var id = el.attr('id');

    //options.theme = "advanced";
    //options.theme = "modern";
    options.content_css = "/DesktopModules/MyModule/css/mycontent.css";  // DNN7.1 with module name "MyModule" 

    options.menubar = false;
    options.plugins = [
        "advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker",
        "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
        "table contextmenu directionality template textcolor paste fullpage textcolor"
    ];

    options.extended_valid_elements = "span[!class]";


    //tinymce buttons
    //http://www.tinymce.com/tryit/classic.php
    options.toolbar_items_size = 'small';
    options.toolbar =
    "bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | forecolor backcolor | hr removeformat | subscript superscript  ";

    //options.inline = "true";

    //handle edits made in the editor. Updates after an undo point is reached.
    options.setup = function (editor) {
        editor.on('change', function (e) {
            if (ko.isWriteableObservable(modelValue)) {
                var content = editor.getContent({ format: 'raw' });
                modelValue(content);
            }
        });

    };

    el.html(value);

    $(element).tinymce(options);

    //handle disposal (if KO removes by the template binding)
    ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
        var tinymceInstance = tinyMCE.get(id);
        if (tinymceInstance !== undefined) {
            // if instance already exist, then get rid of it... we don't want it
            tinymceInstance.remove();
        }
    });
},
update: function (element, valueAccessor, allBindingsAccessor, context) {

    var el = $(element);
    var value = ko.utils.unwrapObservable(valueAccessor());
    var id = el.attr('id');

    //handle programmatic updates to the observable
    // also makes sure it doesn't update it if it's the same. 
    // otherwise, it will reload the instance, causing the cursor to jump.
    if (id !== undefined) {
        //$(el).tinymce();

        var tinymceInstance = tinyMCE.get(id);
        if (!tinymceInstance)
            return;
        var content = tinymceInstance.getContent({ format: 'raw' });
        if (content !== value) {
            //tinymceInstance.setContent(value);
            valueAccessor(content);
            //$(el).html(value);
        }
    }
}};

“mycontent.css”的示例：

body#tinymce { 
    /* NB! Without specifying "#tinymce" this setting will effect other body´s */

    color: magenta;                 // Just to show the difference
    background-color: lightyellow;  // Just to show the difference
    font-family:Verdana, Arial, Helvetica, sans-serif; 
    font-size:14px; 
    margin:18px;

}

如何在TinyMce中设置font-size

1 个答案: