在 jQuery Mobile 网站上启动 TinyMCE

Question

我正在尝试使用 jQuery 移动网站启动 TinyMCE。

这是我的 javascript 采购头：

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css"/>
<link rel="stylesheet" href="/public/css/styler.css"/>
<link rel="stylesheet" href="/public/css/mainstyle.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="/public/js/tinymce/tiny_mce.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

    <script type="text/javascript">

    $('.close-notification').click(
        function () {
            $(this).parent().fadeTo(350, 0, function () {
                $(this).slideUp(600);
            });
            return false;
        }
    );

    $(document).live( 'pageinit',function(event) {
        tinyMCE.init({
            mode:"textareas",
            theme:"advanced",
            theme_advanced_buttons1:"bold,italic,bullist,numlist",
            theme_advanced_buttons2:"",
            theme_advanced_buttons3:"",
            theme_advanced_buttons4:"",
            theme_advanced_toolbar_location:"top",
            theme_advanced_toolbar_align:"left",
            theme_advanced_resizing:false
        });
    });

</script>

好的，所以我有一个像这样的文本区域

<textarea name="message" style="width:100%" tabindex="3" rows="10" id="wysiwyg"></textarea>

，但是文本区域没有被 TinyMCE iframe 替换。没有错误报告给控制台。

Answer 1

jQuery Mobile 实际上将样式和类应用于输入元素，并且在某些情况下实际上将它们替换为它可以完全控制的以编程方式创建的元素。我会检查您在页面上看到的文本区域，看看它是否与您的目标区域相同。您甚至可以在控制台中运行命令，例如设置预期目标的背景以检查它是否是您正在查看的目标。

您还可以尝试访问“pagebeforecreate”事件，以便您可以在 jQuery Mobile 挂钩之前获取“真实”文本区域。

Answer 2

对于 Jquery Mobile 我所做的（并且它运行）：

<script>
$(document).live( 'pagebeforecreate',function(event){
    if($('textarea.tinymce').length){
            $(document).bind('pagebeforeshow',function(event) {
                tinyMCE.init({
                // General options
                mode : "textareas",
                selector : "textarea.tinymce",
                theme : "simple"
            });
        });
    }
});
</script>

确保您在此之前已经加载了tiny。您可以第一次动态加载它：

if(typeof TinyMCE == "undefined") {
    $.getScript('tinymce.js');
}

注意：我在每个页面中都有它，并且每次检测到我检测到的类的文本区域时都会触发很小的事件，但只加载脚本一次