Imixs-Faces Editor

The jQuery TinyMCE Editor will be automatically added to all textareas with the style class ‘imixs-editor’

<h:inputTextarea  class="imixs-editor"
          value="#{workflowController.workitem.item['htmldescription']}" />

The TinyMCE feature can be disabled with the option ‘disabletinymce=true’ inside the ImixsHeader tag

<i:imixsHeader disabletinymce="true" />

This will also disable the TinyMCE Plugin. To add the tinyMCE to custom textareas use the layoutImixsEditor() function during the page setup.


The first param defines the applications root context under which the tinymce scripts will be loaded. This param is required! With the optional last two params you can define the width and height of the editor.

Customizing TinyMCE

To customize the layout of the tinyMCE the default content.css file can be overwritten by an application. Place the file ‘content.css’ into the web directory


To customize the behavior of the tinyMCE you can use the tinyMCE() function during the page setup. See the following example:

<script type="text/javascript">

       // special layout für wolfwurst tiny mce 
       $(document).ready(function() {

         function layoutCustomEditor() {
              // Location of TinyMCE script
              script_url : '#{facesContext.externalContext.requestContextPath}/imixs/tinymce/jscripts/tiny_mce/tiny_mce.js',
              // General options
              theme : "advanced",
              plugins : "inlinepopups,fullscreen",
              // Theme options
              theme_advanced_buttons1 : "cut,copy,paste,removeformat,cleanup,|,undo,redo,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,hr,bullist,numlist,|,formatselect,outdent,indent,|,link,unlink,image,|,forecolor,backcolor,|,fullscreen",
              theme_advanced_buttons2 : "",
              theme_advanced_toolbar_location : "top",
              theme_advanced_toolbar_align : "left",
              width : 700,
              height : 200,
              style : "border:0px;",
              content_css : "#{facesContext.externalContext.requestContextPath}/layout/css/tinymce.css",
              theme_advanced_resizing : true,
              theme_advanced_resizing_use_cookie : false,
              theme_advanced_path : false,
              theme_advanced_statusbar_location : "none"



   <h:inputTextarea  class="custom-editor"
      value="#{workflowController.workitem.item['htmldescription']}" />