使用 tinymce 编辑器获取故事书以使用 node_module 中的本地资产来创建组件的故事？

Question

我正在编写一个 Angular 15 应用程序，使用 formly-package 为我生成表单。 Formly 提供大多数字段以开箱即用地在其表单内部呈现，但不提供具有富文本编辑器的字段。我想为此使用tinymce。

我的目标是将 tinymce 与我的角度应用程序捆绑在一起，以便不需要使用他们的 CDN。要按照 tinmyce 文档 的第 7 节中的定义执行此操作，您只需将 node_modules 文件夹添加到 angular.json 文件的资产部分，以将它们添加到您的包中：

...
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            ...
            "assets": [
              "src/favicon.ico",
              "src/assets",
              { "glob": "**/*", "input": "node_modules/tinymce", "output": "/tinymce/" },
            ],
            ...
          }
...

现在我想要一个故事书故事，它也加载本地资产而不是从 tinymce CDN 中获取它们。那是我挣扎的地方，我该怎么做？ 故事书文档 提到只需将它们导入 stories.ts 文件就足够了。

您可以通过导入（或要求）它们来导入任何媒体资产。它使用我们的默认配置开箱即用。

但是，据我所知，这似乎不起作用。有什么问题吗？

在下面找到我正在尝试执行此操作的显式组件和故事书文件：

# formly-field-editor.component.ts
import { Component } from '@angular/core';
import { FieldType, FieldTypeConfig } from '@ngx-formly/core';

@Component({
  selector: 'app-formly-editor-field',
  templateUrl: './formly-editor-field.component.html',
  styleUrls: ['./formly-editor-field.component.scss'],
})
export class FormlyEditorFieldComponent extends FieldType<FieldTypeConfig>{
  settings = {
    plugins: [
        'advlist autolink lists link image charmap anchor',
        'searchreplace visualblocks fullscreen media',
        'table paste help wordcount'
    ],
    toolbar: [
        'undo redo | formatselect | bold italic underline strikethrough subscript superscript link unlink blockquote | backcolor forecolor hilitecolor fontsizeselect |',
        'alignleft aligncenter alignright | bullist numlist outdent indent | removeformat | table help'
    ],
    skin: 'oxide-dark',
    content_css: 'dark',
    browser_spellcheck: true,
    menubar: false,
    height: 500,
    convert_urls: false,
    relative_urls: false,
    branding: false,
    base_url: '/tinymce',
    suffix: '.min'
  };
}

# formly-field-editor.component.html
<label [for]="to['name']">{{to.label}}</label>
<editor 
  name="fieldName"
  #textEditorElement
  [formControl]="formControl"
  [formlyAttributes]="field"
  [init]="settings"
></editor>

这里是我尝试使用的故事书文件：

import { forwardRef } from '@angular/core';
import { FormGroup, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
import { FormlyBootstrapModule } from '@ngx-formly/bootstrap';
import { FormlyModule } from '@ngx-formly/core';
import { Meta, StoryFn, componentWrapperDecorator, moduleMetadata } from '@storybook/angular';
import { EditorModule } from '@tinymce/tinymce-angular';
import { FormlyEditorFieldComponent } from './formly-editor-field.component';


export default {
  title: 'DesignSystem/Organisms/FormlyEditorFieldComponent',
  component: FormlyEditorFieldComponent,
  args: {
    form: new FormGroup({}),
    model: {},
    options: {},
    fields: [
      {
        key: 'text',
        type: 'text-editor',
      },
    ],
  },
  decorators: [
    moduleMetadata({
      declarations: [
        FormlyEditorFieldComponent
      ],
      imports: [
        ReactiveFormsModule,
        FormlyBootstrapModule,
        EditorModule,
        FormlyModule.forRoot({
          types: [
            { name: 'text-editor', component: FormlyEditorFieldComponent }
          ]
        }),
      ],
      providers: [
        {
          provide: NG_VALUE_ACCESSOR,
          useExisting: forwardRef(() => FormlyEditorFieldComponent),
          multi: true
        }
      ],
    }),
    componentWrapperDecorator(() => `
      <form [formGroup]="form">
        <formly-form 
          [model]="model" 
          [fields]="fields" 
          [options]="options" 
          [form]="form"
        ></formly-form>
      </form>
    `),
  ],
} as Meta<FormlyEditorFieldComponent>;

const Template: StoryFn<FormlyEditorFieldComponent> = (args: FormlyEditorFieldComponent) => ({ 
  props: {
    ...args,
  },
});

export const Default = Template.bind({});
Default.args = {}

这将导致 tinmce.min.js 仍然从云端加载（或至少尝试）：

Answer 1

资产将您的输入路径映射到输出路径

所以你可以试试

import { EditorModule } from '${your-output-path}';// here it is '/tinymce/'

如果您的角度包是从

CDN

脚本导入的

他们恐怕你必须改变

node_modules

里面的包然后用patch-package保存你的更改，即使不推荐。