What WYSIWYG editor works with Velocity templates?

Question

I've been working with (the excellent) CKeditor for a while, however when I started combining it with NVelocity I started to run into trouble. It turns out if I use a context keyword (say $GarbagePailKids which includes HTML of table rows) like this:

<table>
  <tbody>$GarbagePailKids</tbody>
</table>

The WYSIWYG mode of CKEditor corrects the invalid HTML into:

$GarbagePailKids
<table>
  <tbody></tbody>
</table>

Now everything I've been reading suggests that you don't (or can't) turn off CKeditor's ability to correct invalid HTML, and I would hate to switch back to just a textarea (after spoiling my users for so long with this editor). Any ideas on something like CKEditor that does work or even a plugin for CKEditor that prevents this behavior?

Answer 1

Try this:

#set( $openComment = "<!--" )
#set( $closeComment = "-->" )
<table>
  <tbody>
      <!-- begin of rows $closeComment $GarbagePailKids $openComment end of rows -->
  </tbody>
</table>

If $GarbagePailKids is like this:

<tr>
  <td>A</td>
</tr>
<tr>
  <td>B</td>
</tr>

The result is:

<table>
  <tbody>
    <!-- begin of rows -->
    <tr>
      <td>A</td>
    </tr>
    <tr>
      <td>B</td>
    </tr>
    <!-- end of rows -->
  </tbody>
</table>

Answer 2

I'm not sure if CKEditor allows the behaviour you want. I'd recommend investigating Raptor Editor - http://www.raptor-editor.com/

I've put together an example of how to instantiate Raptor with options that will ensure the editor will not attempt to fix invalid HTML - JSFiddle.

The Raptor instantiation is:

<textarea id="raptor">
    <table>
      <tbody>$GarbagePailKids</tbody>
    </table>
</textarea>
​
<script type="text/javascript">
    $('#raptor').editor({
        // Enable editor immediately
        autoEnable: true,
        // Replace the element with the editor
        replace: true,
        // Disable the cancel, save & dock buttons
        disabledUi: ['cancel', 'save', 'dock'],
        // Disable the unsaved edits warning, and the clean & empty element plugins, both of which will attempt to fix broken HTML
        disabledPlugins: ['unsavedEditWarning', 'clean', 'emptyElement'],
        // Disable the "you have unsaved edits on this page" warning triggered when one attempts to leave the page after editing
        unloadWarning: false,
        // Plugin specific options
        plugins: {
            // Docking options forcing the editor to be always docked to the textarea
            dock: {
                docked: true,
                dockToElement: true,
                persistent: false
            }                
        }                
    }); 
</script>

Regardless, browsers will generally attempt to correct invalid HTML.

Answer 3

After clawing through many WYSIWYG implementations I've come to unfortunate conclusion that what I am trying to do cannot be accomplished with a rich-text editor, however taking inspiration from StackOverflow, I can render the contents of the text area (invalid HTML and everything) in an iframe thanks to help from this answer I created this:

<h1>Input</h1>
<textarea id='Template' style="width: 98%;">
    <p>Hello World !!</p>
</textarea>
<h1>Output</h1>
<iframe id="TemplateView" style="width: 98%;"></iframe> 
<script>
$(function() {
    var template = $('#Template'),
        view = $('#TemplateView'),
        update = function() {
            view.contents().find('html').html(template.val());
        };

    $(template ).on('keyup change', update);
    update();
});
</script>

Which you can see here.

Now this does not solve the issue of seeing invalid HTML in some "correct way", however it lets me keep the preview aspect of WYSIWYG editors without the desire to try and correct the contents.