Tinymce视图模式在init后切换

StackOverflow https://stackoverflow.com//questions/25054335

题

我的编辑是tinymce4+。它在大多数地方都有很大的作用。

但无论我做什么，有些事情我都做不到。-即时切换编辑器模式。-

我有一个页面，用户可以选择一个数据并编辑它并查看内容。用户点击一个名为"viewmode"的按钮，另一个flipside是"editmode"

我通过把两个 DIVs在同一个容器中，使其中一个不可见的开始-看设置用户选择。一个 DIV 有tinymce编辑器，iframe标签，还有一个只是编辑器持有的一堆html值。但这样做的副作用是内容样式可能看起来不同，具体取决于其样式属性。

我现在说的这个web应用程序是一个现有的系统，它有自己的 CSSs.它是如此复杂，一旦你看到它，你可能想逃离它。

所以我想避免这种情况 CSS 通过使编辑器动态切换到两种方式来实现差异。

加载多个tinymce对象是我在这里需要的最后一件事。

我可以通过设置一个属性使编辑器禁用 - contenteditable = false - 但是工具栏元素在这里变成了坏男孩。因为他们还在工作。我隐藏工具栏本身来完成这个任务。

但是你知道，我的客户讨厌它，并坚持我编辑器应该在其viewmode中提供打印按钮。这是令人沮丧的。

所以，如果你能给我一个如何操作工具栏元素的想法，那么我想我可以设法解决这个问题。

如果太困难，将print事件侦听器附加到外部元素也可能是我的第二个最佳选择。因为从那一刻起，我只是扔掉工具栏，在编辑器顶部制作一个打印图标，并将事件附加到它。

对不起，输入所有的纯文本。但像这样的问题不需要代码，我想。希望一些tinymce大师停下来帮助我。

有帮助吗？

解决方案

最后，我使我的编辑器可切换。

第一步是隐藏工具栏中的所有元素 tinyMCE.

tinyMCE 工具栏有一个特定的类名，所以它们可以用 jQuery 类选择器。但是单独选择类名也会导致不需要的工具栏，所以你必须小心这一点。

仅供参考 .eq() API可能会帮助你。

隐藏工具栏中的所有元素后，（顺便不要隐藏工具栏。）做到这一点。

tinymce.ui.Factory.create({
    type: 'button',
    cmd: 'mcePrint',
    icon: 'print',
    shortcut: 'Ctrl+P',
    class : 'temp'
}).renderTo(appendTarget);

这将在工具栏中添加一个按钮元素。

但不知何故，它不会调用我在cmd的值中定义的命令。

因此，手动将此事件附加到按钮将是必需的。

tinymce.activeEditor.execCommand('mcePrint');

到目前为止，我为视图模式编辑器创建了一个自定义工具栏。现在是时候冻结edior的实际内容字段了。

获取iframe内容后非常容易 jQuery 对象。

.contents() API应该可以帮助你。

之后，您可以选择 <BODY> 元素就在你身边，所以剩下要做的最后一件事就是给body标签赋予'contenteditable=false'属性和值。

然后你的编辑器冻结。

回到编辑模式也很容易。倒着做就行了。

当您单击自己的"切换"按钮时调用这些事件。然后，您可以将编辑器从视图模式切换到编辑模式（以及oppsite方式）。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top