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?

I should point out that I don't need Velocity template parsing in the editor, just the ability to leave good enough alone would be perfect. — Jason Sperske, Aug 09 '12 at 23:35

Michael Robinson · Answer 1 · 2012-08-09T23:52:09.483

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.

I just tested this with my code and I'm afraid it does it too. This is starting to make me think that I'm the problem :P — Jason Sperske, Aug 09 '12 at 23:42
That is a great use of JSFiddle, however it is stubbornly reformatting the HTML. You can see this if you you click on the <> icon or try and past the first (admittedly invalid) code block and click on "Apply Source" — Jason Sperske, Aug 09 '12 at 23:49
@JasonSperske I've updated the fiddle with a Raptor instantiation that should leave your HTML well alone. — Michael Robinson, Aug 09 '12 at 23:50
@JasonSperske ah I see. Unfortunately browsers will try to fix invalid HTML as well - no matter what we do here, the browser is going to mess with invalid HTML. — Michael Robinson, Aug 09 '12 at 23:54

score 1 · Answer 2 · edited May 23 '17 at 11:48

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.

score 1 · Accepted Answer · edited Jan 30 '19 at 20:38

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>

edited Jan 30 '19 at 20:38

brooksrelyt

3,925
5
31
54

answered Jan 30 '19 at 19:51

Jon

66
4

Interesting! Use the browser’s support of code comments as a way to suppress any html reformatting. I’ve long since moved on from this project (and the company it was for) but I’ll promote this answer as the correct way to do this. Thanks :) – Jason Sperske Jan 31 '19 at 03:17

What WYSIWYG editor works with Velocity templates?

3 Answers3