simpleusetinymce v1.1.3

Notice

EN   CN

This template help you eary to use the newest tinymce (6).

1. upload the image and auto send to server

2. paste the image and auto send to server

API

* Other config you can see the tinymce API

Event

DefineExpose

DEMO

public dir input tinymce resource

main.ts

import { createApp } from "vue";
import App from "./App.vue";

import TEditor from "simpleusetinymce";

createApp(App).use(TEditor).mount("#app");

App.vue

<!-- basic -->
<t-editor v-model="val" />

*.vue

<!-- i18n -->
let langArr = ["zh-Hans", "hy", "th_TH"];
let lang = ref(langArr[0]);
let val = ref("");

/**
 * You can change the lang in time,it is useful by i18n
 * this template just include Chinese、English、Thai
 */
const changeLang = () => {
  // Random switching language
  lang.value = langArr[Math.floor(Math.random() * 3)];
}

<t-editor v-model="val" :lang="lang" :key="lang" />

<!-- Custom upload function by yourself -->
const editor = ref();

/**
 * use upload function by yourself and set content to the editor
 */
const customElementUpload = (e: any) => {
  const file = e.target.files[0];

  editor.value?.upload(file, () => { }, false).then((res: any) => {
    editor.value.editorRef.setContent(`<img src="${res.location}"/>`)
  });
}

<t-editor v-model="val" :lang="lang" :key="lang">
    <template #customUploadBtn>
      <input type="file" @change="customElementUpload">
    </template> 
</t-editor>

<!-- custom tinymce config -->
// cover the config that it was used
const otherInitConfig = {
  // tinymce config
}
<t-editor v-model="val" />

// cover all the config and init tinymce
const tinymceConfig = {
  // tinymce config
}
<t-editor v-model="val" :init="tinymceConfig"/>