CODEWITHSUNDEEP
csstinymce
Asle G
Asle G

Reputation: 588

How set font-size in TinyMce

I know there is plenty of Q&As on this already, however I haven´t found one helping me so far.

Whatever I do with my css-files - "content.min.css etc" - there always seems to be an inline element with "font-size: small;" overruling, even if I go "font-size: 15pt !important" in the "content.min.css".

This is the HTML from the generated tinymce-code:

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

I want to get rid of the ´style="front-size: small;" setting. But How?

Upvotes: 2

Views: 2677

Answers (1)

Asle G
Asle G

Reputation: 588

Solution:

  1. Include in the ko.bindingHandler the tinymce option content_css : "/my-local-path/mycontent.css"

  2. Add the file "/my-local-path/mycontent.css" to your solution

I post my bindingHandler just in case other needs to see an example.

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);
        }
    }
}};

Example of "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;

}

Upvotes: 1

Related Questions