dijit.InlineEditBox with highlighted html

Question

I have some dijit.InlineEditBox widgets and now I need to add some search highlighting over them, so I return the results with a span with class="highlight" over the matched words. The resulting code looks like this :

<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>

This looks as expected, however, when I start editing the title the added span shows up. How can I make the editor remove the span added so only the text remains ?

In this particular case the titles of the books have no html in them, so some kind of full tag stripping should work, but it would be nice to find a solution (in case of short description field with a dijit.Editor widget perhaps) where the existing html is left in place and only the highlighting span is removed.

Also, if you can suggest a better way to do this (inline editing and word highlighting) please let me know.

Thank you !

Answer 1

How will this affect your displayed content in the editor? It rather depends on the contents you allow into the field - you will need a rich-text editor (huge footprint) to handle html correctly.

These RegExp's will trim away XML tags

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

Here's a running example of the below code: 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>

The renderAsHtml attribute only trims 'off one layer', so embedded HTML will still be html afaik. With the above you should be able to 1) override the onFocus handling, 2) set the editable value yourself and 3) call 'old' onFocus method.

Alternatively (as seeing you have allready set 'titles.save_*' in props, use dojo/connect instead of dojo/method - but you need to get there first, sort of say.