无法在 tinyMCE 中显示从服务器收到的 HTML 文件中的图像

Question

我正在使用 GET 服务从后端（Java 项目）向前端（Angular）发送一个 HTML 文件。然后将收到的文件设置为我的 tinyMCE 编辑器的内容。该文件已正确显示，但未显示其中的图像。我的猜测是它们没有显示，因为 tinyMCE 不知道它们，我应该在 tinyMCE 配置中提供图像列表。问题是我不知道该怎么做。

到目前为止我尝试了什么：

1. 前端正在接收以下 HTML 文件：

<html>
   <body>
     <h2>HTML Image</h2>
     <img src=\"image_1.png\" alt=\"Trulli\" width=\"500\" height=\"333\">
     <img src=\"image_2.png\" alt=\"Trulli\">              
   </body>
</html>

1. tinyMCE 正确显示内容，但找不到图像。
1. 我试图在编辑器组件下保存 image_1.png 和 image_2.png，但编辑器仍然找不到图像。即结构：

editor.component.html
editor.component.css
editor.component.spec.ts
editor.component.ts
image_1.png
image_2.png

tinyMCE当前配置为：

this.tinyMceConfig = {
      branding: false,
      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", "toc"],
      height: 550,
      paste_data_images: true,
      image_advtab: true,
      imagetools_toolbar: `
        rotateleft rotateright |
        flipv fliph | 
        editimage imageoptions`,
      importcss_append: !0,
      inline: false,
      menubar: "insert",
      toolbar: `
        insertText insertfile undo redo |
        toc | formateselect |
        bold italic underline strikethrough forecolor backcolor |
        alignleft aligncenter alignright alignjustify |
        bullist numlist outdent indent |
        link image | print preview media"
        removeformat`,
      setup: editor => {
        this.editor = editor;

        editor.on('init', ed => {
          ed.target.setContent(this.data.content);
          console.log('editor initialized');
        });
        editor.on('keyup change', () => {
          const content = editor.getContent();
          this.data.content = content;
          this.onEditorContentChange.emit(content);
        });
      }
    };
  }

如有任何帮助，我们将不胜感激。

Answer 1

Angular配置文件，angular.json让你通过assets键

声明compiler/packager必须包含在包中的静态资源

"build": {
  "options": {
    ...
    "assets": [
      "src/main/webapp/assets",
      ...

您可以自由选择文件夹或单个文件，可以从相对路径assets 或绝对路径/assets 访问。这是捆绑模板中使用的资源的正确方法。

您可以在 docs 阅读更多内容。

无法在 tinyMCE 中显示从服务器收到的 HTML 文件中的图像

Can't display images inside a HTML file received from server in tinyMCE

java

rest

tinymce

angular