TinyMCE4 绑定到 OData 属性后会消失

问题描述

我有一个智能表单，它有一个用于在以下位置获取 RichTextEditor 的容器：

<smartForm:GroupElement label="{/#Report/Detail/@sap:label}" visible="{= (${appView>/appMode} === 'edit') }">
        <VBox id="RichTextEditorContainer" visible="{= (${appView>/appMode} !== 'review') }" app:objectId="{ path:'Id',events: { change: '.onBindingObjectChange'}}" width="100%">
            <!-- Insert RichTextEditor by JS-->
        </VBox>
</smartForm:GroupElement>

正如here所说：

确保销毁 RichTextEditor 实例而不是隐藏它，并在再次显示时创建一个新实例。

我不会在 xml 中创建编辑器，而是通过事件注入它：

onBindingObjectChange: function (oEvent) {
    if (this._oRTXE) {
        this._oRTXE.destroy();
    }
    var oBox = this.getView().byId("RichTextEditorContainer");
    oBox.removeAllItems();
    this._oRTXE = new RichTextEditor({
        value: "{Detail}",editable: true,height: "120px",width: "100%",wrapping: false,editorType: "TinyMCE4",showGroupClipboard: false,showGroupFontStyle: false,showGroupStructure: false,showGroupTextAlign: false
    });
    oBox.insertItem(this._oRTXE);

}

问题是，当用户尝试快速输入时，它会显示 <p>xyz</p> 一秒钟，然后文本编辑器将消失。请看下图：

作为一种解决方法，如果我删除 value: "{Detail}"（进行绑定），那么这个问题就不会发生。此外，如果我将其绑定更改为 JSON 模型，也不会发生此错误。

解决方法

问题是 RichTextEditor 的 change 事件。虽然文档中已经写过在离开焦点或按下回车后发生更改事件，但当用户在第一次进入焦点后开始输入时也会发生。这是我的工作。将 RichTextEditor 绑定到 JSON 模型，并通过自定义事件更新 oData。

<smartForm:GroupElement label="{/#Report/Detail/@sap:label}" visible="{= (${appView>/appMode} === 'edit') }">
        <VBox id="RichTextEditorContainer" visible="{= (${appView>/appMode} !== 'review') }" app:objectId="{ path:'Id',events: { change: '.onBindingObjectChange'}}" 
app:detail="{ path:'Detail',events: { change: '.onBindingTextChange'} }"
width="100%">
            <!-- Insert RichTextEditor by JS-->
        </VBox>
</smartForm:GroupElement>

/** 
 * Event is fired when the data binding happen on RichTextEditor for object id 
 * @public 
 * @param {sap.ui.base.Event} oEvent pattern match event of data changed 
 */
onBindingObjectChange: function (oEvent) {
    var oBox = this.getView().byId("RichTextEditorContainer");
    if (this._oRTXE && this._oRTXE.data("objectId") === oBox.data("objectId")) {
        return;
    } else if(this._oRTXE) {
        this._oRTXE.destroy();
    }
    
    oBox.removeAllItems();
    this._oRTXE = new RichTextEditor({
        value: "{viewModel>/Detail}",editable: true,height: "120px",width: "100%",wrapping: false,editorType: "TinyMCE4",showGroupClipboard: false,showGroupFontStyle: false,showGroupStructure: false,showGroupTextAlign: false,change: this.onTextChanged.bind(this)
    }).attachBrowserEvent("focusin",() => {this._oRTXE.bHasFocus = true;})
      .attachBrowserEvent("focusout",() => {this._oRTXE.bHasFocus = false; this._checkWaitingChanges();});
    this._oRTXE.data("objectId",oBox.data("objectId"));
    oBox.insertItem(this._oRTXE);
},/** 
 * Event is fired when the data binding happen on RichTextEditor for text
 * @public 
 * @param {sap.ui.base.Event} oEvent pattern match event of data changed 
 */
onBindingTextChange: function (oEvent) {
    var oBox = this.getView().byId("RichTextEditorContainer");  
    this.getModel("viewModel").setProperty("/Detail",oBox.data("detail"));
},/** 
 * Event is fired when the text changed on RichTextEditor by user
 * @public 
 * @param {sap.ui.base.Event} oEvent pattern match event of text changed 
 */
onTextChanged: function (oEvent) { 
    this.getModel("viewModel").setProperty("/LastDetail",oEvent.getParameter("newValue"));
    this._oRTXE.bWaitingChanges = true;
    if(this._oRTXE.bHasFocus === false){
        this._oRTXE.bWaitingChanges = false;
        var sNewValue = oEvent.getParameter("newValue"),oBox = this.getView().byId("RichTextEditorContainer"),oContext = oBox.getBindingContext(),oModel = oContext.getModel(),sBindingPath = oContext.getPath() + "/Detail";
        oModel.setProperty(sBindingPath,sNewValue);
    }
},// Just checks if there is any changes that has not yet been written in the odata model 
_checkWaitingChanges: function(){
    if(this._oRTXE.bWaitingChanges === true){
        this._oRTXE.bWaitingChanges = false;
        var sNewValue = this.getModel("viewModel").getProperty("/LastDetail"),sNewValue);
    }
}