Magento create frontend editor

Magento create frontend editor

Magento create frontend editor like backend with just few below code

add below code to layout.xml file of module

<default>
<reference name="head">
<action method="setCanLoadExtJs"><flag>1</flag></action>
<action method="addJs"><script>mage/adminhtml/variables.js</script></action>
<action method="addJs"><script>mage/adminhtml/wysiwyg/widget.js</script></action>
<action method="addJs"><script>lib/flex.js</script></action>
<action method="addJs"><script>lib/FABridge.js</script></action>
<action method="addJs"><script>mage/adminhtml/flexuploader.js</script></action>
<action method="addJs"><script>mage/adminhtml/browser.js</script></action>
<action method="addJs"><script>prototype/window.js</script></action>
<action method="addItem"><type>js_css</type><name>prototype/windows/themes/default.css</name></action>
<action method="addItem"><type>js_css</type><name>prototype/windows/themes/magento.css</name></action>
</reference>
</default>

Add below code to your form template

<?php 
$_storeBaseUrl = str_replace('index.php', '', Mage::getBaseUrl());
?>
<form >
<button type="button" class="scalable show-hide" style="" id="toggledetails" onclick="hideBlogEditor(this)"><span><span><span>Show / Hide Editor</span></span></span></button>
<textarea name="short_description" title="short_description" id="short_description" class="textarea "  ></textarea>
<script language="javascript" src="<?php echo $_storeBaseUrl ?>js/tiny_mce/tiny_mce.js"></script>
<script>
//< ![CDATA[
Event.observe(window, "load", function() {
tinyMCE.init({
mode : "exact",
theme : "advanced",
width: "100%",
elements : "short_description",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path_location : "bottom",
extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
theme_advanced_resize_horizontal : "false",
theme_advanced_resizing : "false",
apply_source_formatting : "true",
convert_urls : "false",
force_br_newlines : "true",
doctype : '< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">'
});
});
 
function showBlogEditor(strItemId){
    strItemId = strItemId.id
    vartheeditor = tinyMCE.get(strItemId); //strItemId is the ID of the HTML element
    if(theeditor&&theteditor.initialized){
        //you can do something here if you need
    }else{
        tinyMCE.execCommand('mceAddControl', false, strItemId);
    }
}
function hideBlogEditor(strItemId){
    if (tinyMCE.getInstanceById(strItemId))
    {
            tinyMCE.execCommand('mceFocus', false, strItemId);
            tinyMCE.execCommand('mceRemoveControl', false, strItemId);
    }           
}
//]]>
</script>
</form>