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

Welcome to the drupal-media-mediahaven wiki!

This guide describes how to enable and use the Media Browser plugin in 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)

Text Formats

By default there are 3 text formats (Filtered / Full / Plain) available for use in the Wysiwyg. In theory you could enable 3 different editors, but for each selected editor the media browser must be enabled.

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

Buttons and plugins

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

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

![](http://zeticon.mediahaven.com/index.php/embed/image?img=89e9bf06873b4e29a18299ed0d3fdad3548aaf56fa294796aeac656b35d59d767d60d37dcf1c41c59b4b821daad84826) - Media Browser ![](http://zeticon.mediahaven.com/index.php/embed/image?img=ce767910b0fe4cd78fb96dd51825170a5786f3d1fa14478e895cbac4f063882f81025762bca44b57b8333552bf081641) - enable 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.

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)

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)

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)

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)
![](http://zeticon.mediahaven.com/index.php/embed/image?img=c6f7c395bac342e089b3297b51e75cd5827859d16a0e47c5bc8f59b7658d6cff26d409e1e119462cbbc5e9151ca75d0a)

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)

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)
Clone this wiki locally