【ASP.NET Core】mdl conflicts with tinymce

When I implementd the popular Richtext Editor tinymce for this web application, it conflicts with material design lite's js library, mdl-js-layout, so the editor cannot be edited or the content cannot shows up.

Here is the solution, add the following js code into your site.js file, and it will fix the conflication bug.

document.addEventListener('mdl-componentupgraded', function (e) {
    //In case other element are upgraded before the layout  
    if (typeof e.target.MaterialLayout !== 'undefined') {
        // Initialize your tinyMCE Editor with your preferred options
        tinyMCE.init({
            // General options
            mode: "textareas",
            //selector: 'textarea',
            plugins: "advlist autolink link image lists charmap print preview wordcount textcolor insertdatetime anchor emoticons codesample table pagebreak",
            menubar: false,
            toolbar:
                [
                    "undo redo styleselect bold italic | advlist autolink link image lists charmap print preview wordcount forecolor backcolor insertdatetime anchor emoticons codesample table pagebreak",
                    "",
                ],
            content_css: "css/site.css",
        });
    }
});

 

posted @ 2016-03-30 14:55  苹果没有熟  阅读(247)  评论(0编辑  收藏  举报