Question

我有一个使用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 Element查看的该文本区域的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>

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

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

此致

-Rob

在TinyMCE中动态添加“内联”textedit控件

0 个答案: