Question

我正在使用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编辑器无法初始化。

这是如何引起的？如何解决？

Answer 1

<h:outputScript>完美无缺。具体问题在于您自己的JavaScript代码。您在TinyEditor配置脚本中指定了“输入”ID：

id:'input',

但是，在JSF生成的HTML输出中没有带有该ID的HTML元素。是的，您应该查看JSF生成的HTML输出，因为这基本上就是浏览器检索的内容。 JavaScript不在webserver中运行，但在webbrowser中只能看到JSF生成的HTML输出。在浏览器中右键单击页面并执行查看源以自行查看。

<h:inputTextarea>生成的ID在此特定构造中具有前置<h:form>的ID。在您的特定情况下，您没有为<h:form>指定任何ID，因此JSF将自动生成j_id123之类的ID，以便<textarea>生成的<h:inputTextarea>的HTML元素ID由j_id123:input生成1}}将成为<h:form>。您需要在TinyEditor配置脚本中准确指定该ID。

但是，最好在<h:form id="form"> <h:inputTextarea id="input" /> ...上指定固定ID，因为每当您向视图添加/删除组件时，自动生成的ID都可能会更改。

<textarea>

这样生成的form:input将获得id:'form:input',的ID。然后你可以在TinyEditor配置脚本中使用它：

{{1}}

为什么<h：outputscript>在<h：form> </h：form> </h：outputscript>中不起作用

1 个答案: