为动态加载的新元素添加 tinymce

Posted

技术标签:

【中文标题】为动态加载的新元素添加 tinymce【英文标题】:add tinymce for new element loaded dynamicaly 【发布时间】:2013-06-06 13:31:52 【问题描述】:

我的页面包含 5 个 div,可以通过 Tinymce 内联编辑器进行编辑。通过单击一个按钮(如此动态地),我对 Jquery loding 5 个新的感到满意。但是当然新的不受 Tinymce 的影响,因为 init 已经加载...请问如何为新的 div 激活 tinymce?

我的 html

<div id=\"billetdroit\">
            <div id=\"divtitre\"><h1 class=\"editable\">blablabla</h1></div>
        <div class=\"editable\" id=\"tiny_01\">blablabla2</div>
        </div>
<div id=\"billetdroit\">
                <div id=\"divtitre\"><h1 class=\"editable\">blablabla</h1></div>
            <div class=\"editable\" id=\"tiny_02\">blablabla2</div>
            </div>
<div id=\"billetdroit\">
                <div id=\"divtitre\"><h1 class=\"editable\">blablabla</h1></div>
            <div class=\"editable\" id=\"tiny_03\">blablabla2</div>
            </div>

...
...

还有一个按钮:当你点击时,它会动态显示 5 个 div "billetdroit"

我的 tinymce 初始化:

tinymce.init(
                    selector: "textarea",
                    language: 'fr_FR',
                    image_advtab: true,
                    menubar:false,
                    forced_root_block: false,
                    plugins: ["link","code","media","image","textcolor", "emoticons"],
                    toolbar: "bold italic forecolor backcolor alignleft aligncenter alignright alignjustify link unlink image media emoticons"
                 );
                 tinymce.init(
                    selector: "h1.editable",
                    language: 'fr_FR',
                    inline: true,
                    toolbar: "undo redo",
                    menubar: false
                );

                tinymce.init(
                    selector: "div.editable",
                    language: 'fr_FR',
                    image_advtab: true,
                    menubar:false,
                    inline: true,
                    forced_root_block: false,
                    plugins: ["link","code","media","image","textcolor", "emoticons"],
                    toolbar: "bold italic forecolor backcolor alignleft aligncenter alignright alignjustify link unlink image media emoticons"
                );

有什么解决办法吗? 谢谢

编辑:

我试过了:

$(document).ready(function() 

    var track_click = 1; //track user click on "load more" button, righ now it is 0 click

    var total_pages = Globals.total_pages;

//    $('#results').load("loadmore.php", 'page':track_click, function() track_click++;); //initial data to load


    $(".load_more").click(function (e)  //user clicks on button

        $(this).hide(); //hide load more button on click
        $('.animation_image').show(); //show loading image

        if(track_click <= total_pages) //user click number is still less than total pages
        
            //post page number and load returned data into result element
            $.post('loadmore.php','page': track_click, function(data) 

                $(".load_more").show(); //bring back load more button

                $("#results").append(data); //append data received from server

                //scroll page smoothly to button id
                $("html, body").animate(scrollTop: $("#load_more_button").offset().top, 500);

                //hide loading image
                $('.animation_image').hide(); //hide loading image once data is received

                track_click++; //user click increment on load button

            ).fail(function(xhr, ajaxOptions, thrownError)  //any errors?
                alert(thrownError); //alert with HTTP error
                $(".load_more").show(); //bring back load more button
                $('.animation_image').hide(); //hide loading image once data is received
            );


            if(track_click >= total_pages-1) //compare user click with page number
            
                //reached end of the page yet? disable load button
                $(".load_more").attr("disabled", "disabled");
            
         
         $.getScript('include/tinymce/tinymce.min.js', function() 
            tinymce.init(
                    selector: "textarea",
                    language: 'fr_FR',
                    image_advtab: true,
                    menubar:false,
                    forced_root_block: false,
                    plugins: ["link","code","media","image","textcolor", "emoticons"],
                    toolbar: "bold italic forecolor backcolor alignleft aligncenter alignright alignjustify link unlink image media emoticons"
                 );
                 tinymce.init(
                    selector: "h1.editable",
                    language: 'fr_FR',
                    inline: true,
                    toolbar: "undo redo",
                    menubar: false
                );

                tinymce.init(
                    selector: "div.editable",
                    language: 'fr_FR',
                    image_advtab: true,
                    menubar:false,
                    inline: true,
                    forced_root_block: false,
                    plugins: ["link","code","media","image","textcolor", "emoticons"],
                    toolbar: "bold italic forecolor backcolor alignleft aligncenter alignright alignjustify link unlink image media emoticons"
                );
            );

        );
);

但是没有成功...

【问题讨论】:

为什么你不只是在新添加的元素上调用 tinymce init?! 这就是我想要的...但是如何? 与静态元素相同,只需在添加这些元素后在单击按钮处理程序中调用它 你能给出确切的语法吗? 首先,ID 在上下文页面上必须是唯一的!您在此处的代码无效,请修复此问题,否则许多事情将无法正常工作。其次,试试自己,然后告诉我你在哪里卡住了。但我讨厌 tinymce,我不使用它也不想使用它。 【参考方案1】:

有一种简单的方法可以初始化 tinymce 编辑器:

tinyMCE.execCommand("mceAddControl", false, 'your_div_id');

【讨论】:

谢谢。我采用了另一种方式:我将 tinymceinit() 放在每个新 div 生成之后。它有效...

以上是关于为动态加载的新元素添加 tinymce的主要内容,如果未能解决你的问题,请参考以下文章

将元素动态加载到 ScrollView

jQuery mobile 动态添加元素

怎么用jquery对动态加载的元素增加,或者修改元素样式

js 为动态添加的元素绑定事件

带有动态添加元素的 jQuery 中的自动完成

如何来使用jquery动态的往页面添加元素