3

私はwymeditor内で私のウェブサイトにあるのと同じスタイルを使おうとしています。残念ながら、このエディタはほとんど文書化されていないので、私はそれを行う方法を本当に知りません。

ドキュメントは、すべてを何らかの形式で定義するスタイルシートを使用できるようなものを暗示しており、それは解析されてエディターで使用されます。私はこれを行うことができましたが、クラス（右側のパネルの2番目のボックス）でのみ可能でした。ドキュメントには例が示されていますが、コンテナではなく、クラスのみが対象です。完全なスタイルシートへのリンクがありますが、それはデッドリンクであり、例で使用されているスタイルシートはクラスのみを定義し、コンテナーは定義していません。

では、たとえばエディターで赤いh1を作成するにはどうすればよいでしょうか。または、少なくともプレビューでは。

誰かがh1やpのようなコンテナもフォーマットされてエディタで使用されるスタイルシートの完全な例をリンクまたは提供してくれたら本当にうれしいです。これが不可能な場合、他にどのような方法がありますか？

編集：

postInitを使用してCSSをiframeに挿入できます。

postInit: function(wym) {
    var $head = $(wym._box).find('iframe').contents().find("head");
    $head.append($("<link/>", { 
        rel: "stylesheet",
        href: costumIframeCss,
        type: "text/css"
     }));
}

今、私が必要とするのは、プレビューダイアログと同様のことをすることだけです。たぶんpostInitDialog（wym、wdw）で。まだよくわかりません。大きな問題は、プレビューダイアログを他のダイアログと区別する必要があることです。

4

2 に答える 2

3

更新：

wdwを使用すると、としてダイアログ ウィンドウにアクセスできることがわかりましたpostInitDialog。カッコいい。あなたがそれをした方法（更新を見て）は、Dialogでもできるのと同じです

次の画像を見てください。[プレビュー] ダイアログが開いたときにデバッグしました。
行番号を見てください。41

プレビューの検査

エディターに対して行ったことに従って、同じことを Preview At 行番号に対して行うことができます。、同じ方法でスタイルを取得して追加 41できますhead

var $head = $(wdw.document.body);
$head.append($("<link/>", { 
    rel: "stylesheet",
    href: customPreviewCss, // CSS for Preview Dialog
    type: "text/css"
}));

最初の答え:

私が理解しているように、編集中にスタイルを有効にしたいと考えています。理想的には、h1編集 (またはそのようなカスタマイズ) 中に赤色を作成するには、次のオプションしかありません。

  • ドキュメントで説明されているように、適切なクラスを使用してください - エディターのまさに目的はこれです。カスタマイズは、そこにあるものの上で行う必要があります
  • リンクした、またはエディタがアクティブなときにロードされたデフォルトのスタイルシートを編集します（inspect要素を使用して確認できます）これについては以下で説明します

エディターを使用しているときに、iframe. Aniframeには独自のスタイルがあります。次に、要素を調べます。あなたの場合は ですが、例のタグh1を使用していますp

エディター自体の検査

別のファイルからスタイルをロードすることを確認してください- wymiframe.css、行番号。タグ 51のp

したがって、独自のスタイルを変更または追加する場合は、そのファイルに移動してください。（所有している場合は、ファイルパスを取得するか、右クリックして新しいタブで開き、アドレスバーから確認します）そこのスタイルを
追加または編集h1します。終わり。
また、フォルダー内のそれぞれのhtmlファイルに移動することもできwymeditor/iframe/defaultます。linkカスタムを独自の css ファイルに追加します。このファイルで、必要なすべてのカスタマイズを行います:)

それが役に立てば幸いです！

于 2012-12-27T17:50:42.050 に答える
0

ご覧のとおり、これらは単なるサンプルです。それをオンラインのエディターとして使用することはできません。それをダウンロードして使用してみる必要があります。

http://files.wymeditor.org/wymeditor-0.5/examples/

上記は例のリストを示しています。その中で、最初のリンクで試しました。

ダウンロードするには、このリンクにアクセスしてください。

http://www.wymeditor.org/download/

欠陥の少ない最新の安定版を選択してください。

お役に立てれば。

そして、あなたが尋ねたように、それはプレビューで非常にうまく機能し、送信すると何も反映されません。

プレビューでそれを実現するには、最後から 2 番目の位置にある HTML アイコンをクリックします。

独自のコードを作成し、プレビューをクリックすると、結果が新しいポップアップ ウィンドウに表示されます。

于 2012-12-23T05:26:56.183 に答える