Question

我在网站上添加了TinyMCE（JSF-2，Tomcat 7，Mojarra 2.1.6）。当用户点击“刷新”按钮时，编辑器中的html文本将被解析并打印在页面上的其他位置。

我必须在Ajax请求之前关闭TinyMCE（否则我最终会有两个编辑器）。这也是TinyMCE文档中的建议。

所以我在按钮上添加了一个f：ajax事件：

<h:commandButton value="#{msg['rt.refresh']}" action="#{updateTextAction.execute}" onclick="cleanupRte();">
<f:ajax event="action" execute="@this" render="@all" onevent="disposeTinyMce" />
</h:commandButton>

正确调用javascript函数：

function cleanupRte() {
  tinyMCE.triggerSave();

  return true;
}

和onevent方法：

function disposeTinyMce(e) {

    if(e.status == 'begin') {
        tinyMCE.triggerSave();

        var elem = document.getElementById("mainForm:rteExtAdr:input");
        alert(elem.value);

        tinyMCE.execCommand('mceRemoveControl', false, 'mainForm:rteExtAdr:input');
    }
    if(e.status == 'complete') {
    }
    if(e.status == 'success') { 
        tinyMCE.execCommand('mceAddControl', false, 'mainForm:rteExtAdr:input');
    }

    return true;
}

禁用编辑器并将其添加回页面。这很好。

问题是虽然警报显示正确的值，但未使用文本字段中的值更新模型。该请求还包含文本字段中的“旧”值。

是否存在阻止ajax调用查看当前表单值的内容？还是在执行onevent函数之前读取了值？

如果我完全删除了f：ajax标签，那么模型会更新，但是在响应之后，TinyMce编辑器会出现问题。

初始化电话：

tinyMCE.init({
    mode : "textareas",
    theme : "advanced",
    editor_selector : "sesamWysiwyg", 
    language : "de",
    force_br_newlines : true,
    force_p_newlines : false,
    inline_styles : false,
    forced_root_block : '', // Needed for 3.x
    plugins : "autolink,lists,style,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,searchreplace,print,paste,directionality,noneditable,visualchars,nonbreaking,xhtmlxtras,wordcount,advlist",

    formats : {
            underline : {inline : 'u', exact : true},
            strikethrough : {inline : 'del', exact : true}
    },

    theme_advanced_buttons1 : "bold,underline,strikethrough,|,cut,copy,paste,pastetext,pasteword,search,replace,|,undo,redo,|,code,removeformat,|,charmap",
        theme_advanced_buttons2 : "",
        theme_advanced_buttons3 : "",
        theme_advanced_buttons4 : "",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",

        content_css : "css/content.css",

    });

任何想法或建议都会很棒！

谢谢：）

Answer 1

这不是由onevent处理函数引起的。这是由execute="@this"属性引起的。 @this基本上意味着只会执行/处理当前组件。如果要处理整个表单（包括所有包含的输入元素），则需要使用execute="@form"。

<h:commandButton value="#{msg['rt.refresh']}" action="#{updateTextAction.execute}" onclick="cleanupRte();">
    <f:ajax execute="@form" render="@all" onevent="disposeTinyMce" />
</h:commandButton>

这样，模型将使用所有已处理输入元素的值进行更新。

或者，如果您只想处理某些输入，则需要使用例如execute="input"，其中input是输入组件的ID。它可以采用空格分隔的（相对）客户端ID字符串。

至于重新发明轮子，只需看看组件库。例如PrimeFaces有a <p:editor> component。这只是

的问题

<p:editor value="#{bean.text}" />
<p:commandButton value="Save" action="#{bean.save}" />

没有任何自定义脚本的麻烦。

f上的一个：ajax导致模型无法更新

1 个答案: