如何在不选择文本的情况下使用TinyMCE函数来编辑文本？

Question

我在页面上有各种不同的 <div>，当用户单击时，它们会转换为TinyMCE编辑器部分。因此，用户只需双击div，然后使用TinyMCE编辑其中的文本即可。

我的问题是 - 是否可以在没有选择内部文本的情况下在 <div> 上运行TinyMCE功能？我的意思是，我想实现以下用例：

1. 用户单击一个 <div>。 2. <div> 在自身上激活TinyMCE会话。 3. 用户现在可以使用TinyMCE工具栏上的按钮来编辑div中的所有文本，而无需手动使用光标选择文本。否则，通常情况是用户必须选择一些文本，只有选定的文本才能被TinyMCE工具编辑。

如何实现这个功能，以及它有多容易？

编辑

澄清：我的意思不仅是所有文本都应由TinyMCE编辑器自动选择进行更改，而是指在没有选择的情况下是否可以格式化？我的目标是允许用户仅使用TinyMCE编辑 <div> 的格式，但不能更改文本本身。实际上，我不希望用户能够选择任何文本，只需单击 <div>，就可以自动允许TinyMCE格式化其中的文本，而不实际更改其文本。但是textarea对于用户来说不应该是“可选择的”，如果你知道我的意思。它可以自己选择（如@Thariama下面的解决方案），但只是不能由用户选择。这可能吗？有点像仅启用TinyMCE工具栏按钮但禁用文本编辑功能。据我所了解，我不能使用TinyMCE的readonly配置，因为它还会禁用带有所有格式选项（如文本高亮、粗体、斜体等）的工具栏。

- user961627

---

因此，实际上您希望在编辑器加载时选择编辑器中包含的所有文本，对吗？ - Rory McCrossan

正确，但是不要让用户实际上可以“编辑”编辑器区域。我的意思是，已经存在一个带有一些文本的div，我希望用户能够编辑其样式而不改变文本。 - user961627

我已经编辑了我的问题以添加澄清。 - user961627

我知道这不是你真正想要的，但我只是为了好玩而做... http://jsfiddle.net/lollero/U9Hw2/1/ 双击可编辑元素将显示样式选项。 - Joonas

非常感谢，我希望我也能做出这样的事情，但不幸的是，我需要进行更复杂的编辑和格式化，包括在TinyMCE中制作的插件和自定义插件。 - user961627

Answer 1

在tinymce初始化后选择所有编辑器内容并不是什么大问题。这可以通过设置配置参数轻松完成。

tinyMCE.init({
   ...
   setup : function(ed) {
        ed.onInit.add(function(ed, evt) {

            ed.getBody().setAttribute('contenteditable', false);

            var range = ed.selection.dom.createRng();

            range.setStartBefore(ed.getBody().firstChild);
            range.setEndAfter(ed.getBody().lastChild);
            ed.selection.setRng(range);
        });
   }
});

这里是一个关于Tinymce的演示。

更新：

您需要的是类似$(ed.getBody()).attr('contenteditable','false');这样的东西。这样用户就无法选择或编辑编辑器内容，但仍然可以使用Tinymce按钮（带有所有后果）。您可以创建自己的工具栏元素以实现所需功能。

- Thariama

---

谢谢！这确实使我的问题更容易了，但这并不完全是我想要的——我已经编辑了我的问题以添加澄清。 - user961627

我应该在哪里使用这段代码？我尝试将其放在onInit.add函数内，但是出现了错误。我还尝试将其放在外面（仍然在setup函数内），但也出现了错误，这次是getDoc()未定义。您介意展示一下在代码中放置该行的位置吗？ - user961627

在这种情况下，您需要在编辑器内容上放置一个透明的div，以便所有按钮仍然可以正常工作。 - Thariama

完成了！我刚刚使用了这段代码，因为编辑器中的文本区域是“TAID”：$('#TAID_ifr').contents().find('html').bind('keypress', function(e){return false;});。因此，用户可以使用按钮编辑内容，但实际上无法更改文本。 - user961627

是的，透明div的问题在于我已经将太多事件和插件绑定到了包含文本区域的div上，如果我在其上放置一个div，就需要进行很多其他更改。然而，这样做的缺点是光标仍然会出现。 - user961627

Answer 2

我的解决方案是使用@Thariama的设置代码的组合：

tinyMCE.init({ ....
    setup : function(ed) {  
    ed.onInit.add(function(ed, evt) {

        ed.getBody().setAttribute('contenteditable', false);

        var range = ed.selection.dom.createRng();

        range.setStartBefore(ed.getBody().firstChild);
        range.setEndAfter(ed.getBody().lastChild);
        ed.selection.setRng(range);
    });
}
});

通过禁用文本区域中的按键，例如如果我的文本区域具有ID TAID，那么我添加了以下代码：

$('#TAID_ifr').contents().find('html').bind('keypress', function(e){return false;});

- user961627