Skip to content
tuur swimberghe edited this page Mar 12, 2014 · 22 revisions

Welcome to the drupal-media-mediahaven wiki!

This guide describes how to enable and use the Media Browser plugin within a Wysiwyg editor.

Drupal natively supports over 10+ different editors, for this demo TinyMCE was used.

Setting up the Wysiwyg profiles

Prior to setting up the Wysiwyg profiles make sure you have installed the editor of your choice and ensure that the editor is configured properly.

Select "Configuration" from the admin navigation and in the "Content authoring" block click the "Wysiwyg profiles" link.

![](http://zeticon.mediahaven.com/index.php/embed/image?img=5a05acbe03bb4639a3c0b1ec9853878e9ce11cf84f7942c58ecd4d9661ffdc4ee02cf0e0d9904cc9a7de11e1488139df&w=1000)

Text Formats

There are 3 text formats available for editing nodes (Filtered / Full / Plain), next to each text format can you can select on of the installed Wysiwyg editors.

![](http://zeticon.mediahaven.com/index.php/embed/image?img=31f3460da50a4666a3774a2a9358aee300daff54d9cb4c9ba64c74b0e3a94701c1b50152f6a442379bc2937d4044da33&w=1000)

For each text format an editor can be configured separately. You can select 3 differend editors, but for each selected editor the media browser must be enabled.

![](http://zeticon.mediahaven.com/index.php/embed/image?img=b07a11dd9077408e98fc75fe6f65196aeb8e9809cbcf458fa1d067926911982609b5a6d4a96b47d48978546e6df5d1e1&w=1000)

Buttons and plugins

Edit the Wysiwyg profile and select the "buttons and plugins" tabs

![](http://zeticon.mediahaven.com/index.php/embed/image?img=89e9bf06873b4e29a18299ed0d3fdad3548aaf56fa294796aeac656b35d59d767d60d37dcf1c41c59b4b821daad84826&w=1000)

Enable the "Media Browser" option (often the last of the options) and save the form.

![](http://zeticon.mediahaven.com/index.php/embed/image?img=ce3aedbb2a204f918edadf74fbda932dbbddae348e6a4baaa5e52ea5de8fbe3122e4af4024a548889719a76754f10ec4&w=1000)

Enabling Media Tags to markup

If you get the warning "The Convert Media tags to markup filter must be enabled for the Plain text format in order to use the Media browser WYSIWYG button." click the link and enable this option on the succeeding screen.

![](http://zeticon.mediahaven.com/index.php/embed/image?img=ce767910b0fe4cd78fb96dd51825170a5786f3d1fa14478e895cbac4f063882f81025762bca44b57b8333552bf081641&w=1000)

After returning to the "Buttons and Plugins" screen the Media Browser option will be unchecked, therefore you must repeat the previous step.

![](http://zeticon.mediahaven.com/index.php/embed/image?img=a8d3012a24854bf0b1f261323ef91547301a5aa868d04852ba68dfdec79248b3584fb7950ba34988b2dfb69e41dc8bd4&w=1000)

Using Mediahaven items in a drupal node

To use a media item in a node you must ensure that the correct text format is selected. The dropdown box is located below the body textarea

Activate the Media browser plugin by clicking the button highlighted on the screenshot. For demo purposes only one plugin has been enabled, normally the editor will have have a lot more options and plugins available.

![](http://zeticon.mediahaven.com/index.php/embed/image?img=b78de6327dee4595a8a67f5c8cb45023feca7de13e2143f4bbb450fa5711cd26f188ffa09e354956b80eb5ab56061913&w=1000)

The Media Browser will be shown, if multiple media modules are enabled, you might have to select the Mediahaven tab before using the search.

Enter a searchterm and click the Apply-button.

![](http://zeticon.mediahaven.com/index.php/embed/image?img=09c52ef58f78492ab184e236e5a006ea4baa32c10d4c4946b4de5cbe57577047a5ca1629890141e9a3085f93d1946eb8&w=1000)

Select your desired media item by clicking the image, the selected image will become hightlighted with a yellow background. Confirm your selection by clicking the submit button.

![](http://zeticon.mediahaven.com/index.php/embed/image?img=48da3d25bc5142c5a7d665525e1c8179e9020243e2b74af7bc17cf8bd7045c9db7bc60e6db664a6bb422dfa56fd510c1&w=1000)
![](http://zeticon.mediahaven.com/index.php/embed/image?img=c6f7c395bac342e089b3297b51e75cd5827859d16a0e47c5bc8f59b7658d6cff26d409e1e119462cbbc5e9151ca75d0a&w=1000)

The selected media item will be shown and before inserting this item into the text body, you must choose a display type.

![](http://zeticon.mediahaven.com/index.php/embed/image?img=fdec380c4efe494d913f6ecbfd444f9df6ce80a4dc004417a3714e2d0155caa45efc2508d98343b6845d0201a4dc0302&w=1000)

The selected media item is inserted into the body field and is now available for positioning into the text.

![](http://zeticon.mediahaven.com/index.php/embed/image?img=c73a9704d8d3417fba19576f3f2928c9b8f6d949a8ea49f2bc0b22650f71a091aafec20976084aec8ca69ec9987239ea&w=1000)
Clone this wiki locally