Detailed explanation about the Self Hosted TinyMCE for Vue?

[prashant1k99]

Please provide a detailed explanation on how to use the self hosted version of tinymce-vue?

[SimonFc]

Do you mean a more detailed explanation on how to make TinyMCE available in the global scope after the tinymce-vue wrapper has been set up? (So that it wouldn't load the cloud version of TinyMCE).

We're aware that some parts of the documentation of the tinymce-wrappers(React/Angular/Vue) could be even clearer so let me know what you're looking for and I'll see if we can include that.

[prashant1k99]

Do you mean a more detailed explanation on how to make TinyMCE available in the global scope after the tinymce-vue wrapper has been set up? (So that it wouldn't load the cloud version of TinyMCE).

We're aware that some parts of the documentation of the tinymce-wrappers(React/Angular/Vue) could be even clearer so let me know what you're looking for and I'll see if we can include that.

Like the documentation for the Cloud Hosted one is given,... There should be a detailed explanation of how to use the Vue wrapper package Officially provided to work as Self Hosted....

[gadget-iom]

Please provide a detailed explanation on how to use the self hosted version of tinymce-vue?

I couldn't get tinymce-vue setup in a self-hosted configuration either. Switched to CKEditor-vue instead. Works perfectly.

[Afraithe]

Self-hosted gets a bit tricky due to loading various resources on demand, so you need to make sure the skins follow through with the packaging you do. There are also multiple ways of setting it up so even if we write some docs around this, it's not likely to exactly match your scenario. Cloud is definitely a lot easier, it just works out of the box. But we are looking into improving the docs (getting it up to date for TinyMCE 5 first, I noticed some outdated info).

[Pyronerd62]

Here's the way we found https://github.com/tinymce/tinymce-vue/issues/30#issuecomment-461616029

First Import tinymce and copy the skins folder.

npm install tinymce --save
cp -r node_modules/tinymce/skins public/skins

Then add this to your main.js or component. If you put it in your component make sure you adjust your path depending on your folder level

import "tinymce/tinymce"
import "tinymce/themes/silver" 
import "../public/skins/ui/oxide/skin.min.css"
import "../public/skins/ui/oxide/content.min.css"
import "../public/skins/content/default/content.min.css"

Then you can use the editor in any component you want.

This is how I use it but you're free to use it however you see fit. If you have to import a skin even if you don't want to use it.

<editor v-model="description"></editor>

[birdy90]

I still has some troubles, that I can't solve.

Trying to create vue single file component with this template:

<template lang='pug'>
    div
        Editor(:id='`editor-${field.alias}`' :init='editorSettings' v-model='value')

</template>

and the script is...

<script>
  const tinymce = require('tinymce/tinymce');
  window.tinymce = tinymce;
  require('tinymce/themes/silver/theme');

  const Editor = require('@tinymce/tinymce-vue').default;

  module.exports = {
    name: 'RichTextEditor',
    props: ['field', 'value'],
    data() {
      return {
        editorSettings: {
          menubar: false,
          statusbar: false,
          plugins: ['paste link image lists code'],
          language: 'ru',
          height: 640,
          toolbar: 'undo redo | bold italic | alignleft aligncenter alignright',
          language_url: '/static/files/main/tiny.mce.ru.js',

          images_upload_url: '/admin/file/upload',
          relative_urls: false,
          file_picker_types: 'image',

          image_dimensions: false,
          image_description: false,
        }
      }
    },
    ...
    components: {
      Editor,
    },
  }
</script>

But with sonfig I'm getting error Failed to initialize the editor as the document is not in standards mode. TinyMCE requires standards mode. and editor is not initialized.

In documentation I found that if I'm using require, then I have to write deafult like this:

  const tinymce = require('tinymce/tinymce').default;
  window.tinymce = tinymce;
  require('tinymce/themes/silver/theme');

  const Editor = require('@tinymce/tinymce-vue').default;

But in this case I'm getting Uncaught TypeError: Cannot read property 'util' of undefined. And if I remove require('tinymce/themes/silver/theme'); then it is initialized, but I still having a message about loading from cloud. Maybe someone can help me with what am I doing wrong

[angelicochris]

This is still an issue. I've been racking my brain trying to figure out how to do this and still can't get it to work. The main issue is the skins. As I've seen else where include the skins in some places just seem to apply them globally instead of to the component and the component itself seems to not get any styles. A simple example of a self hosted version would go a long way.

[aztral]

Please provide a detailed explanation on how to use the self hosted version of tinymce-vue?

I couldn't get tinymce-vue setup in a self-hosted configuration either. Switched to CKEditor-vue instead. Works perfectly.

I had the same problem. Thx for mentioning CKEditor as an alternative to the poor/non existent/fake even? documentation of a self hoisted vue app with TinyMCE. CKEditor works just as great for my needs and is a lot easier to set up. Just sit back, zip some coffee and follow the documentation on the CKEditor website. Took me 10-15 minutes to get running. Deeeeeceeent..! (Insert thumbs up emoji)