Question

我在我的项目中使用RichTextEditor来添加评论。我可以通过点击编辑评论。某些评论中有一个图像（Base64图像）。当我点击有图像的评论时，我无法在富文本编辑器中看到图像。但我可以在我的消息数据中看到图像数据。为什么我无法将图像设置为富文本编辑器。我在哪里做错了？请让我知道这个问题。

这是我的代码和截图; 截图图片链接：image

openAddCommentDialog: function(oEvent,args) {
      var _this = this;
      if (!this._oDialogAddCommentWindow) {
        this.commentEditor = new RTE("commentEditor", {
          editorType: sap.ui.richtexteditor.EditorType.TinyMCE4,
          width: "100%",
          customToolbar: true,
          showGroupFont: true,
          showGroupLink: true,
          showGroupInsert: true,
          value:""
        });
        if(args && args.commentMessage){
          debugger
          this.commentEditor.setValue("<div style='font-size:10pt;color:#646464;margin:0;padding:5px;'>"+args.commentMessage+"</div>")
          oModel.setProperty("/TicketItemModel/CommentTitle",args.commentTitle);
        }
        this._oDialogAddCommentWindow = sap.ui.xmlfragment("BnetPortal.Application.ToDo.fragments.addComment",this);
        sap.ui.getCore().byId("codeEditorContainer").addItem(this.commentEditor);
      }
      else{
        if(args && args.commentTitle){
          oModel.setProperty("/TicketItemModel/CommentTitle",args.commentTitle);
          this.commentEditor.setValue("<div style='font-size:10pt;color:#646464;margin:0;padding:5px;'>"+args.commentMessage+"</div>")
        }
        else{
          oModel.setProperty("/TicketItemModel/CommentTitle","");
          this.commentEditor.setValue("");
        }
      }
      this._oDialogAddCommentWindow.open();
    },

Answer 1

我已经解决了我的问题。我希望这种方法可以帮助其他人。这是我的代码;

openAddCommentDialog: function(oEvent,args) {
      var _this = this;
      if(sap.ui.getCore().byId("codeEditorContainer")){
        sap.ui.getCore().byId("codeEditorContainer").removeAllItems();
      }
      var commentEditor = new RTE({
        editorType: sap.ui.richtexteditor.EditorType.TinyMCE4,
        width:'100%',
        height:'100%',
        customToolbar: false,
        showGroupFont: true,
        showGroupLink: true,
        showGroupInsert: true,
        beforeEditorInit:function (oEvent) {
          tinymce.init({
            selector: 'textarea',
            width: "100%",
            height: "100%",
            theme: 'modern',
            language: 'tr',
            plugins: 'paste emoticons lists fullscreen advlist image imagetools code media link colorpicker table textcolor textpattern autolink codesample preview',
            toolbar: 'emoticons image imagetools fullscreen bold italic strikethrough fontselect fontsizeselect forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat | undo redo paste styleselect preview codesample',
            font_formats: 'Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats',
            fontsize_formats: '8pt 10pt 12pt 14pt 18pt 24pt 36pt',
            menubar: false,
            statusbar: false,
            image_advtab: false,
            paste_data_images: false,
            codesample_languages: [
                {text: 'HTML/XML', value: 'markup'},
                {text: 'JavaScript', value: 'javascript'},
                {text: 'CSS', value: 'css'},
                {text: 'PHP', value: 'php'},
                {text: 'Ruby', value: 'ruby'},
                {text: 'Python', value: 'python'},
                {text: 'Java', value: 'java'},
                {text: 'C', value: 'c'},
                {text: 'C#', value: 'csharp'},
                {text: 'C++', value: 'cpp'}
            ],
            init_instance_callback: function (editor) {
              if(args && args.commentMessage){
                editor.setContent(args.commentMessage);
                oModel.setProperty("/TicketItemModel/CommentTitle",args.commentTitle);
              }
              else{
                  if(args && args.commentTitle){
                    oModel.setProperty("/TicketItemModel/CommentTitle",args.commentTitle);
                    editor.setContent(args.commentMessage);
                  }
                  else{
                    oModel.setProperty("/TicketItemModel/CommentTitle","");
                    editor.setContent("");
                  }
              }
              // editor.on('SetContent', function (e) {
              // });
            }
           });
        },
      });
      if (!this._oDialogAddCommentWindow) {
        this._oDialogAddCommentWindow = sap.ui.xmlfragment("BnetPortal.Application.ToDo.fragments.addComment",this);
      }
      sap.ui.getCore().byId("codeEditorContainer").addItem(commentEditor);
      this._oDialogAddCommentWindow.open();
    },

Answer 2

在view.xml中，您需要添加属性sanitizeValue =“ false”或在设置值之前，您需要使用sap.ui.getCore（）。byId（“ __ xxxxxx”）。setSanitizeValue（false）

https://launchpad.support.sap.com/#/notes/2638652

SapUI5 RichTextEditor图像上传问题

2 个答案: