无法显示带有angular2-tinymce的图像图标

Question

我想使用tinymce edtor插入图像。我正在使用angular2-tinymce。以下是我的设置：

    TinymceModule.withConfig({
      auto_focus: false, menubar: false, statusbar: false,
      plugins: ["link", "paste", "table", "advlist", "autoresize", "lists", "code", "image"],     
      toolbar: 'formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link | image',
  }",
})

我在控制台上收到以下错误：

我在哪里做错了？

更新

我现在用以下设置更新了angular.json：

"node_modules/tinymce/plugins/image/plugin.js"        

现在又出现另一个错误：

Answer 1

您可能会缺少tinymce所依赖的angular2-tinymce依赖性。

运行以下命令：

npm install --save tinymce angular2-tinymce

Make sure you have followed all necessary steps in their usage docs。看来您也需要将一些资产复制到资产文件夹中。

Answer 2

我解决了我的问题。我已按照以下定义的步骤进行操作：

步骤1：将以下行粘贴到模块中：

import 'tinymce/plugins/image';

步骤2：使用以下行更新模块中的tinymce配置：

plugins: ['image', 'code'],      
  min_height:400,
  file_picker_types: 'image', 
  file_picker_callback: function(cb, value, meta) {
        var input = document.createElement('input') as HTMLInputElement;
        input.setAttribute('type', 'file');
        input.setAttribute('accept', 'image/*');
        input.onchange = function() {
          var res = <HTMLInputElement>this;
          var file:File = res.files[0];
          var reader = new FileReader();
          reader.onload = function () {
            var base64 = reader.result.toString();
            // call the callback and populate the Title field with the file name
            cb(base64, { title: file.name });
          };
          reader.readAsDataURL(file);
        };

        input.click();
      },
toolbar: 'formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',

就是这样。谢谢。