示例
<template>
<div id="app">
<Editor
style="width:100%"
id="keyinfo-tinymce"
:init="init"
v-model="keyinfo"
></Editor>
</div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/modern/theme'
import '../../../../public/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/preview'
export default {
data () {
return {
keyinfo: '',
init: {
language_url: '/tinymce4.7.5/langs/zh_CN.js',
language: 'zh_CN',
skin_url: '/tinymce4.7.5/skins/lightgray',
height: 200,
placeholder: '在这里输入文字',
plugins:
'link lists image code table colorpicker textcolor wordcount contextmenu preview',
toolbar:
'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat | preview',
branding: false,
images_upload_handler: function (blobInfo, success, failure) {
var formData = new FormData()
formData.append('file', blobInfo.blob())
formData.append('bucketName', 'scp')
formData.append(
'folderName',
'notice/' +
date.getFullYear() +
'/' +
Number(date.getMonth() + 1) +
'/' +
date.getDate()
)
console.log(blobInfo)
console.log(formData)
}
}
}
},
mounted () {
tinymce.init({})
},
methods: {}
}
</script>
<style scoped lang="scss"></style>