Question

我正在使用TinyMCE 4.0.12，我正在进行一些动态内联编辑。这需要一些研究，但我现在已经完成了所有工作。我唯一的问题是需要2次点击才能显示TinyMCE工具栏。这是我的简化视图（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调用＆amp;传递'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"
        });
    }
}

在编辑模式下，按钮变为“保存”。 save事件向控制器发送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);
    }
}

我省略了“取消”功能示例，因为它没有为此问题添加任何值，但如果您感兴趣，可以在此处查看示例：Handle discard changes with TinyMCE

直到我点击2次才会显示TinyMCE

1 个答案: