1

我有一个使用 tinymce 显示用户可以编辑/标记的 HTML 文档的应用程序。但是，我需要对他们可以编辑的内容进行一些控制，并且通常知道他们的意图是什么。例如，用户可能想要向段落添加评论。他们还可以突出显示段落中的某些短语或给段落一个标签。我还需要知道用户是否编辑了段落中的原始文本。

我想到的一种方法是让用户键入启动编辑的快捷方式（或用户插件按钮）。当用户键入快捷方式时，我想内联插入一个 textedit 控件（甚至可能是带有某些文本短语的下拉菜单）。当用户离开 textedit 时，我得到一个 onblur 事件，然后更新我的基础数据模型。

我知道我可以使用 windowmanager 创建一个弹出窗口，但我希望 UI 更具交互性并在控件周围具有文本上下文。

我试图在我的 javascript 中添加一个处理快捷方式的输入标签，但只显示一个不可编辑的文本框内联。

以下是在编辑器中单击 CTRL-I 时执行的 javascript 函数：

function insertText() {
var editor = tinyMCE.activeEditor;
if (typeof editor.selection == "undefined")
{
    return;
}

editor.insertContent('<input id="newLabel" type="textarea" name="label"

                         onblur="textEntered()"/> ');
}

之前和之后的图像：

[显然我不能发布图像，直到我有 10 个声望。想象一下前面的一段文字。ctrl-i 后在文本块中间插入了一个带边框的文本框，但它无法接收键盘焦点]

有趣的是，我将文本从 tinymce 剪切并粘贴到 Word 中，并且编辑框在 Word 中是可编辑的。

下面是通过 Chrome 的 Inspect 元素查看的该文本区域的 HTML：

==================================================== =================

<span class="M-PAC_DocNo0-Q11-A11_1" style="font-size:10.0pt; 
font-family:Verdana,Arial,Helvetica,sans-serif;color:black" 
data-mce-style="font-size: 10.0pt; font-family: Verdana,Arial,Helvetica,sans-serif; 
color: black;">I don't -- the shutdowns and the idlings that occur through the 
course of the holiday period will vary from factory to factory, as it does every year,
<input id="newLabel" name="label" type="textarea"> and that will just depend upon demand,
et cetera, for particular products that are manufactured in those factories. So some we
certainly will be idling through the course of the holidays, as we typically do. And by
the way, that's just a means by which we can most cost effectively manage when we have
open capacity, such as we do. So that's just a means by which we handle lower levels of
utilization cost effectively. So we will be doing that through the course of these 
holidays, but it will vary factory-by-factory. Okay. Tore, did you have a follow-on?</span>

==================================================== ==

对此的任何帮助将不胜感激。

问候，

-抢

4

0 回答 0