先安装下载
npm install --save @tinymce/tinymce-vue
npm install --save tinymce
并且在public下创建tinymce文件夹
在这里我们使用中文语言包语言包下载然后把压缩包解压到tinymce文件夹下,然后在node_modules 中找到 tinymce/skins目录,将其复制到static\tinymce目录下面
初始化tinymce-vue
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
然后在components中注册
components: {
Editor
},
接下来直接上全部代码:
<template>
<div class="tinymce-editor">
<editor v-model="contentValue"
:init="init"
>
</editor>
</div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
import 'tinymce/icons/default/icons' //解决了icons.js 报错Unexpected token '<'
// 编辑器插件plugins
// 更多插件参考:https://www.tiny.cloud/docs/plugins/
import 'tinymce/plugins/image'// 插入上传图片插件
import 'tinymce/plugins/media'// 插入视频插件
import 'tinymce/plugins/table'// 插入表格插件
import 'tinymce/plugins/lists'// 列表插件
import 'tinymce/plugins/wordcount'// 字数统计插件
export default {
components: {
Editor
},
props: ['content'],
data () {
return {
contentValue:this.content,
init: {
language_url: `tinymce/langs/zh_CN.js`,
language: 'zh_CN',
skin_url: `tinymce/skins/ui/oxide`,
content_css: `tinymce/skins/content/default/content.css`,
// skin_url: `${this.baseUrl}/tinymce/skins/ui/oxide-dark`, // 暗色系
// content_css: `${this.baseUrl}/tinymce/skins/content/dark/content.css`, // 暗色系
height: 400,
plugins: 'lists image media table wordcount',
toolbar: 'undo redo | formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat',
branding: false,
menubar: false,
// 此处为图片上传处理函数,这个直接用了base64的图片形式上传图片,
// 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
images_upload_handler: (blobInfo, success, failure) => {
const img = 'data:image/jpeg;base64,' + blobInfo.base64()
success(img)
}
},
myValue: this.value
}
},
mounted () {
tinymce.init({})
},
methods: {
},
watch: {
content (newValue) {
console.log(newValue,'监听')
this.contentValue = newValue
},
contentValue (newValue) {
this.$emit('changes', newValue)
}
}
}
</script>
在我司图片上传代码是这样的写的
images_upload_handler: (blobInfo, success, failure) => {
let formData = new FormData();
formData.append("file", blobInfo.blob());
this.$http.post("/manage/image/upload", formData).then(res => {
success( res.data.fileurl_str);
});
}
在这里需要换成后台给的图片上传接口。
在其他页面使用
<template>
<div class="chlidren">
<!-- <span>我是子组件</span>
<slot></slot>
<p>子组件</p> -->
<!-- 编辑器 -->
<div class="editors">
<editor :content="content" v-model="content" @changes="(value)=>{content=value}"></editor>
</div>
{{content}}
</div>
</template>
<script>
import editor from "@/components/editor"
export default {
components:{
editor
},
data(){
return{
content:''
}
},
methods:{
}
}