A small editor from vue with tinyMCE
Without tinyMCE module, without css, make it easier & flexible
npm i -s tinymce awesome-vue-tinymce<template>
<Editor
v-model="value"
id="editor"
/>
<template>
<script>
import 'tinymce/themes/modern/theme';
import 'tinymce/skins/ligshtgray/skin.min.css';
import 'tinymce/skins/lightgray/content.min.css';
import AwesomeVueTinymce from 'awesome-vue-tinymce';
export default {
components: {
Editor: AwesomeVueTinymce
},
data () {
return {
value: '<p>Your Text</p>'
}
}
}
</script><template>
<awesome-vue-tinymce
id="editor"
v-model ="value"
ref="editor"
@on-ready="ready = true"
/>
</template>
<script>
export default {
methods: {
setValue (value) {
this.$refs.editor.instance.forEach((item) => {
item.setContent(value)
})
}
}
}
</script>If you would like to create your own skin, Make your skin here ,then
<template>
<Editor
v-model="value"
id="editor"
/>
<template>
<script>
import 'tinymce/themes/modern/theme';
- import 'tinymce/skins/lightgray/skin.min.css';
- import 'tinymce/skins/lightgray/content.min.css';
import './custom/skin.min.css';
import './custom/content.min.css';
import AwesomeVueTinymce from 'awesome-vue-tinymce';
export default {
components: {
Editor: AwesomeVueTinymce
},
data () {
return {
value: '<p>Your Text</p>'
}
}
}
</script>Get language from TinyMCE language
then
<template>
<Editor
v-model="value"
id="editor"
:config="{
language: 'zh_CN'
}"
/>
<template>
<script>
import 'tinymce/themes/modern/theme';
import 'tinymce/skins/lightgray/skin.min.css';
import 'tinymce/skins/lightgray/content.min.css';
import AwesomeVueTinymce from 'awesome-vue-tinymce';
import './langs/zh_CN'; // example
export default {
components: {
Editor: AwesomeVueTinymce
},
data () {
return {
value: '<p>Your Text</p>'
}
}
}
</script>MIT © maxwithu [email protected]