TinyMCE功能未显示

时间:2019-05-23 20:10:11

标签: javascript html tinymce

这是我第一次使用TinyMCE。我的TinyMCE工具栏不会显示在我的页面之一上。我有两个不同的页面。 texarea的一个页面的工具栏显示在顶部,我尝试将代码复制粘贴到另一页面,但它不会出现。我有什么想念的吗?我需要为此新页面下载一些内容吗?

HTML代码:

            <div class="tab-pane active" id="englishTab">
                <div style="padding-top: 10px;padding-bottom: 10px;margin-right: 10px;margin-left: 10px;">
                    <label style="width: 40px;font-weight: bold; vertical-align: top; display: inline-block;">Body<span class="requiredStar">*</span></label>
                    <textarea cssclass="messageBodyEnglish" path="englishContent" style="width: 900px; height: 400px; margin-bottom: 5px;" ></textarea>
                </div>
            </div>

            <div style="overflow: visible;" class="tab-pane" id="frenchTab">
                <div style="padding-top: 10px;padding-bottom: 10px;margin-right: 10px;margin-left: 10px;">
                    <label style="width: 40px;font-weight: bold; vertical-align: top; display: inline-block;">Body<span class="requiredStar">*</span></label>
                    <textarea cssclass="messageBodyFrench" path="frenchContent" style="width: 900px; height: 400px; margin-bottom: 5px;"></textarea>
                </div>
            </div>
        </div>

脚本:

<script src='${resourceUrl}/js/tinymce/tinymce.min.js'></script>
<script src="${resourceUrl}/js/dateUtils.js"></script>
<script src="${resourceUrl}/js/utils.js"></script>

JS:

tinymce.init({
    selector: '.messageBodyEnglish',
    height: 410,
    width: 930,
    force_p_newlines : false,
    forced_root_block : '',
    plugins: "link code table textcolor charcount",
    entities : "38,amp,34,quot,162,cent,8364,euro,163,pound,165,yen,169,copy,174,reg,8482,trade,8240,permil,60,lt,62,gt,8804,le,8805,ge,176,deg,8722,minus",
    menu: {
        edit: {title: 'Edit', items: 'undo redo | cut copy paste | selectall'},
        format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | removeformat'},
        table: {title: 'Table', items: 'inserttable tableprops deletetable | cell'}
    },
    toolbar: "undo redo | bold italic | forecolor backcolor | bullist numlist outdent indent | code",
    table_advtab: false,
    table_cell_advtab: false,
    table_row_advtab: false,
    table_appearance_options: false,
    table_default_attributes: {
        border: 1,
        cellspacing: 0,
        cellpadding: 5
    },
    setup: function (editor) {
        editor.on('keyup', function(e) {
            var count = this.plugins["charcount"].getCount();
            var max = this.plugins["charcount"].getMax();

            if (count > max) {
                $(".mce-charcount").first().css("color", "red");
            } else {
                $(".mce-charcount").first().css("color", "black");
            }
        });
    },
    init_instance_callback: function (editor) {
        $('.mce-tinymce').show('fast');
        $(editor.getContainer()).find(".mce-path").css("display", "none");
    }
});

tinymce.init({
    selector: '.messageBodyFrench',
    height: 410,
    width: 930,
    force_p_newlines : false,
    forced_root_block : '',
    plugins: "link code table textcolor charcount",
    entities : "38,amp,34,quot,162,cent,8364,euro,163,pound,165,yen,169,copy,174,reg,8482,trade,8240,permil,60,lt,62,gt,8804,le,8805,ge,176,deg,8722,minus",
    menu: {
        edit: {title: 'Edit', items: 'undo redo | cut copy paste | selectall'},
        format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | removeformat'},
        table: {title: 'Table', items: 'inserttable tableprops deletetable | cell'}
    },
    toolbar: "undo redo | bold italic | forecolor backcolor | bullist numlist outdent indent | code",
    table_advtab: false,
    table_cell_advtab: false,
    table_row_advtab: false,
    table_appearance_options: false,
    table_default_attributes: {
        border: 1,
        cellspacing: 0,
        cellpadding: 5
    },
    setup: function (editor) {
        editor.on('keyup', function(e) {
            var count = this.plugins["charcount"].getCount();
            var max = this.plugins["charcount"].getMax();
            if (count > max) {
                $(".mce-charcount").last().css("color", "red");
            } else {
                $(".mce-charcount").last().css("color", "black");
            }
        });
    },
    init_instance_callback: function (editor) {
        $('.mce-tinymce').show('fast');
        $(editor.getContainer()).find(".mce-path").css("display", "none");
    }
});

我希望工具栏出现,因为它是相同的代码,但事实并非如此。有什么建议吗?

谢谢!

0 个答案:

没有答案