5

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

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

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

这如何实现，它有多容易？

编辑

澄清：我的意思不仅仅是所有文本都应该由 TinyMCE 编辑器自动选择进行更改，而是我的意思是根本不选择，可以格式化吗？我的目标是让用户只能编辑使用 TinyMCE 的格式，<div>但不能更改文本本身。我实际上不希望用户能够选择任何文本，只需单击<div>，它应该会自动允许对包含的文本进行格式化由 TinyMCE 提供，但实际上并未更改其文本。但是如果你明白我的意思的话，文本区域不应该是用户“可选择的”。如果需要，它可以自行选择（根据下面@Thariama 的解决方案），但不能由用户选择。这可能吗？有点像只启用 TinyMCE 工具栏按钮但禁用文本编辑功能。据我了解，我不能使用readonlyTinyMCE 的配置，它还会禁用带有所有格式选项（如文本突出显示、粗体、斜体等）的工具栏。

4

2 回答 2

2

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

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 按钮仍然可用（有所有后果）。您可以创建具有所需功能的自己的工具栏元素。

于 2012-12-19T11:45:26.750 回答
1

我的答案是结合使用@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);
    });
}
});

有一种方法可以禁用 textarea 中的按键，即如果我的 textarea 的 ID 为TAID，那么我添加了以下代码：

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

于 2012-12-19T14:23:13.537 回答