为什么<h：outputScript>不起作用<h:form>

我正在使用JSF 2.1。我试图在<h:inputTextarea>上使用TinyEditor。这里是我的代码，为什么<h：outputScript>不起作用<h:form>

<!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编辑器不会被初始化。

这是如何造成的，我该如何解决？

来源

2012-12-05 KalaK

<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这样的标识，以便由<h:inputTextarea>生成的<textarea>的HTML元素标识将变为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',

来源

2012-12-05 12:08:05 BalusC

这个解释非常有用，谢谢！但它不工作！ – KalaK

如果你已经理解了解释，那么你会在更详细的技术细节中阐述“它的不工作”。但你没有。所以不可能指出你的错误。 – BalusC

对不起！我没有ü说什么一样，我已经做了以下的变化，
的的样品常见问题 \t ID：“形式：输入” 所以根据代码，输入文本值之后，吸气剂Ñ设定器应该被称为其在豆。如果我删除编辑器，它工作正常！但如果我添加编辑器，它不会！根据你的解释，我觉得输入文本区域获取形式的id：输入，但是当我在TinyEditor脚本id：'form：input'中使用它时，它失败！ – KalaK

为什么<h：outputScript>不起作用<h:form>

回答

相关问题