2

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

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

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

4

1 回答 1

0

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

id:'input',

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

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

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

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

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

id:'form:input',
于 2012-12-05T12:08:05.350 回答