带有突出显示 html 的 dijit.InlineEditBox答案

【问题标题】：dijit.InlineEditBox with highlighted html带有突出显示 html 的 dijit.InlineEditBox
【发布时间】：2012-07-28 00:46:22
【问题描述】：

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

<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 保留在原位，仅删除突出显示范围。

另外，如果您能提出更好的方法（内联编辑和单词突出显示），请告诉我。

谢谢！

【问题讨论】：

标签： dojo highlight inlineeditbox

【解决方案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 - 但你需要先到达那里，有点说。

【讨论】：