SapUI5 RichTextEditor 图片上传问题 [英] SapUI5 RichTextEditor Image Upload Issue

问题描述

我在我的项目中使用 RichTextEditor 来添加评论.我可以通过点击编辑评论.一些评论中有图片(Base64 图像).当我单击带有图像的评论时，我在富文本编辑器中看不到该图像.但是我可以在我的消息数据中看到图像数据.为什么我不能将图像设置为富文本编辑器.我在哪里做错了?请让我知道这个问题.

I'm using RichTextEditor in my project to be able to add comment. I can edit comments by click. There is an image in some comments (Base64 image). When I clicked on a comment which has an image I can't see the image in rich text editor. But I can see the image data in my message data. Why I can't set the image to the rich text editor. Where I am doing mistake ? Please let me know about this issue.

这是我的代码和截图；截图图片链接:图片

Here is my code and screenshot; Screenshot image link: 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();
    },

推荐答案

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

I've solved my issue. I hope this method helps anyone else. Here is my code;

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();
    },

这篇关于SapUI5 RichTextEditor 图片上传问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！