Question

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

<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属性只修剪'off one layer'，因此嵌入的HTML仍然是html afaik。通过上述内容，您应该可以1）覆盖onFocus处理，2）自己设置可编辑值，3）调用'旧'onFocus方法。

或者（因为看到你已经在道具中设置'titles.save_ *'，使用dojo/connect而不是dojo/method - 但你需要先到达那里，有点说。

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

1 个答案: