无法使用 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

您可能缺少 angular2-tinymce 所依赖的 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',

就是这样。谢谢

无法使用 angular2-tinymce 显示图像图标

Unable to show image icon with angular2-tinymce

tinymce

angular