Can't get value from tinyMCE editor

Question

I am using JSF 2.1. I'm trying to use TinyEditor on a . Here is my code of xhtml file-

   <!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"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">
<h:head>

    <h:outputStylesheet library="css" name="editor_style.css" />
    <h:outputStylesheet library="css" name="dropdown_menu/dropdown.css" />
    <h:outputStylesheet library="css" name="css/main.css" />
    <h:outputStylesheet library="css" name="css/dropdown.css" />
    <h:outputStylesheet library="css" name="css/drop-down.css" />

    <h:outputScript name="dropdown_menu/stuHover.js"></h:outputScript>
    <h:outputScript name="js/my_js.js"></h:outputScript>
    <h:outputScript name="js/jquery.min.js"></h:outputScript>
    <h:outputScript name="js/tinyeditor.js"></h:outputScript>

</h:head>

<h:body>
    <div class="content">
        <ui:include src="/template/layout/commonLayout.xhtml" />
        <ui:include src="/template/layout/menu.xhtml" />
        <h:form id="form">
            <div class="quick_links">
                <div class="q_title"></div>
                <div class="q_window">
                    <div class="q_top"></div>
                    <div class="q_main">

                        <h:inputTextarea id="input" value="#{EditorBean.value}"
                            style="width:100%; height:300px;">Sample FAQ</h:inputTextarea>

                        <h:outputScript>                        
                new TINY.editor.edit('editor',{
                    id:'form:input',
                    width:945,
                    height:175,
                    cssclass:'te',
                    controlclass:'tecontrol',
                    rowclass:'teheader',
                    dividerclass:'tedivider',
                    controls:['bold','italic','underline','strikethrough','|','subscript','superscript','|',
                              'orderedlist','unorderedlist','|','outdent','indent','|','leftalign',
                              'centeralign','rightalign','blockjustify','|','unformat','|','undo','redo','n',
                              'font','size','style','|','hr','link','unlink'],
                    footer:true,
                    fonts:['Verdana','Arial','Georgia','Trebuchet MS'],
                    xhtml:true,
                    cssfile:'style.css',
                    bodyid:'editor',
                    footerclass:'tefooter',
                    toggle:{text:'Source',activetext:'HTML',cssclass:'toggle'},
                    resize:{cssclass:'resize'}
                });
               </h:outputScript>

                    </div>
                    <div class="q_bottom"></div>
                </div>

                <h:commandButton id="button" value="Savebutton"
                    action="#{EditorBean.test}"></h:commandButton>
            </div>
            <div class="push"></div>
        </h:form>
    </div>

    <script language="javascript">footer();</script>

</h:body>
</html>

and my Bean class is

package com.denso.rms.beans;

import java.awt.Window;
import java.io.FileOutputStream;


import com.sun.java.swing.plaf.windows.resources.windows;

public class EditorBean {     
    private String value; 


    public String getValue() {      
        return value;  
    }  

    public void setValue(String value) {

        this.value = value;         
    }  
    public String test() {
        System.out.println("Value is-" +value);
        return value;
    }       

}

Also i did entry in faces-config.xml

Basic problem is if I try print "value" it shows nothing. If i remove Editor then it works fine. So problem is in <h:inputtextarea> of editor because when i try to print the same value in getter and setter, its showing nothing. what I am missing?

score 3 · Accepted Answer · edited May 23 '17 at 12:29

3

That's because it's not a textarea any longer. It's replaced with an iframe (and whatnot), and the serialize function only gets data from form fields.Problem jquery and tinymce : textarea value doesn't submit

So you have to extract its value before posting to server

One approach could be adding the following to the submit h:commandBttonon

onclick="tinyMCE.triggerSave();"

Or

onclick="$('#form\\:input').tinymce().save();"

If this one wont work than the following solution will (is is better INMO)

Modify your h:commandButton like this

 <h:commandButton onclick="save_and_add();return false;" id="button" 
     value="Savebutton"></h:commandButton>

this is the content of the js function

function save_and_add(){
    tinyMCE.triggerSave();
    $('#form\\:button2').click();
};

now add another hidden button that will do the actual submit

<h:commandButton id="button2" style="display:none;"
 action="#{EditorBean.test}"></h:commandButton>

edited May 23 '17 at 12:29

Community

1
1

answered Dec 06 '12 at 08:28

Daniel

36,833
10
119
200

@Daniel- Thanks for your valuable reply but basic problem is with . From editor's text , it should pass value when i write value="#{EditorBean.value}" but it does'nt.so why in commandbutton its not getting value . – KalaK Dec 06 '12 at 08:39
from what I understand you need to call something like `tinyMCE.triggerSave();` in order that the value from tineMCE will get back into the `` – Daniel Dec 06 '12 at 08:43
also, are you aware of the Pimefaces JSF Component Library and their editor ? http://www.primefaces.org/showcase/ui/editor.jsf – Daniel Dec 06 '12 at 08:46
Yes i am aware ,but not allowed to use them.. :( also solution u gave is not working.. It is displaying both buttons. What should i do? – KalaK Dec 06 '12 at 09:23
had a typo , should be `display:none;` + updated the `save_and_add` function also , check your browser console for client side possible errors... and debug the save_and_add function – Daniel Dec 06 '12 at 09:29
In order to see if the input text area value is aupdate use `("#form\\:input").val();` you can use it in alert() or console.log()... – Daniel Dec 06 '12 at 09:38
@Daniel- Its Working Perfectly for me now...Thank you so much!! definitely deserve upvote.. :) – KalaK Dec 06 '12 at 09:46
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/20735/discussion-between-kalak-and-daniel) – KalaK Dec 07 '12 at 05:26
The hidden button approach . – KalaK Dec 07 '12 at 05:27
+1 Really helped me. The first solution will work correct, you can just combine this with the `action=#{}`. – Menno Apr 30 '13 at 08:17

Can't get value from tinyMCE editor

1 Answers1