0

我有一些 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 保留在原处，仅删除突出显示的范围。

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

谢谢 ！

4

1 回答 1

0

这将如何影响您在编辑器中显示的内容？这取决于您允许进入该字段的内容 - 您将需要一个富文本编辑器（巨大的足迹）来正确处理 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- 但你需要先到达那里，有点说。

于 2012-07-21T14:46:25.620 回答