Question

我在角度我的角度5项目中使用TinyMCE编辑器，并且想要处理图像上传，这是我目前无法做到的。这是我目前的代码：
<editor name="questionStatement" apiKey="somekey" [init]='{ plugins : [ "advlist autolink lists link image charmap print preview hr anchor pagebreak", "searchreplace wordcount visualblocks visualchars code fullscreen", "insertdatetime media nonbreaking save table contextmenu directionality", "emoticons template paste textcolor colorpicker textpattern" ], toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image", past_date_images: true, external_plugins: { tiny_mce_wiris: "https://www.wiris.net/demo/plugins/tiny_mce/plugin.js" }, toolbar: "tiny_mce_wiris_formulaEditor, tiny_mce_wiris_formulaEditorChemistry" }'

我正在关注此代码示例https://codepen.io/nirajmchauhan/pen/EjQLpV，以处理图片上传。我不明白，如何将file_picker_callback函数以角度传递给编辑器？

还有其他方法，我该如何处理图片上传？

我试过阅读文档，但找不到任何东西。我已经被困在这个问题很长一段时间了，如果有人能够帮助我，那真的很棒。

Answer 1

这对我有用（我正在使用@tinymce/tinymce-angular）：

<editor [(ngModel)]="source" [init]="tinymceInit"></editor>

在构造函数或Init中：

...

this.tinymceInit = {
  plugins : [
    "advlist autolink lists link image charmap print preview hr anchor pagebreak",
    "searchreplace wordcount visualblocks visualchars code fullscreen",
    "insertdatetime media nonbreaking save table contextmenu directionality",
    "emoticons template paste textcolor colorpicker textpattern"
  ],
  toolbar : 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat',
  image_advtab : true,
  file_picker_callback : function(cb, value, meta) {
    var input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');

    // Note: In modern browsers input[type="file"] is functional without 
    // even adding it to the DOM, but that might not be the case in some older
    // or quirky browsers like IE, so you might want to add it to the DOM
    // just in case, and visually hide it. And do not forget do remove it
    // once you do not need it anymore.

    input.onchange = function() {
      var file = input.files[0];

      var reader = new FileReader();
      reader.onload = function () {
        // Note: Now we need to register the blob in TinyMCEs image blob
        // registry. In the next release this part hopefully won't be
        // necessary, as we are looking to handle it internally.
        var id = 'blobid' + (new Date()).getTime();
        var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
        var base64 = reader.result.split(',')[1];
        var blobInfo = blobCache.create(id, file, base64);
        blobCache.add(blobInfo);

        // call the callback and populate the Title field with the file name
        cb(blobInfo.blobUri(), { title: file.name });
      };
      reader.readAsDataURL(file);
    };

    input.click();
  }
}

编辑：要添加，您也可以使用functino上传文件。我宁愿拥有我正在研究的特定项目的base64数据。

如何在angular 5 Tiny MCE组件中处理图像上传？

1 个答案: