3

私はしばらくの間（優れた）CKeditorを使用してきましたが、NVelocityと組み合わせ始めたとき、問題が発生し始めました。次のようなコンテキストキーワード（たとえば、テーブル行のHTMLを含む$ GarbagePailKids）を使用するとわかります。

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

CKEditorのWYSIWYGモードは、無効なHTMLを次のように修正します。

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

今私が読んでいることはすべて、無効なHTMLを修正するCKeditorの機能をオフにしない（またはオフにできない）ことを示唆しています。このエディターで長い間ユーザーを台無しにした後、テキストエリアだけに戻すのは嫌です。 ）。動作するCKEditorのようなものや、この動作を防ぐCKEditorのプラグインについてのアイデアはありますか？

4

3 に答える 3

3

CKEditorがあなたの望む振る舞いを許可するかどうかはわかりません。RaptorEditorを調査することをお勧めします-http ://www.raptor-editor.com/

エディターが無効なHTMLを修正しようとしないようにするオプションを使用してRaptorをインスタンス化する方法の例をまとめました-JSFiddle。

Raptorのインスタンス化は次のとおりです。

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

とにかく、ブラウザは通常、無効なHTMLを修正しようとします。

于 2012-08-09T23:37:28.133 に答える
1

多くのWYSIWYG実装を調べた後、私がやろうとしていることはリッチテキストエディターでは達成できないという残念な結論に達しましたが、StackOverflowからインスピレーションを得て、テキスト領域のコンテンツ（無効なHTMLとすべて）この回答の助けを借りてiframeで私はこれを作成しました：

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

あなたはここで見ることができます。

これで、無効なHTMLが「正しい方法」で表示される問題は解決されませんが、コンテンツを修正しようとせずに、WYSIWYGエディターのプレビュー機能を維持できます。

于 2012-08-15T22:50:36.507 に答える
1

これを試して：

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

$ GarbagePailKidsが次のような場合：

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

結果は次のとおりです。

<table>
  <tbody>
    <!-- begin of rows -->
    <tr>
      <td>A</td>
    </tr>
    <tr>
      <td>B</td>
    </tr>
    <!-- end of rows -->
  </tbody>
</table>
于 2019-01-30T19:51:29.067 に答える