How to insert content inside tinymce editor using vue js?

Question

I want to insert content like <span class="some-class">text</span> inside tinymce editor using a button in vue js template. How could I accomplish that using the tinymce-vue wrapper? Here's the code:

<template>
  <tinymce-editor
    api-key="my-api-key-here"
  />
  <button @click="addContent">button</button>
</template>

import Editor from '@tinymce/tinymce-vue'

export default {
  components: {
    tinymceEditor: Editor
  },
  methods: {
    addContent () {
      tinymce.activeEditor.setContent('<span class="some-class">text</span>');
    }
  }
}

Edit:

I also installed tinymce using npm i tinymce --save and added the import import tinymce from 'tinymce/tinymce to the code above. Now I don't get the error 'tinymce' is not defined anymore, but the editor doesn't appear either.

mikyone · Accepted Answer · 2021-07-05 09:38:18Z

4

If you want to use tinymce in vue with typscritt to set up your content and avoid the undefined error you need to import tinyMCE as

import { getTinymce } from '@tinymce/tinymce-vue/lib/cjs/main/ts/TinyMCE';

Then you can set your content

 getTinymce().activeEditor.setContent('coucou');

answered Jul 5, 2021 at 9:38

mikyone

412 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tiny Lincoln · Accepted Answer · 2020-03-23 22:25:18Z

2

In your event handler for the button click, you can call TinyMCE's .setContent() method to set editor content.

Here is a demo: https://codesandbox.io/s/set-content-in-tinymce-in-vue-jzciu

Don't forget, tinymce-vue doesn't include the code for TinyMCE itself. You'll either have to use an API key (which you can get for free at tiny.cloud) or use a self-hosted installation of TinyMCE. (For more info, see Step 6, here: https://www.tiny.cloud/docs/integrations/vue/#procedure)

answered Mar 23, 2020 at 22:25

Tiny Lincoln

1,2027 silver badges7 bronze badges

1 Comment

Rodrigo Silva Over a year ago

Hi! I got the API and inserted it in the tinymce element like you said (updated code in question). Still I keep getting 'tinymce' is not defined

Black Beard · Accepted Answer · 2022-06-14 11:03:14Z

1

I finally gave up trying to get access to tinymce in Vue 3 component. It either undefined or if it is not undefined - setContent command just do nothing - no errors but still no content inserted.
I just used recommended for "@tinymce/tinymce-vue" way of data binding using v-model
It looks like this:

<Editor
      v-model="someLocalVar"
      api-key="no-api-key"
      :init="{
            plugins: 'lists link image table code help wordcount',
       }"
/>

then

watch(someLocalVar, () => {
        //do whatever you like with your someLocalVar
});

answered Jun 14, 2022 at 11:03

Black Beard

1,65619 silver badges24 bronze badges

Comments

Michael Fromin · Accepted Answer · 2020-03-23 21:19:59Z

-2

If you want to insert content into TinyMCE you should use its APIs to do so:

https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#setcontent https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#insertcontent

For example:

tinymce.activeEditor.setContent('<span class="some-class">text</span>');
tinymce.activeEditor.insertContent('<span class="some-class">text</span>');

answered Mar 23, 2020 at 21:19

Michael Fromin

13.9k2 gold badges25 silver badges35 bronze badges

3 Comments

Rodrigo Silva Over a year ago

But how can I access the tinymce.activeEditor using tinymce-vue? I don't know how to access this object or how to import it. I just get 'tinymce' is not defined. I updated the question to show what I did so far...

Michael Fromin Over a year ago

Is the tinymce is not defined error at runtime or when building the project? The Vue wrapper code grabs TinyMCE from our cloud platform at runtime so it should be available in the browser.

Rodrigo Silva Over a year ago

I found the problem. Eslint keeps telling it is not defined. But when I disabled Eslint, the application built correctly. Any ideas how can I make vue/eslint see 'tinymce' although it is not defined in code?

Collectives™ on Stack Overflow

How to insert content inside tinymce editor using vue js?

4 Answers 4

Comments

1 Comment

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related