我有一个这样的p:编辑器
<p:editor value="#{manageBean.profile.summary}" style="display:none;" id="txtPS" />
<i class="fa fa-edit" style="cursor:pointer;" onclick="editThis('formID:txtPS')"></i>
我的javascript函数是:
function editThis(lblshow)
{
document.getElementById(lblshow).style.display="inline";
}
默认情况下编辑器将被隐藏。当我点击图标,编辑器需要显示。
任何帮助! !
我知道,这是一个老问题,但这是我的解决方案:
不使用内联样式,而是在网站加载后用js函数设置display:none。
<p:editor value="#{manageBean.profile.summary}" id="yourId" />
<i class="fa fa-edit" style="cursor:pointer;" onclick="display(yourId)"></i>
<!-- Insert the script at the end of your body -->
<script>
window.onload = function display() {
var yourId = document.getElementById("yourId");
yourId.style.display = "none";
}
function display(ele) {
if (ele.style.display == "none") {
ele.style.display = "block";
} else {
ele.style.display = "none";
}
}
</script>
另外,如果你不想让你的用户看到任何应该隐藏的内容,只需使用css visibility属性作为inline- style。不要忘记让编辑器在脚本中再次可见。
<p:editor value="#{manageBean.profile.summary}" style="visibility: hidden;" id="yourId" />
<i class="fa fa-edit" style="cursor:pointer;" onclick="display(yourId)"></i>
<!-- Insert the script at the end of your body -->
<script>
window.onload = function display() {
var yourId = document.getElementById("yourId");
yourId.style.display = "none";
}
function display(ele) {
if (ele.style.display == "none") {
ele.style.display = "block";
ele.style.visibility = "visible";
} else {
ele.style.display = "none";
}
}
</script>
可以使用rendered
标签代替css style:
<p:editor value="#{manageBean.profile.summary}" rendered="#{manageBean.renderEditor} id="txtPS"/>
然后使用<p:remoteCommand>
从javascript调用bean
<p:remoteCommand name="myRemote" actionListener="#{manageBean.modifyRenderEditor}" update="txtPS"/>
javascript:
function editThis(lblshow)
{
myRemote();
}
Java: 和
private renderEditor=false;
public void modifyRenderEditor(){
this.renderEditor=!this.renderEditor;
}