Customizing the html-editor


Published: 7/6/2012, Author: Håkan Edling Categories: Tutorials, Piranha, 0 Comments

When you login to the manager interface for the first time you might think that the html-editor is a bit sparse on the tools it provides. But don't worry, like everything else, the editor can be changed and customized for you applications.

After you create you Piranha website you might notice that there is a folder named Areas included in the site. Below this folder you'll find the Manager area with it's Content & Views folder. The entire manager interface is based on using a virtual path provider for retrieving the manager content that's embedded inside the core Piranha dll. However, this provider always look for the corresponding file on the local filesystem first, which means that all views and resources provided as embedded resources can be overriden or changed in the project.

In this post we'll update the basic html-editor by also including the basic Tiny MCE image button. If you were to look inside the source of the Piranha core-library you'd see that the partial view for the editor is located under views/shared/partial/ so if we'll create a corresponding file in our project the virtual path provider will choose this file instead of the default one (see second attached image).

The basic file for the editor has the following syntax:

<script type="text/javascript" src="@Url.Content("~/Areas/Manager/Content/Js/Ext/tiny_mce/tiny_mce.js")"></script>
<script type="text/javascript">
  tinyMCE.init({
   mode : "specific_textareas",
    editor_selector : "editor",
    theme : "advanced",
    plugins: "spellchecker,paste,inlinepopups",
    width: "100%",
    height: "340",
    content_css: "@Url.Content("~/Areas/Manager/Content/Css/Editor.css")",
    theme_advanced_buttons1 : "bold,italic,underline,|,justifyleft,justifycenter,justifyright,|,bullist,numlist,|,formatselect,removeformat,|,cut,copy,paste,pastetext,pasteword,|,link,unlink,|,spellchecker",
    theme_advanced_buttons2 : "",
    theme_advanced_buttons3 : "",      
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_blockformats : "p,h2,h3,h4,h5,h6,blockquote,pre,code"
  });
</script>

To add the basic image functionality into the html-editor we'll simply add the keyword image to buttons. For this example we'll add it before the spellchecker:

theme_advanced_buttons1 : "bold,italic,underline,|,justifyleft,justifycenter,justifyright,|,bullist,numlist,|,formatselect,removeformat,|,cut,copy,paste,pastetext,pasteword,|,link,unlink,|,image,spellchecker"

To make sure that the new editor is loaded correctly into your webbrowser (as tinymce caches resources quite heavily) make sure to clear your browser cache before reloading your manager interface. Afterwards you should now have the basic image dialog functionality for the html-editor. For the full set of features available for the TinyMCE editor, please refer to TinyMCE homepage.

The area folder in the Piranha-project Local editor view in the project

blog comments powered by Disqus