CODEWITHSUNDEEP
jsftinymce
Harini
Harini

Reputation: 105

how to get value of the tinymce in jsf backing bean

I am using tinymce editor in JSF, but I am not sure how to get this value in my Backing Bean. Please if some one has used this earlier please help me out in doing this.

       <script src="resources/tiny_mce/tiny_mce.js" type="text/javascript"></script>
<script type="text/javascript">
    tinyMCE.init({
   // General options
    mode : "textareas",
    theme : "advanced",
    plugins :  "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

   // Theme options
   theme_advanced_buttons1 :"bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
   theme_advanced_buttons2 : "cut,copy,paste,pastetext,|,bullist,numlist,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,preview,|,forecolor,backcolor",
   theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,iespell,media,advhr,|,styleprops,spellchecker,|,insertfile,insertimage",
   theme_advanced_toolbar_location : "top",
   theme_advanced_toolbar_align : "left",
   theme_advanced_statusbar_location : "bottom",
   theme_advanced_resizing : true,

   // Skin options
   skin : "o2k7",
   skin_variant : "silver",

  content_css : "css/example.css",

 });


   <ice:inputTextarea id="content" value="${bean.passage}" partialSubmit="true"/>

Upvotes: 0

Views: 1641

Answers (2)

Gio
Gio

Reputation: 651

Connect the tinyMCE to your jsf component by selector

in the following example you load an own javascript file "loadhtmleditor.js" that contains the function "loadMyEditor()". This function is called in body onload. In this javascript function you connect the tinyMCE to your jsf component by selector not by mode. In the selector argument you write the html-id of the component to be connected. Be aware that in this argument the ':' separators in the html-ids generated by jsf must be masked with two backslashes! In this example: selector : "#myForm\\:myHtmlText"

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html">
<h:head>
    <script src="resources/tiny_mce/tiny_mce.js" type="text/javascript"></script>
    <script src="resources/loadhtmleditor.js" type="text/javascript"></script>
</h:head>
<h:body onload="loadMyEditor();">
    <h:form id="myForm">
        <h:inputTextarea id="myHtmlText" value="#{bean.htmlText}">
        </h:inputTextarea>
    </h:form>
</h:body>
</html>

loadhtmleditor.js:

function loadMyEditor()
{
    tinyMCE.init({
           // General options
            selector : "#myForm\\:myHtmlText",
            theme : "advanced",
            plugins :  "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
           // Theme options
           theme_advanced_buttons1 :"bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
           theme_advanced_buttons2 : "cut,copy,paste,pastetext,|,bullist,numlist,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,preview,|,forecolor,backcolor",
           theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,iespell,media,advhr,|,styleprops,spellchecker,|,insertfile,insertimage",
           theme_advanced_toolbar_location : "top",
           theme_advanced_toolbar_align : "left",
           theme_advanced_statusbar_location : "bottom",
           theme_advanced_resizing : true,
           // Skin options
           skin : "o2k7",
           skin_variant : "silver",
          content_css : "css/example.css",
         });
}

This should be sufficient to have binded your jsf bean to the tinyMCE!

Addition: If you want to react by ajax when the user changes the html content you can extend the creation of the tinyMCE editor like this:

loadhtmleditor.js:

function loadMyEditor()
{
    tinyMCE.init({
           // General options
            selector : "#myForm\\:myHtmlText",
            theme : "advanced",
            plugins :  "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
           // Theme options
           theme_advanced_buttons1 :"bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
           theme_advanced_buttons2 : "cut,copy,paste,pastetext,|,bullist,numlist,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,preview,|,forecolor,backcolor",
           theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,iespell,media,advhr,|,styleprops,spellchecker,|,insertfile,insertimage",
           theme_advanced_toolbar_location : "top",
           theme_advanced_toolbar_align : "left",
           theme_advanced_statusbar_location : "bottom",
           theme_advanced_resizing : true,
           // Skin options
           skin : "o2k7",
           skin_variant : "silver",

           init_instance_callback: function (editor)
           {
               editor.on('Change', function(e){myFunctionEditorChanged(editor);});
               editor.on('Paste', function(e){myFunctionEditorPasted(editor);});
           },
           content_css : "css/example.css"
         });
}


function myFunctionEditorChanged(editor)
{
    tinyMCE.triggerSave(); // to be shure, that the changed content is in your jsf-component...
    // do something to trigger an ajax request handeling the changed html content. 
}


function myFunctionEditorPasted(editor)
{
    tinyMCE.triggerSave(); // to be shure, that the changed content is in your jsf-component...
    // do something to trigger an ajax request handeling the changed html content. 
}

In this way you can react to all changes the user entered to the html editor by keybord or by pasting content. I didn't find a way to get informed, when the user changes the html content by the menu of tinyMCE. ( for example when the user changes some words to be bold...)

Upvotes: 1

BalusC
BalusC

Reputation: 1109292

Replace value="${bean.passage}" by value="#{bean.passage}". The ${} can't invoke a setter method, but the #{} can.

Upvotes: 1

Related Questions