JCE / TinyMCE-有効なHTMLと無効なHTMLを修正しようとし続ける


9

私たちが使用したすべてのJoomlaエディターの中で、JCEは私たちの目的とクライアントに最も適しています。しかし、何かをコード化するときに問題を引き起こす可能性のあるエディターのいくつかの問題があり、それがwysiwygに切り替えられ、エディターは完全に有効なhtmlを「修正」しようとします。

質問する前に、はい、JCEが制限するすべての要素を許可するように設定しています。いいえ、htmlを検証/クリーンアップするように設定されていません。私たちが持っている唯一の制限は、エディターにコンテンツを貼り付けることです。

別紙A:

<a href="#"></a>

これは、エディタを切り替えて戻ると消えます。交換された:

<p>&nbsp;</p>

別紙B:

<a id="#nameofanchor"></a>

変更点:

<p>&nbsp;</p>

別紙C:

<div><a id="#nameofanchor"></a></div>

変更点:

<div>&nbsp;</div>

別紙D:

<a id="hello" class="link">Hello</a>

変更点:

<p><a id="hello" class="link"></a>Hello</p>

別紙E:

<a href="#">
<div>
<h2>Our Work</h2>
</div>
</a>

変更点:

<p><a href="#"></a></p>
<div>
<h2><a href="#">Our Work</a></h2>
</div>
<p>&nbsp;</p>

アンカーには名前の代わりにidを使用します。これは、HTML5では有効ですが、技術的には名前がそうでないためです。また、IDはどのユニバースでリンクへの無効な割り当てですか?

また、divをリンクでラップすることが完全に合法になったので、JCEがリンクも削除するのはなぜですか?

これは私が見逃している設定ですか?エディターを必要に応じてコーディングできるようにエディターを使用する方法について誰か洞察がありますが、クライアントは単にwysiwygに保存するだけではそれを壊すことはできませんか?

編集:これをchrome、firefox、safariでテストしました。ブラウザとは何の関係もないと思います。

編集:私はこれをコンテナ設定でテストしました。Enterの段落コンテナーと段落、およびEnterのDivコンテナーとDivの両方が原因です。他の2つは、入力時にコンテナーなしと段落なし、入力時にコンテナーなしと改行なしで発生しません。問題は-最初の設定が必要です!クライアントに疑いの恩恵を与えることは素晴らしいことですが、指示に従ってテキストに段落書式を追加することは信頼できません。

確認済み:これはTinyMCEでも発生します。

だから-私たちはこれの原因を知っています-パラグラフコンテナー設定-その設定を維持しながらどうやってそれを回避するのですか?


1
それは私だけではありません。
クレイグ

これまでの議論と、これがJCE要素のラッピング機能によるものであるという結論の後で、これが実際に何が問題であるかはわかりません。上記のようなHTMLスニペットを追加できるとお客様が信頼している場合は、エディターの状態を切り替えることで、適切な<p>タグでコンテンツをラップすることを信頼できないのはなぜですか?
FFrewin

クライアントはhtmlを追加しません。私たちはhtmlを作成し、エディター側を使用します-エディターが切り替えられるとすぐに、完全に有効なhtmlを破壊します。
Faye

いずれにせよ、htmlでいっぱいのページの編集アクセス権を顧客に付与すると、顧客が何らかの方法でHTMLを破壊する可能性が高くなります。JCEのテンプレートマネージャーやその他の「マクロ」タグを使用して、必要なマークアップを追加するという汚い仕事をしてはどうでしょうか。
FFrewin

回答:


7

私はすべてのサイトでJCEエディターを使用していますが、NoNumbersによるSourcererのインストールも開始しています。これにより、JCEエディターに簡単に[コードを挿入]ボタンが提供され、変更から保護されます。

http://www.nonumber.nl/extensions/sourcerer


