Question

我知道Primefaces为p：inputTextarea提供剩余字符的功能，如下面的代码所示

<p:inputTextarea rows="1" cols="85" counter="counter" maxlength="100" counterTemplate="{0} characters remaining" value="#{managedBean.inputvalue}" ></p:inputTextarea>
<h:outputText />
<h:outputText id="counter" />

但我想在p：编辑器中做同样的事情。怎么做？ primefaces提供了这样的功能，还是我必须通过其他方式来实现这一点{比如编写这个功能}。

TIA

Answer 1

<p:editor没有选项，您可以使用jquery来解决这个问题。我的解决方案是将keyup事件绑定到编辑器我刚刚测试过，我的示例有一个表单（id：fm），一个编辑器（id：rongnk），一个outputtext（id：txt）：

<h:body onload="bindiframe()">
        <h:form id="fm"> 
            <p:editor id="rongnk" value="xxx">
            </p:editor>
            <h:outputText id="txt"/>
            <script type="text/javascript">
                var imax = 50;
                function bindiframe(){
                    $('#fm\\:rongnk').find('iframe').contents().find("body").on('keyup', function(e) {
                        ilength = $('#fm\\:rongnk').find('iframe').contents().find("body").text().length;
                        $('#fm\\:txt').html('Remain:' + (imax - ilength));
                    });
                }
            </script>
        </h:form>
    </h:body>

Answer 2

据我所知，<p:editor> tag的文档中没有“计数器”功能的属性。不过，还有maxlength属性。

因此，最好的办法是通过指定change来附加JavaScript函数来处理onchange="checkTextLength(this)"事件。要编写函数，您需要使用PrimeFaces的编辑器客户端API计算最大文本长度和当前文本长度之间的差异，并根据结果更新占位符。

p：editor Primefaces的剩余字符

2 个答案: