Question

我正在使用SAPUI5并在其中使用普通的html来添加更多功能。问题是我无法从<p>元素中获取数据。我得到一个未定义的错误。我的目标是将<p>与contenteditable一起使用，以便我可以直接编辑其中的数据并同时为其添加格式。

这是我尝试将示例放在一起的尝试。

xmlView中

<mvc:View
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:core="sap.ui.core"
height="100%"
xmlns:html="http://www.w3.org/1999/xhtml"
controllerName="sap.m.sample.Button.Page">

<Page class="sapUiContentPadding" >
    <content>
        <HBox>
            <Button type="Accept"
                    text="Accept"
                    press="onPress"
                    ariaDescribedBy="acceptButtonDescription genericButtonDescription">
                <layoutData>
                    <FlexItemData growFactor="1" />
                </layoutData>
            </Button>
        </HBox>
    </content>
    <FlexBox direction="Column" alignItems="Center">
        <html:div id="divcontainer">
            <html:p id="divcontent" contenteditable="true">something something</html:p>
        </html:div>
        <html:label id="mylabel">something label here</html:label>
        <html:p id="input" contenteditable="true">
                To break lines in a text,use the <html:br></html:br>  
            <html:i>element</html:i>
        </html:p>
    </FlexBox>
</Page>
</mvc:View>

这是我的控制器，我尝试抓取数据。

sap.ui.define(['sap/m/MessageToast','sap/ui/core/mvc/Controller'],
function(MessageToast, Controller) {
"use strict";

var PageController = Controller.extend("sap.m.sample.Button.Page", {

    onPress: function (evt) {

        var div = this.getView().byId("divcontainer");

        var inputText = document.getElementById("input").innerHtml;
        //var x = inputText.textContent ? inputText.textContent : inputText.innerText;

        //var text = inputText.innerHTML();
        console.log(input);
        console.log(div);
    }
});

return PageController;

 });

Answer 1

首先，我不是非常喜欢input id，但这只是我的意见。

this.byId()位于当前视图this.getView().byId()内，对某些其他视图中的某些元素非常有用。

如果您将代码更改为此，我相信它会根据我对此的有限知识运作：

~~var inputText = this.byId（＆＃34; input＆＃34;）。innerHTML;~~ 错误：（

var inputText = this.byId("input").content();

this.byId("input").setContent("<p>" + inputText + "</p>");// now wrapped in a paragraph

请注意这里有关于XSS的未经过清理的HTML。

这也可能更好

this.getView().byId("input").setDOMContent(somedomcontent);

Answer 2

您可以使用jQuery，因为SAPUI5已经实现了它

在你的情况下，添加一个类而不是id对于普通的html非常有用。添加id会动态地加上前缀。

<html:p class="input" contenteditable="true">
     To break lines in a text,use the <html:br></html:br>  
     <html:i>element</html:i>
</html:p>

在onPress中：

onPress: function (evt) {                       
             var inputText = $(".input").html()
             console.log(inputText);
        }

如何从HTML段落中获取文本？

2 个答案: