Angular TinyMCE加载模型失败: 从URL models/dom/model.js 加载模型。

huangapple go评论76阅读模式
英文:

Angular TinyMCE Failed to load model: dom from url models/dom/model.js

问题

我有一个Angular 14项目,正在尝试将开源的TinyMCE编辑器集成到我的项目中,但当我将编辑器代码添加到HTML时出现错误。

node_modules\tinymce\tinymce.min.js:4 Failed to load model: dom from url models/dom/model.js

配置和设置的其余部分都是正确的,但似乎我仍然遗漏了一些东西。

我正在使用:

  • "@tinymce/tinymce-angular": "^7.0.0"
  • "tinymce": "^6.3.2"

这是我的模块:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ManagementRoutingModule } from './management-routing.module';
import { PostsComponent } from './posts/list/posts.component';
import { PostDetailComponent } from './posts/post-detail/post-detail.component';
import { HomeComponent } from './home/home.component';
import { EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    PostsComponent,
    PostDetailComponent,
    HomeComponent
  ],
  imports: [
    CommonModule,
    EditorModule,
    ReactiveFormsModule,
    ManagementRoutingModule
  ],
  providers: [{ provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }],
  exports: []
})
export class ManagementModule { }

以及我的组件代码:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs';
import { BlogService } from 'src/app/services/blog.service';
import { Post, PostResponse } from 'src/app/shared/models/models';

@Component({
  selector: 'app-post-detail',
  templateUrl: './post-detail.component.html',
  styleUrls: ['./post-detail.component.scss'],
})
export class PostDetailComponent implements OnInit {
  post$!: Observable<PostResponse>;
  f: FormGroup = this.initForm();
  
  constructor(
    private router: ActivatedRoute,
    private blogService: BlogService,
    private fb: FormBuilder
  ) {}

  ngOnInit(): void {
    const slug = this.router.snapshot.paramMap.get('slug')!;
    this.blogService.getBySlug(slug)
    .subscribe({
      next: (res) => {
        if (res.data) {
          const data = res.data.attributes as Post;
          this.f = this.initForm(data);
        }
      }
    })      
  }

  initForm(m?: Post) {
    return this.fb.group({
      title: m ? m.title : '',
      short_description: m ? m.short_description : '',
      slug: m ? m.slug : '',
      body: m ? m.body : ''
    });
  }
}

以及HTML:

<div *ngIf="f">
  <h2>管理博客文章</h2>
  <form [formGroup]="f">
    <div>
      <label>标题</label>
      <input type="text" formControlName="title" class="form-control"/>
    </div>
    <div>
      <label>Slug</label>
      <input type="text" formControlName="slug" class="form-control" />
    </div>
    <div>
      <label>简短描述</label>
      <textarea formControlName="short_description" class="form-control"></textarea>
    </div>
    <editor
      [init]="{
        base_url: '/tinymce'
      }"
      formControlName="body"
    ></editor>
  </form>
</div>

这是浏览器控制台中的错误...
Angular TinyMCE加载模型失败: 从URL models/dom/model.js 加载模型。

我遵循了这个页面的文档,但仍然出现了这个错误 - https://www.tiny.cloud/docs/tinymce/6/angular-pm/

如果有关为什么出现此错误以及如何修复它的建议,将不胜感激。

英文:

I have an Angular 14 project and I'm trying to integrate the open source Tiny MCE editor in my project and I'm getting an error when I add the editor code to the HTML.

node_modules\tinymce\tinymce.min.js:4 Failed to load model: dom from url models/dom/model.js

The rest of the configuration and setup is correct, but it seems I'm still missing something.

I'm using:

  • "@tinymce/tinymce-angular": "^7.0.0"
  • "tinymce": "^6.3.2"

This is my module:

import { NgModule } from &#39;@angular/core&#39;;
import { CommonModule } from &#39;@angular/common&#39;;

import { ManagementRoutingModule } from &#39;./management-routing.module&#39;;
import { PostsComponent } from &#39;./posts/list/posts.component&#39;;
import { PostDetailComponent } from &#39;./posts/post-detail/post-detail.component&#39;;
import { HomeComponent } from &#39;./home/home.component&#39;;
import { EditorModule, TINYMCE_SCRIPT_SRC } from &#39;@tinymce/tinymce-angular&#39;;
import { ReactiveFormsModule } from &#39;@angular/forms&#39;;