ありがとうございました。これは完璧です。素晴らしいので、すでに番号がインストールされていません。これがあることは知りませんでした。これは完璧です。
Faye

1
HTMLを追加するためにSourcererを使用する必要はないはずです。
BodgeIT 2014

ああ、それでも私はしなければなりません、またはJCEは完全に有効なHTMLを取り除きます。
フェイ14

2

JCEにはいくつかの秘密の設定があります。次の設定が&nbsp;空のdivへの追加を停止することを知っています。おそらくフロートをクリアするために使用され、レンダリング時に行の高さの問題を引き起こします。

In the Editor Global Configuration, add:
remove_div_padding:1 
to Custom Configuration Variables. 

エディタのあらゆる側面を制御できるものがもっとあると思います。


1

私はそれがタイポグラフィの設定である必要があると思います:プロファイル->エディタのパラメータ->タイポグラフィ。コンテナ要素とEnterキーをEnter時にNoContainer&LineBreakに設定して、まだHTMLに変更が適用されているかどうかを確認してください。

また、HTML検証設定には各エディタープロファイルの設定があり、Joomlaはユーザーグループによって設定されたグローバル構成ページでグローバルフィルターも提供することも覚えておいてください。各ユーザーグループの設定がないことを確認してください。


ええ、私はすべてのエディタープロファイルなどに参加しています。HTMLなしで正しく設定されています。コンテナーを変更すると解決する可能性がありますが、同じように問題のある別の問題が発生します。クライアントが段落タグでラップされていないテキストコンテンツを追加できる場合、テキストのフォーマットは異なります。それも望まない。それがアンカーで同じ問題を引き起こすかどうかを確認するためにテストしますが、段落タグがそれ自体を追加する限り、それはコースの一種の標準です。
Faye

ええ、それはそれを行うコンテナ設定です-しかし、私が言ったように、それが私たちのクライアントがペーストできず、自動段落タグがコンテンツをラップすることができないというより大きな問題です。
Faye

これは、コード例に改行が含まれているために起こっていると思います。改行は、JCEが段落を作成するための一種の「ルール」です。これを行うには、そのような基準が必要です。あなたの顧客はそのようなHTMLスニペットをエディターに貼り付けるつもりですか?
FFrewin

私たちのクライアントはhtmlを使用する予定はありませんが、私たちはまだ彼らが行うことの背後にあるhtmlでコーディングします。ストレートコンテンツをペースト/入力するための領域を作成します。また、上記のように構成するのではなく、1行にhtmlを入力することを意味する場合は、私もそれを試しました。まったく同じ結果が得られます。
Faye

0

この動作はJCEに固有のものではありません。TinyMCEは同じように動作します。この動作はTinyMCEに限定されず、ブラウザのDOM動作である可能性があります。

JCEは実際にはいくつかの空のタグを保持しようとする問題に直面します。採用されている方法は、スペースで埋めることです。

https://github.com/widgetfactory/jce-editor/blob/master/editor/tiny_mce/plugins/cleanup/editor_plugin.js


嘘をつくつもりはない、これが何を意味するのか私にはわからない。もう少し分解できますか?そのリンクで私は何を見ていますか?スペースで埋めるってどういう意味?上記のコード例に改行なしのスペースを追加しても、最終結果は変わりません。徹底的にテストしました。
Faye

デフォルトのエディターを、JoomlaがプリインストールされているTinMCEに切り替えて、Exhibit Aをテストしました。また、エディターのWYSIWYGとソースビューを切り替えるときにタグを削除しました。つまり、この動作はJCEに固有のものではないようです。したがって、これもTinyMCEに固有のものではないのではないかと思います。おそらく、ブラウザーの機能を使用してインプレース編集を実行するときにも同じことが発生する可能性があります。JCEコード参照は129行目で、開始タグと終了タグの間に改行しないスペースが使用されていました。これはJCEとTinyMCEの両方で機能します。奇妙な。
Peter Wiseman
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.