Geek Answers Handbook

Feincms MediaFile in RichTextContent

Is there a standard solution for inserting feincms MediaFile into a RichTextContent form element (ckeditor or tinyMCE)? I could not find in the documentation ... Now users need to copy the url insert into medialib, and then go to the page and paste ...

+6
source share
2 answers

To do this, you need to create your own implementation. Overwriting offsetRelatedLookupPopup is a bit hacky, but Django doesn't seem to have support for a better solution.

UPDATE: This ticket describes a pop-up message.

In your static folder where 'ckeditor' lives, create a plugin, for example

/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 icon file path. icon: this.path + 'images/mediaFile.png' } ); } } );

Be sure to add the plugin to the ckeditor init script, for example.

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

Not that I knew. 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): ...
0
source

More articles:


All Articles