@NgModule({
  declarations: [
    PostsComponent,
    PostDetailComponent,
    HomeComponent
  ],
  imports: [
    CommonModule,
    EditorModule,
    ReactiveFormsModule,
    ManagementRoutingModule
  ],
  providers: [{ provide: TINYMCE_SCRIPT_SRC, useValue: &#39;tinymce/tinymce.min.js&#39; }],
  exports: []
})
export class ManagementModule { }

And my component code:

import { Component, OnInit } from &#39;@angular/core&#39;;
import { FormBuilder, FormGroup } from &#39;@angular/forms&#39;;
import { ActivatedRoute } from &#39;@angular/router&#39;;
import { Observable } from &#39;rxjs&#39;;
import { BlogService } from &#39;src/app/services/blog.service&#39;;
import { Post, PostResponse } from &#39;src/app/shared/models/models&#39;;

@Component({
  selector: &#39;app-post-detail&#39;,
  templateUrl: &#39;./post-detail.component.html&#39;,
  styleUrls: [&#39;./post-detail.component.scss&#39;],
})
export class PostDetailComponent implements OnInit {
  post$!: Observable&lt;PostResponse&gt;;
  f: FormGroup = this.initForm();
  
  constructor(
    private router: ActivatedRoute,
    private blogService: BlogService,
    private fb: FormBuilder
  ) {}

  ngOnInit(): void {
    const slug = this.router.snapshot.paramMap.get(&#39;slug&#39;)!;
    this.blogService.getBySlug(slug)
    .subscribe({
      next: (res) =&gt; {
        if (res.data) {
          const data = res.data.attributes as Post;
          this.f = this.initForm(data);
        }
      }
    })      
  }

  initForm(m?: Post) {
    return this.fb.group({
      title: [m ? m.title : &#39;&#39;],
      short_description: [m ? m.short_description : &#39;&#39;],
      slug: [m ? m.slug : &#39;&#39;],
      body: [m ? m.body : &#39;&#39;]
    });
  }
}

And the HTML:

&lt;div *ngIf=&quot;f&quot;&gt;
  &lt;h2&gt;Manage the Blog Post&lt;/h2&gt;
  &lt;form [formGroup]=&quot;f&quot;&gt;
    &lt;div&gt;
      &lt;label&gt;Title&lt;/label&gt;
      &lt;input type=&quot;text&quot; formControlName=&quot;title&quot; class=&quot;form-control&quot;/&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;label&gt;Slug&lt;/label&gt;
      &lt;input type=&quot;text&quot; formControlName=&quot;slug&quot; class=&quot;form-control&quot; /&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;label&gt;Short Description&lt;/label&gt;
      &lt;textarea formControlName=&quot;short_description&quot; class=&quot;form-control&quot;&gt;&lt;/textarea&gt;
    &lt;/div&gt;
    &lt;editor
      [init]=&quot;{
        base_url: &#39;/tinymce&#39;
        
      }&quot;
      formControlName=&quot;body&quot;
    &gt;&lt;/editor&gt;
  &lt;/form&gt;
&lt;/div&gt;

This is the error in the browser console...
Angular TinyMCE加载模型失败: 从URL models/dom/model.js 加载模型。

I followed the docs from this page and still got this error - https://www.tiny.cloud/docs/tinymce/6/angular-pm/

Any suggestions as to why I'm getting this error and how to fix it is appreciated.

答案1

得分: 0

我在将我的Angular应用程序升级到版本15(从9版本升级)后遇到了相同的错误。

问题在于tinymce.min.js尝试加载model.js,但你的服务器无法在给定路径找到该文件。我不得不编辑我的angular.json文件,并在以下位置添加如下内容:

projects > MyProjectName > architect > build > options > assets

   {
"glob": "models/**/*",
"input": "node_modules/tinymce",
"output": "/"
}
]

这将告诉你的服务器从node_modules/tinymce/models获取所有内容,并将它们输出到"/"目录。

在你的情况下,你可能希望从你的HTML中删除base_url属性(这将默认为"/"),或根据你自己的路径偏好修改angular.json配置。

英文:

I had the same error after upgrading my Angular application to version 15 (from 9 yikes!).

The issue is that tinymce.min.js is trying to load model.js but your server cannot find the file at the given path. I had to edit my angular.json file and add the following under

projects &gt; MyProjectName &gt; architect &gt; build &gt; options &gt; assets

&quot;assets&quot;: [
{
&quot;glob&quot;: &quot;models/**/*&quot;,
&quot;input&quot;: &quot;node_modules/tinymce&quot;,
&quot;output&quot;: &quot;/&quot;
}
]

This will tell your server to grab everything from node_modules/tinymce/models and output them at "/".

In your case you might want to remove the base_url property from your HTML (will then default to "/") or modify the angular.json configuration according to your own path preference.

huangapple
  • 本文由 发表于 2023年3月1日 13:28:36
  • 转载请务必保留本文链接:https://go.coder-hub.com/75599892.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定