Feincms MediaFile in RichTextContent - django

Question

Is there a standard solution to insert a feincms MediaFile into a RichTextContent form element (ckeditor or tinyMCE) ? I haven't been able to find any in the documentation... Now users need to copy paste an url in the medialib then move over to page and paste...

Answer 1

You'll have to create your own implementation for this. Overwriting dismissRelatedLookupPopup is a bit hackish, but Django seems to lack support for a better solution.
UPDATE: This ticket describes the popup issue.
In your static folder where 'ckeditor' lives, create a plugin, e.g.
/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'
} );
}
} );
Make sure to add the plugin to the ckeditor init script, e.g.
{ name: 'insert', items : [ 'feincms','HorizontalRule','SpecialChar' ] },

Answer 2

Not that I know of. If you always (or sometimes) need a MediaFile associated with a RichTextContent, write your own content type:
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):
...