ExpressionEngine - Silent Video Series 2

August 25th, 2009 in ExpressionEngine | Tutorials | 1 comments

Asset & Content Management with MX TinyBrowser Field for FieldFrame

About the Fieldtype

MX Tinybrowser+TinyMCE is a fieldtype for FieldFrame extension. It's a true paradigm shifter in the sense that we can now have dynamic asset management based on individual member, group, date etc. and use custom wysiwyg editor depending user needs or custom field requirements.

Installation

Installation is very simple, developer Max Lazar explains each step on his website. If you want to further configure like I did on the screencast, you need to create extra javascript files in

"/fieldtypes/mx_tinybrowser_field/tinymce_config/" folder.

Main one I am using which has all the buttons needed has the following code

tinyMCE.init({

// General options
theme : "advanced",
mode : "specific_textareas",
editor_selector : "mx_simple_image",
file_browser_callback : "tinyBrowser",
skin : "o2k7",
skin_variant : "silver",
disk_cache : true,
plugins : "inlinepopups,media,fullscreen,smcode,advimage,advlink,smeditimage",

// Theme options
theme_advanced_buttons1 : "image,smeditimage,|,bold,italic,separator,bullist,numlist,|,link,unlink,anchor,|,undo,redo,|,code,smcode,|,fullscreen",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : false,
width : "99%",

// URL
relative_urls : false,
remove_script_host : true,

// Layout
content_css : '/assets/editor.css?' + new Date().getTime(),

// Cleanup/Output
apply_source_formatting : true,
convert_fonts_to_spans : true,
convert_newlines_to_brs : false,
fix_list_elements : true,
fix_table_elements : true,
fix_nesting : true,
forced_root_block : 'p',
theme_advanced_source_editor_wrap : false,
gecko_spellcheck : true

});

It is saved as "full.js" and selected for option "TinyMCE config file" in Field Type preferences.

Next one I'm using in description field which has very limited options is saved as "simple.js" with the following code.

tinyMCE.init({

// General options
theme : "advanced",
mode : "specific_textareas",
editor_selector : "mx_simple",
file_browser_callback : "tinyBrowser",
skin : "o2k7",
skin_variant : "silver",
disk_cache : true,
plugins : "inlinepopups,media,fullscreen,smcode",
theme_advanced_buttons1 : "bold,italic,|,undo,redo,|,code,smcode,|,fullscreen",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : false,
width : "99%",

// URL
relative_urls : false,
remove_script_host : true,

// Layout
content_css : '/assets/editor.css?' + new Date().getTime(),

// Cleanup/Output
apply_source_formatting : true,
convert_fonts_to_spans : true,
convert_newlines_to_brs : false,
fix_list_elements : true,
fix_table_elements : true,
fix_nesting : true,
forced_root_block : 'p',
theme_advanced_source_editor_wrap : false,
gecko_spellcheck : true

});

Trick is to make sure file name matches the word on line 6

editor_selector : "mx_simple"

So for a file called "simple.js" we have to use above code.

Questions?

If you have any question feel free to ask me or would like to thank Max head strait to forums.

Picture of Cem Meric

email | follow | peak

Cem Meric

Cem runs a creative web design and development studio called Webunder, specialising in ExpressionEngine CMS and he is an active member of the ExpressionEngine forums.

When he's not working, he enjoys being a hero with friends.

 
Picture of adolf12

Very good work, interesting post,  bookmarked !

1 

said adolf12 about 4 years, 7 months ago

 

Commenting is not available in this entry.