在jQuery Mobile网站上发布TinyMCE

时间:2012-01-22 14:17:08

标签: jquery-mobile tinymce

我正在尝试使用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

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

但是textarea并未被TinyMCE iframe取代。没有错误报告给控制台。

2 个答案:

答案 0 :(得分:0)

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

您也可以尝试访问“pagebeforecreate”事件,这样您就可以在jQuery Mobile获取它之前获得“真正的”textarea。

答案 1 :(得分:0)

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

在此之前确保你已经装好了。你可以在第一次使用dinamically加载它:

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

注意:我在每个页面都有它,并且每次检测到类i的textarea时都会发出很小的声音,但只加载一次脚本