英文:
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>
我遵循了这个页面的文档,但仍然出现了这个错误 - 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 '@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 { }
And my component code:
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 : '']
});
}
}
And the HTML:
<div *ngIf="f">
<h2>Manage the Blog Post</h2>
<form [formGroup]="f">
<div>
<label>Title</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>Short Description</label>
<textarea formControlName="short_description" class="form-control"></textarea>
</div>
<editor
[init]="{
base_url: '/tinymce'
}"
formControlName="body"
></editor>
</form>
</div>
This is the error in the browser console...
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 > MyProjectName > architect > build > options > assets
"assets": [
{
"glob": "models/**/*",
"input": "node_modules/tinymce",
"output": "/"
}
]
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论