2

Django と Bootrap 2.32 を使用しています。この wysiwyg-bootrap をテーマにしたテキスト エディターを含めたい: http://mindmup.github.io/bootstrap-wysiwyg/。このエディターの使用法は非常に簡単です。

$('#editor').wysiwyg();

JS宣言では、それぞれをレンダリングします

<div class=editor></div>

美しい wysiwyg テキスト エディターに。

問題は、このエディターを django フォーム フィールドの 1 つに含めたいということです。私は単一のフォームを持っています:

class Article_Form(ModelForm):
    Article_text = CharField(widget=Textarea(attrs = {'id' : 'editor'}))
    class Meta:
        model= Article

、一方、Articleモデルには単純な が 1 つ含まれていCharFieldます。Article_textフォームフィールド内でエディターを機能させる機会はありますか? 上記のウィジェットでは、作成したテキストエリアを wysiwyg-editor-control ボタンで制御できません。このように form-template-tag をラップする

<div id="editor">
    {{ Article_Form.Article_text }}                                
</div>

どちらも機能しません。したがって、問題は、Django が を作成するのtextareaに対して、エディターが<div>正しくレンダリングするには が必要になることです。これを機能させる方法を知っていますか（django-wysiwygを参照せずに）。

ありがとう！

4

4 に答える 4

0

このレポを見てください: https://github.com/rochapps/django-secure-inputこれ でほとんどの問題が解決すると思います。

于 2013-08-27T17:18:07.163 に答える
0

この「プラグイン」は で動作しませんtextareaか?

{{ Article_Form.Article_text }}

次のようにレンダリングされます。

<textarea cols="40" id="id_Article_text" name="Article_text" rows="10"></textarea>

したがって、次のように wysiwyg エディターを初期化できる可能性があります。

$('#id_Article_text').wysiwyg();

contenteditable="true"ただし、プラグインを確認したところ、HTML5 の属性を使用しており、おそらくプラグインのみで動作するため、それが可能であるとは思えdivません。

したがって、Django フォームでネイティブに動作させる方法はありません。解決策は、フォームの他のフィールドを手動で表示し、テキストエリアのあるフィールドを非表示にして、代わりにエディターを表示することです。

<form action="" method="POST">

    {{ Article_Form.field1 }}
    {{ Article_Form.field2 }}

    <div class=editor></div>

    {% csrf_token %}
    <input type="submit" value="Submit" id="submit-btn" />
</form>

次に、JS を使用してフォームを送信できます。

$('#submit-btn').click(function (e) {
    e.preventDefault();

    $.ajax({
        // do your magic here. 
        // note that you can get the content of the editor with: $('#editor').cleanHtml();
    })
});

この方法はハックです。同意するので、お勧めしません。その場合は、他のプラグインを見つけてください。PEP 8もよく読んでください。

それが役に立てば幸い。

于 2013-08-11T23:04:46.603 に答える