TinyMCE内联的可排序div [英] Sortable div with TinyMCE inline

问题描述

vijayscode(发布的代码https://stackoverflow.com/questions/34850038/tinymce-4-not-working-with-sortable-jquery-divs/59896435#59896435 )对我不起作用.

The code posted by vijayscode (https://stackoverflow.com/questions/34850038/tinymce-4-not-working-with-sortable-jquery-divs/59896435#59896435) doesn't work for me.

即使在我开始订购之前，TinyMCE也无法正常工作.使用内联模式时，TinyMCE可以进行排序吗?

TinyMCE doesn't work even before I start ordering. Does sorting work with TinyMCE in when using inline mode?

例如，如果我在此代码中添加inline: true选项... TinyMCE不会立即加载

For example, if I add the inline: true option to this code ... TinyMCE is not loaded immediately

http://fiddle.tinymce.com/33faab

您能在 http://fiddle.tinymce.com/上给我展示一个工作示例吗? >

Can you show me a working example on http://fiddle.tinymce.com/

推荐答案

您确实在问两个问题，所以让我尝试分别回答...

You are really asking two questions so let me try to answer them separately...

要使用内联模式，您需要在页面上定位一个块元素(例如div)，而不是textarea.在文档中对此进行了解释:

In order to use inline mode you need to target a block element (e.g. div) on the page as opposed to a textarea. This is explained in the documentation:

https://www.tiny.cloud/docs/configure/editor-appearance/#inline

如果要在内联模式下使用TinyMCE，则需要相应地调整HTML.

If you want to use TinyMCE in inline mode you will need to adjust your HTML accordingly.

正如在SO post中所讨论的，您链接到DOM的拖放操作会影响TinyMCE，因为从技术上讲，链接到TinyMCE的基础DOM元素在您开始拖动时就从DOM中删除，在执行放置时插入.因此，您要做的是在删除DOM元素之前先remove() TinyMCE，然后在将新的DOM元素放回DOM之后再次init().

As is discussed in SO post you linked to the act of dragging and dropping parts of the DOM impacts TinyMCE because the underlying DOM element that is linked to TinyMCE technically gets removed from the DOM when you start dragging and then a new element is inserted when you perform the drop. Because of this what you want to do is remove() TinyMCE before the DOM element is removed and then init() again after the new DOM element is placed back into the DOM.

我不建议使用mceAddEditor和mceRemoveEditor来完成这项工作.相反，我会:

I would not recommend using the mceAddEditor and mceRemoveEditor to do this work. Instead I would:

• 调用remove()将TinyMCE与DOM元素分离.
• 完成拖放操作
• 将DOM元素放回页面后，在DOM元素上调用init().

• Call remove() to detach TinyMCE from the DOM element.
• Let the drag/drop complete
• Call init() on the DOM element after its placed back into the page.

在元素返回页面后调用init()可以让您确定元素的类/id/etc，并使用正确的配置调用init().

Calling init() after the element is back in the page would allow you to determine the element's class/id/etc and call init() with the correct configuration.

这篇关于TinyMCE内联的可排序div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！