Using TinyMCE in Ember in dev and in production

Questions Build Issues
1

I am using ember 3.20 and TinyMCE 6

The way I use TinyMCE works only in dev seemingly because of the assets fingerprinting in prod.

ember-cli-build.js

  app.import('node_modules/tinymce/tinymce.js');
  const funnel = require('broccoli-funnel');
  const tinyFiles = 'node_modules/tinymce/';
  const tinyJs = funnel(tinyFiles, {
    destDir: 'tinymce',
  });
  
  return app.toTree(tinyJs);

the component :

  import Component from '@glimmer/component';
import { task } from 'ember-concurrency';

export default class EditableText extends Component { 

  get css(){
    return this.args.css ?? false
  }

  @task(function*(){
    let model=yield this.args.model
    return model.save()
  })saveText

  @task(function*(text){
    let model=yield this.args.model
    model.set(this.args.field,text)
  })setValue
}


{{#interface/form/element-base @model.errors @field @label}}
<Textarea @value={{get @model @field}} {{tinymce-init (perform this.setValue) css=this.css }}/> 
{{interface/task-button
  task=saveText
  click=(perform saveText)
  idleText='<i class="fa fa-save"></i>'}}
{{/interface/form/element-base}}

The tinyMCE modifier used in the component :

import { modifier } from 'ember-modifier';
import tinymce from 'tinymce'; 

export default modifier(async function tinymceInit(element,[setValue],{ css }) {
  tinymce.baseURL="/marketadmin/tinymce"
  const options = {
    toolbar: '| alignleft aligncenter alignright alignjustify | styles | paste undo redo ' ,
    plugins: 'importcss',
    importcss_selector_filter: ".hero",
    menubar: false,
    target: element
  }
  if (css){
    options.content_css= "/assets/application.css"
    //options.toolbar= options.toolbar + "styleselect"
  }
  const editors = await tinymce.init(options);
  editors[0].on('input',() => {
    setValue(editors[0].getContent())
  })

});

This works in dev, however, in production ember tries to load them with the normal filename. The files are all correctly deployed in production but with a fingerprint in the filename.

How can I make it so that the multiples assets of tinymce are correctly loaded ?

2

Which network requests fail in production? I would guess that it’s internal requests that TinyMCE is making for its own files, which you have copied into your output via app.toTree(tinyJs).

In that case, you probably need to turn off asset fingerprinting for those files. See the fingerprint option to new EmberApp(), which takes all the broccoli-asset-rev options.