jQuery jWYSIWYG внутри jquery.ui.tab

Question

Итак, мне удалось получить страницу с Ajax ui.tab , и в одну из вкладок я поместил jWYSIWYG текстовый плагин. К сожалению, я вижу только текстовую область.

Однако прямой доступ к странице (т. Е. Без использования вкладки ajax) работает.

Что случилось?

p / s: я новичок в jQuery / JavaScript / AJAX / CSS (если это вообще имеет значение)

Answer 1

Я ожидаю, что проблема в том, что новый HTML вставляется в DOM, когда завершается вызов ajax, но не подключается ни к чему с помощью jQuery.

Обычно вы добавляете все свои качества jquery в готовый документ или событие загрузки, когда страница первоначально загружается. Однако ваша текстовая область не отображается на странице при первой загрузке страницы.

Когда ваш вызов ajax возвращается, текстовая область добавляется на страницу. На этом этапе вам нужно вызывать любой javascript, необходимый для подключения его к элементу управления jWYSIWTG.

В jquery есть новая функция (ish), которая означает, что вы все равно можете настроить все в готовом документе (это называется live ), но вам может оказаться проще просто вызвать код подключения в вашем ajax обработчик успеха.

Answer 2

Моя проблема заключалась в том, что должно появиться форматирование для поля jWYSIWYG, но я не смог получить курсор в нем для редактирования / добавления текста.

Что мне помогло, так это загрузить текстовое поле jWSIWYG после загрузки ajax на исходную страницу, где вкладка определяется с помощью события tab.

$("#example").tabs();
$('#example').bind('tabsshow', function(event, ui) {
    if (ui.tab.id == "alinkid") {
        $('#textfield').wysiwyg();
    }
});

Затем в HTML для вкладок:

<div id="example">
    <ul>
        <li><a href="target" id="alinkid">Target</a></li>
    </ul>
</div>

на целевой странице у вас будет обычная текстовая область с идентификатором 'textfield'

Answer 3

Мое решение - исправить ширину диалога и высоту жалюзи с диалогом открытия события. Слепой диалог закрытия события путем удаления div.wysiwyg, который автоматически создается плагином.

$('#dialogContent').bind('dialogopen', function(event, ui) {
    $('textarea').wysiwyg( {
        css :burl + 'public/css/text.css',
        controls : {
            separator00 : { visible : false },
            separator01 : { visible : false },
            separator02 : { visible : false },
            separator03 : { visible : false },
            separator04 : { visible : false },
            separator05 : { visible : false },
            separator06 : { visible : false },
            separator07 : { visible : false },
            separator08 : { visible : false },
            separator09 : { separator : false},
            insertOrderedList : { visible : true },
            insertUnorderedList : { visible : true },
            undo: { visible : true },
            redo: { visible : true },
            justifyLeft: { visible : true },
            justifyCenter: { visible : true },
            justifyFull: { visible : true },
            subscript: { visible : false },
            superscript: { visible : false },
            underline: { visible : true },
            increaseFontSize : { visible : false },
            decreaseFontSize : { visible : false },
            removeFormat : { visible : false },
            h1mozilla : { visible : false },
            h2mozilla : { visible : false },
            h3mozilla : { visible : false },
            h1 : { visible : false },
            h2 : { visible : false },
            h3 : { visible : false }
        }
    });
    $('.wysiwyg').css( {
        'width' :'350px'
        ,'height' :'180px'
    });
    $('.wysiwyg iframe').css( {
        'width' :'350px'
        ,'height' :'150px'
    });
}).bind('dialogbeforeclose', function(event, ui) {
    $('.wysiwyg').remove();
});

Answer 4

Ваш ответ лучше всего разместить, разместив ссылку на HTML-файл (и любые собственные пользовательские файлы JavaScript). Если файл не размещен, вы можете вставить исходный код на http://pastebin.com/, и разместить ссылку здесь.