无法从 tinyMCE 编辑器中获取价值答案

【问题标题】：Can't get value from tinyMCE editor无法从 tinyMCE 编辑器中获取价值
【发布时间】：2012-12-06 08:12:50
【问题描述】：

我正在使用 JSF 2.1。我正在尝试在 .这是我的 xhtml 文件代码-

   <!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>

我的 Bean 类是

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;
    }       

}

我也在 faces-config.xml 中输入过

基本问题是，如果我尝试打印“值”，它什么也不会显示。如果我删除编辑器，那么它工作正常。所以问题出在编辑器的<h:inputtextarea> 中，因为当我尝试在getter 和setter 中打印相同的值时，它什么也没显示。我错过了什么？

【问题讨论】：

标签： forms jsf xhtml tinymce

【解决方案1】：

那是因为它不再是文本区域了。它被一个 iframe（等等）取代，并且序列化函数只从表单字段中获取数据。Problem jquery and tinymce : textarea value doesn't submit

所以你必须在发布到服务器之前提取它的值

一种方法可能是将以下内容添加到提交h:commandBttonon

onclick="tinyMCE.triggerSave();"

或者

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

如果这个解决方案比下面的解决方案不起作用（INMO 更好）

像这样修改你的h:commandButton

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

这是js函数的内容

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

现在添加另一个隐藏按钮来执行实际提交

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

【讨论】：

@Daniel- 感谢您的宝贵回复，但基本问题在于。从编辑器的文本中，当我写 value="#{EditorBean.value}" 时它应该传递值但它没有。所以为什么在命令按钮中它没有得到值。
据我了解，您需要调用 tinyMCE.triggerSave(); 之类的东西，以便 tineMCE 的值将返回到 <h:inputtextarea>
另外，您知道 Pimefaces JSF 组件库及其编辑器吗？ primefaces.org/showcase/ui/editor.jsf
是的，我知道，但不允许使用它们.. :( 你提供的解决方案也不起作用.. 它同时显示两个按钮。我该怎么办？
有一个错字，应该是display:none; + 还更新了save_and_add 函数，检查您的浏览器控制台是否存在客户端可能的错误...并调试 save_and_add 函数