django - RichTextContent の Feincms MediaFile

Question

feincms MediaFile を RichTextContent フォーム要素 (ckeditor または tinyMCE) に挿入する標準的なソリューションはありますか? ドキュメントで何も見つけることができませんでした...今、ユーザーはmedialibにURLをコピーして貼り付け、次にページに移動して貼り付ける必要があります...

Answer 1

これには独自の実装を作成する必要があります。dismissRelatedLookupPopup の上書きは少しハックですが、Django はより良い解決策をサポートしていないようです。

更新: このチケットでは、ポップアップの問題について説明しています。

「ckeditor」が存在する静的フォルダーに、プラグインを作成します。

/app/
    /static/
        /app/
            /js/
                /ckeditor/
                    /plugins/
                        /feincms/
                            /images/
                                mediaFile.png
                            plugin.js

plugin.js

/**
 * Basic sample plugin inserting a feincms mediaFile into the CKEditor editing area.
 */

// Register the plugin with the editor.
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.plugins.html
CKEDITOR.plugins.add( 'feincms',
{
    // The plugin initialization logic goes inside this method.
    // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.pluginDefinition.html#init
    init: function(editor)
    {
        // Define an editor command that inserts a feincms. 
        // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#addCommand
        editor.addCommand( 'insertMediaFile',
            {
                // Define a function that will be fired when the command is executed.
                // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.commandDefinition.html#exec
                exec : function(editor)
                {
                    // Define your callback function
                    function insertMediaFile(imageUrl) {
                        // Insert the imageUrl into the document. Style represents some standard props.
                        // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#insertHtml
                        editor.insertHtml('<img src="/media/' + imageUrl + '" style="float:left;margin-right:10px;margin-bottom:10px;width:200px;" />');
                    }

                    var imageUrl;
                    window.dismissRelatedLookupPopup = function (win, chosenId) {
                        imageUrl = $(win.document.body).find('#_refkey_' + chosenId).val();
                        insertMediaFile(imageUrl);
                        var name = windowname_to_id(win.name);
                        var elem = document.getElementById(name);
                        if (elem) {
                            if (elem.className.indexOf('vManyToManyRawIdAdminField') != -1 && elem.value) {
                                elem.value += ',' + chosenId;
                            } else {
                                document.getElementById(name).value = chosenId;
                            }
                        }
                        win.close();
                    };

                    var win = window.open('/admin/medialibrary/mediafile/?pop=1', 'id_image', 'height=500,width=800,resizable=yes,scrollbars=yes');
                    win.focus();
                }
            });
        // Create a toolbar button that executes the plugin command. 
        // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.html#addButton
        editor.ui.addButton( 'feincms',
        {
            // Toolbar button tooltip.
            label: 'Insert MediaFile',
            // Reference to the plugin command name.
            command: 'insertMediaFile',
            // Button's icon file path.
            icon: this.path + 'images/mediaFile.png'
        } );
    }
} );

必ずプラグインを ckeditor init スクリプトに追加してください。

{ name: 'insert', items : [ 'feincms','HorizontalRule','SpecialChar' ] },

Answer 2

私が知っていることではありません。常に (または時々) RichTextContent に関連付けられた MediaFile が必要な場合は、独自のコンテンツ タイプを記述します。

from feincms.module.medialibrary.fields import MediaFileForeignKey
from feincms.content.richtext.models import RichTextContent


class RichTextAndMFContent(RichTextContent):
    mf = MediaFileForeignKey(MediaFile)

    class Meta:
        abstract = True

    def render(self, **kwargs):
        ...