jquery - TinyMCE 直到我点击 2 次才显示

Question

我正在使用 TinyMCE 4.0.12，并且正在进行一些动态内联编辑。这需要一些研究，但我现在一切都正常了。我唯一的问题是需要单击 2 次才能显示 TinyMCE 工具栏。这是我的简化 View (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，我尝试过为 mceAddEditor 调用传递“true”，并且我尝试过使用 mceRepaint。即使处于编辑模式，似乎也没有人能够显示控件。第二次单击后(即使没有执行任何 mce 代码)，控件就会出现。它似乎与光标焦点有关，但我不知道如何修复它。如果不出意外的话，我上面的例子可能会帮助那些陷入困境的人。

Answer 1

看来我的问题已经变成了风滚草，我也不再需要答案了。我通过改变方法自己解决了这个问题。当用户单击 #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"
        });
    }
}

在编辑模式下，该按钮变为“保存”。保存事件向 Controller 发送一个 asyn 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);
    }
}

我省略了“取消”功能示例，因为它不会为这个问题添加任何值(value)，但如果您感兴趣，可以在此处查看示例:Handle discard changes with TinyMCE