突出显示html的dijit.InlineEditBox

Question

我有一些dijit.InlineEditBox小部件，现在我需要在它们上面添加一些搜索突出显示，所以我返回的结果带有一个跨度，在匹配的单词上显示class=“突出显示”。生成的代码如下所示：

<div id="title_514141" data-dojo-type="dijit.InlineEditBox" 
     data-dojo-props="editor:\'dijit.form.TextBox\', onFocus:titles.save_old_value, 
     onChange:titles.save_inline, renderAsHtml:true">Twenty Thousand Leagues <span 
     class="highlight">Under</span> the Sea</div>

然而，当我开始编辑标题时，添加的跨度显示出来了，这看起来和预期的一样。如何让编辑器删除所添加的跨度，以便只保留文本？

在这种特殊情况下，图书的标题中没有html，因此应该可以使用某种完整的标记剥离，但最好能找到一种解决方案(可能是使用dijit.Editor小部件的简短描述字段)，其中保留现有的html，只删除突出显示的跨度。

另外，如果你能建议一个更好的方法(内联编辑和单词突出显示)，请让我知道。

谢谢！

Answer 1

这将如何影响您在编辑器中显示的内容？这取决于您允许进入字段的内容-您将需要一个富文本编辑器(巨大的内存占用量)来正确处理html。

这些RegExp将裁剪掉XML标记

this.value = this.displayNode.innerHTML.replace(/<[^>]*>/, " ").replace(/<\/[^>]*>/, '');

下面是以下代码的运行示例：fiddle

<div id="title_514141" data-dojo-type="dijit.InlineEditBox" 
     data-dojo-props="editor:\'dijit.form.TextBox\', onFocus:titles.save_old_value, 
     onChange:titles.save_inline, renderAsHtml:true">Twenty Thousand Leagues <span 
     class="highlight">Under</span> the Sea

 <script type="dojo/method" event="onFocus">
   this.value = this.displayNode.innerHTML.
      replace(/<[^>]*>/, " ").
      replace(/<\/[^>]*>/, '');
   this.inherited(arguments);
 </script>
</div>

renderAsHtml属性只修剪了“一层”，所以嵌入的HTML仍然是html afaik。通过以上操作，您应该能够1)覆盖onFocus处理，2)自己设置可编辑值，3)调用“旧的”onFocus方法。

或者(因为你已经在道具中设置了所有的'titles.save_*‘，所以使用dojo/connect代替dojo/method -但是你需要先到达那里，某种程度上说。