Inline not working

[OctaneInteractive]

Hi!

I need to replicate the regular inline example, but with Vue.

So far, I have:

<div class="WYSIWYG">
  <editor inline
    api-key="[API_KEY]"
    v-model="tinyMCE.model"
    :init="tinyMCE.init"></editor>
</div>

tinyMCE: {
  init: {
    selector: '.WYSIWYG',
    menubar: false,
    plugins: [
      'advlist autolink lists link image charmap print preview anchor',
      'searchreplace visualblocks code fullscreen',
      'insertdatetime media table paste code help wordcount'
    ],
    toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat',
    content_css: [
      '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i'
    ]
  },
  model: ''
}

... and while the mode is switched to inline, there is no floating toolbar of buttons.

I've tried variations with the tag-name="div", adding the class to the component itself, nothing has worked.

Any ideas?

[SimonFc]

Perhaps the issue you have is because of the selector option(it shouldn't be used with tinymce-vue but only vanilla tinymce). Is this what you're looking for?

[OctaneInteractive]

Hi @SimonFc, I had tried it with and without the selector and it won't work.

[SimonFc]

Can you reproduce the issue you have on that CodeSandbox example I linked to?

[OctaneInteractive]

Hi @SimonFc, if I created a working version in a sandbox it wouldn't explain the reasons for it not working with the application I have, it would only prove TinyMCE works in a limited, non-production environment.

I've spent a good 3-4 hours on a multitude of different permutations, and nothing works.

[SimonFc]

Okay, do you have a (minimal) GitHub repo with a reproduction of the issue that you can share?

[OctaneInteractive]

Hi @SimonFc, the sandbox you provided does work, but that same code won't work in the application I've created.

In answer to your question, there's no cost benefit to me creating minimal working version of the application, as it would take the best part of a week of work and testing to do so (I work on this project in between client work, so I don't get a straight run at this).

Assuming there's no fix for this, I moved onto styling the editor itself, using content_css and a CSS file, but that won't work either:

Refused to apply style from 'http://localhost:8080/src/assets/styles/tinymce.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

So frustrating, and I'm hemorrhaging time.

[SimonFc]

The content_css option is only for iframe mode so it wouldn't be of any help when using it in inline mode. Also, the option is for styling the content inside the editor in iframe mode, not the external UI

If you don't get any other errors the only reason why you probably can't see the editor is because UI CSS fails to load. You're self-hosting TinyMCE right? It sounds like something could be wrong with the setup you have but it's difficult to say without a way to reproduce the issue so I'll close this. (If you provide a way to reproduce it though I could take a look at it!)

[OctaneInteractive]

Hi @SimonFc, I know this issue is done, but I've returned to this and stripped everything down to the bare bones and it still won't work.

As explained before, given the nature of the application it's impossible to share what I've got.

tinyMCE: {
  init: {
    api: process.env.TINYMCE_API_KEY,
    modelForEdit: ''
  }
}

<editor
  :api-key="tinyMCE.init.api"
  :inline=true
  v-model="tinyMCE.modelForEdit"
  :init="tinyMCE.init"></editor>

I've made numerous additional adaptations to the editor with no problems, but the inline editor is the one thing that won't work.