-
Notifications
You must be signed in to change notification settings - Fork 6
Home
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.
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)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)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)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)