如何在不实际选择文本的情况下在文本上使用TinyMCE函数? [英] How to use TinyMCE functions on text without actually selecting that text?

问题描述

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

I have various <div>s on my page, which, when clicked, convert into TinyMCE editor sections. So the user can just double click on the div and then edit the text within it using TinyMCE.

我的问题是-是否可以在<div>上运行TinyMCE函数而无需实际选择内部文本?我的意思是，我想实现以下用例:

My question is - is it possible to run the TinyMCE functions on a <div> without actually having the text inside selected? What I mean is, I want to implement the following use case:

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

1. User clicks on a <div>.
2. <div> activates a TinyMCE session on itself.
3. User can now use the buttons on the TinyMCE toolbar to edit all the text in the div, without having to actually select the text manually using the cursor. Otherwise the usual case is that the user has to select some of the text, and only this selected text will be edited by the TinyMCE tools.

这如何实现?它有多容易?

How can this be implemented, and how easy is it?

说明:我不仅意味着TinyMCE编辑器应自动选择所有文本以进行更改，而且我的意思是完全不选择就可以格式化吗?我的目标是使用户只能使用TinyMCE编辑<div>的格式，而不能更改文本本身.我实际上不希望用户能够选择任何文本，只需单击<div>，它将自动允许TinyMCE对包含的文本进行格式化，而无需实际更改其文本.但是，如果您知道我的意思，则文本区域对于用户而言不应是可选的".它可以根据需要选择自己(按照下面的@Thariama解决方案)，但不能由用户选择.这可能吗?有点像只启用TinyMCE工具栏按钮，但禁用文本编辑功能.据我了解，我不能使用TinyMCE的readonly配置，它还会禁用带有所有格式设置选项(如文本突出显示，粗体，斜体等)的工具栏.

Clarification: I do not mean only that all text should automatically be selected by TinyMCE editor for changes, but I mean that without selecting at all, can it be formatted? My objective is to allow users to be able to edit only the formatting of a <div> using TinyMCE, but not to be able to change the text itself. I actually don't want the user to be able to select any text, just click on the <div>, which should automatically allow the contained text to be formatted by TinyMCE, without its text actually being changed. But the textarea should not be "selectable" for the user, if you know what I mean. It can select itself if needed (as per @Thariama's solution below), but just not by the user. Is this possible? Sort of like enabling just the TinyMCE toolbar buttons but disabling the text editing capabilities. As far as I've understood, I can't use the readonly configuration of TinyMCE it also disables the toolbar with all the formatting options (like text highlight, bold, italics etc).

推荐答案

对我来说，答案是结合使用@Thariama的设置代码:

The answer for me was to use a combination of @Thariama's setup code:

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，那么我添加了以下代码:

With a way to disable keypresses in the textarea, i.e. if my textarea has an ID of TAID, then I added this code:

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

这篇关于如何在不实际选择文本的情况下在文本上使用TinyMCE函数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！