初始化后,Tinymce视图模式切换

时间:2014-07-31 08:36:45

标签: javascript jquery html css tinymce-4

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

但无论我做什么,都有一些我不能做的事情。 - 立即切换编辑器模式。 -

我有一个页面,用户可以选择数据并对其进行编辑和查看内容。用户点击名为“viewmode”的按钮,另一个是“editmode”

我通过将两个DIV放在同一个容器中来实现这一目标,使其中一个用户选择的启动设置不可见。一个DIV具有tinymce编辑器,iframe标签,另一个只有编辑器持有的一堆html值。但这样做的副作用是内容样式可能看起来不同,具体取决于其样式属性。

我现在谈论的这个Web应用程序是一个拥有自己的CSS s的现有系统。 它太复杂了,一旦你看到它,你可能想要逃避它。

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

这里需要加载多个tinymce对象。


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

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

所以,如果你能让我知道如何操纵工具栏的元素,那么我想我可以设法解决这个问题。

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

很抱歉输入所有纯文本。但是像这样的问题我不需要代码。 希望一些笨蛋大师停下来帮助我。

1 个答案:

答案 0 :(得分:0)

最后,我让我的编辑器可以切换。

第一步是隐藏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'属性和值。

然后你的编辑冻结了。

回到编辑模式也很容易。只是向后做。

单击您自己的“切换”按钮时调用这些事件。然后,您可以将编辑器从视图模式切换到编辑模式(以及反对的方式)。