TinyMCE не отображается, пока я не нажму 2 раза

Я использую TinyMCE 4.0.12 и занимаюсь динамическим встроенным редактированием. Потребовались некоторые исследования, но теперь у меня все работает. Моя единственная проблема заключается в том, что для отображения панели инструментов TinyMCE требуется 2 клика. Вот как выглядит мой упрощенный вид (выглядит html):

<script src="/Scripts/jquery-1.8.2.js"></script>
<script src="/Scripts/tinymce/tinymce.min.js"></script>
<script src="/Scripts/quantum.topics.js"></script>
<h1 id="title">@Model.Title</h1>
<div id="body">
    <p>@Model.Body</p>
    <p>@Model.Score</p>
    <p>@Model.CreatedBy</p>
    <p>@Model.CreatedDate</p>
</div>

Мой JQuery (quantum.topics.js):

var tinyMCEconfigs = [
{
    theme:                  "modern",
    mode:                   "none",
    language:               "en",
    inline:                 true,
    toolbar:                "undo redo",
    menubar:                false,
    browser_spellcheck:     true
},
{
    theme:                  "modern",
    mode:                   "none",
    language:               "en",
    inline:                 true,
    menubar:                false,
    browser_spellcheck:     true,
    plugins: [
                            "link"
    ],
    toolbar:                "undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link"
}
];

function addtinyMCE(type, selector) {
    //Only save and remove the current editor if we're active and we're switching controls
    if (tinymce.activeEditor && selector != tinymce.activeEditor.id) {
        tinymce.triggerSave();
        tinymce.execCommand('mceRemoveEditor', true, tinymce.activeEditor.id);
    }

    //Prevent adding the editor over and over
    if (!tinymce.activeEditor) {
        tinymce.settings = tinyMCEconfigs[type];
        tinymce.execCommand('mceAddEditor', false, selector);
        //tinymce.execCommand('mceFocus', false, selector);
        tinymce.activeEditor.execCommand('mceRepaint');
    }
}

$(function () {
    $('#title').click(function () {
        addtinyMCE(0, 'title');
    });
    $('#body').click(function () {
        addtinyMCE(1, 'body');
    });
});

Я пытался использовать mceFocus, я пытался передать «true» для вызовов mceAddEditor и пытался использовать mceRepaint. Кажется, ни один из них не отображает элементы управления, даже если он находится в режиме редактирования. После второго щелчка (даже если ни один из mce-кодов не выполняется) появляются элементы управления. Кажется, это связано с фокусом курсора, но я не могу понять, как это исправить. Если ничего другого, мой пример выше может помочь тому, кто застрял.


jquery tinymce tinymce-4
person BrianLegg    schedule 24.12.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Кажется, мой вопрос превратился в перекати-поле и мне тоже больше не нужен ответ. Я решил это самостоятельно, изменив свой подход. Вместо прямого встроенного редактирования, когда пользователь нажимает на #body или #title, я вместо этого добавил «кнопку» редактирования (на самом деле <span>), которая переключает режим редактирования/нередактирования. Вот новый подход, который я использовал, и который в итоге сработал очень хорошо:

При загрузке страницы я настроил кнопку редактирования:

$(function () {
    $('.edit').click(edit);
});

Я настроил событие редактирования щелчка следующим образом:

function edit() {
    //Make the title and header look editable
    $('#title').css({
        border: "1px dotted #333"
    });
    $('#body').css({
        border: "1px dotted #333"
    });

    //Detatch the 'edit' handler
    $('.edit').unbind();
    //Change it to a 'save' event
    $('.edit').html('Save').click(save);

    //Go into edit mode
    //Prevent adding the editor over and over
    if (!tinymce.activeEditor) {
        tinymce.init({
            selector: "#title",
            theme: "modern",
            language: "en",
            inline: true,
            toolbar: "undo redo",
            menubar: false,
            browser_spellcheck: true
        });

        tinymce.init({
            selector: "#body",
            theme: "modern",
            language: "en",
            inline: true,
            menubar: false,
            browser_spellcheck: true,
            plugins: [
                                "link"
            ],
            toolbar: "undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link"
        });
    }
}

В режиме редактирования кнопка становится «сохранить». Событие сохранения отправляет асинхронный ответ Json контроллеру и обрабатывается следующим образом:

function save() {
    //Make the title and header look non-editable
    $('#title').css({
        border: "none"
    });
    $('#body').css({
        border: "none"
    });

    //Detatch the 'edit' handler
    $('.edit').unbind();
    //Change it to a 'edit' event
    $('.edit').html('Edit').click(edit);

    //Disable edit mode
    //Only remove the current editor if it's active
    if (tinymce.activeEditor) {
        tinymce.triggerSave();

        tinymce.execCommand('mceRemoveEditor', true, 'title');
        tinymce.execCommand('mceRemoveEditor', true, 'body');
    }

    //Persist to DB
    try {
        var title = $('#title').html();
        var body = $('#body').html();
        $.ajax({
            url: Routings.TopicSave,
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({
                ID: parseInt(TopicID, 10),
                Title: title,
                Body: body
            })
        });
    } catch (err) {
        alert(err);
    }
}

Я опустил пример функции «отмена», поскольку он не добавляет никакой ценности этому вопросу, но если вам интересно, вы можете увидеть пример здесь: Обрабатывать отмену изменений с помощью TinyMCE

person BrianLegg    schedule 01.01.2014