为什么 <h:outputScript> 在 <h:form> 中不起作用答案

【问题标题】：Why <h:outputScript> does not work inside <h:form>为什么 <h:outputScript> 在 <h:form> 中不起作用
【发布时间】：2012-12-05 10:37:02
【问题描述】：

我正在使用 JSF 2.1。我正在尝试在 <h:inputTextarea> 上使用 TinyEditor。这是我的代码，

<!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="css/main.css" />
    <h:outputStylesheet library="css" name="css/dropdown.css" />    
    <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>
            <div class="quick_links">
                <div class="q_title">                   
                </div>
                <div class="q_window">
                    <div class="q_top"></div>
                    <div class="q_main">

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

                        <h:outputScript>                        
                new TINY.editor.edit('editor',{
                    id:'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 value="Savebutton" action="#{EditorBean.test}"></h:commandButton>
            </div>
            <div class="push"></div>
        </h:form>
    </div>


</h:body>
</html>

如果我删除了<h:form> 标签，那么只会显示编辑器，但<h:commandButton> 不起作用。如果我保留<h:form> 标记，那么<h:commandButton> 可以工作，但TinyEditor 编辑器没有被初始化。

这是怎么引起的，我该如何解决？

【问题讨论】：

标签： forms jsf editor tinymce facelets

【解决方案1】：

<h:outputScript> 工作得非常好。具体问题出在您自己的 JavaScript 代码中。您在 TinyEditor 配置脚本中指定了“输入”的 ID：

id:'input',

但是，在 JSF 生成的 HTML 输出中没有具有该 ID 的此类 HTML 元素。是的，您应该查看 JSF 生成的 HTML 输出，因为这基本上是浏览器正在检索的所有内容。 JavaScript 不在网络服务器中运行，而是在网络浏览器中运行，并且只看到 JSF 生成的 HTML 输出。在浏览器中右键单击页面并执行查看源代码以自己查看。

<h:inputTextarea> 的生成 ID 在此特定构造中具有前缀 <h:form> 的 ID。在您的特定情况下，您没有为<h:form> 指定任何ID，因此JSF 将自动生成一个像j_id123 这样的<textarea> 的HTML 元素ID 由<h:inputTextarea> 生成将变为j_id123:input .您需要在 TinyEditor 配置脚本中准确指定该 ID。

但是，最好在<h:form> 上指定一个固定 ID，因为每当您向视图添加/删除组件时，自动生成的 ID 可能会发生变化。

<h:form id="form">
    <h:inputTextarea id="input" />
    ...

这样生成的<textarea> 将获得form:input 的ID。然后你就可以在 TinyEditor 配置脚本中使用它了：

id:'form:input',

【讨论】：

这个解释很有用，谢谢！但它不起作用！
如果您已经理解了解释，那么您会更详细地阐述“它不工作”。但你没有。所以你不可能指出你的错误。
对不起！！我做了同样的你说的，我做了以下更改，
示例FAQ id:'form:input' 所以根据代码，输入文本值后，应该调用bean中的getter n setter。如果我删除编辑器，它工作正常！但如果我添加编辑器，它不会！根据您的解释，我觉得输入文本区域正在获取 form:input 的 id 但是当我在 TinyEditor script id:'form:input' 中使用它时，它失败了！
具体问题还不清楚。 textarea 是显示为编辑器还是未修改？
Textarea 显示为编辑器。我可以对其进行编辑操作。