Quel éditeur WYSIWYG fonctionne avec les modèles Velocity ?

Question

Je travaille avec (l'excellent) CKeditor depuis un certain temps, mais lorsque j'ai commencé à le combiner avec NVelocity, j'ai commencé à rencontrer des problèmes. Il s'avère que si j'utilise un mot-clé contextuel (disons $GarbagePailKids qui inclut le HTML des lignes du tableau) comme ceci :

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

Le mode WYSIWYG de CKEditor corrige le HTML non valide :

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

Maintenant, tout ce que j'ai lu suggère que vous ne pouvez pas (ou ne pouvez pas) désactiver la capacité de CKeditor à corriger le HTML invalide, et je détesterais revenir à un simple textarea (après avoir gâté mes utilisateurs pendant si longtemps avec cet éditeur). Avez-vous des idées sur quelque chose comme CKEditor qui fonctionne ou même un plugin pour CKEditor qui empêche ce comportement ?

Answer 1

Je ne suis pas sûr que CKEditor permette le comportement que vous souhaitez. Je vous recommande d'étudier Raptor Editor. http://www.raptor-editor.com/

J'ai rassemblé un exemple de la façon d'instancier Raptor avec des options qui garantiront que l'éditeur ne tentera pas de corriger le HTML invalide - JSFiddle .

L'instanciation du Raptor est :

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

Quoi qu'il en soit, les navigateurs tentent généralement de corriger le HTML invalide.

Answer 2

Après avoir passé en revue de nombreuses implémentations WYSIWYG, j'en suis arrivé à la conclusion malheureuse que ce que j'essaie de faire ne peut pas être accompli avec un éditeur de texte riche, mais en m'inspirant de StackOverflow, je peux rendre le contenu de la zone de texte (HTML invalide et tout) dans une iframe grâce à l'aide de cette réponse J'ai créé ça :

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

Que vous pouvez voir aquí .

Maintenant, cela fait no ne résout pas le problème de la visualisation de HTML invalide d'une "manière correcte", mais il me permet de conserver l'aspect de prévisualisation des éditeurs WYSIWYG sans l'envie d'essayer de corriger le contenu.

Answer 3

Essayez ça :

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

Si $GarbagePailKids est comme ça :

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

Le résultat est :

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