vue中使用tinymce富文本,以及如何使用图片上传
最新在写tinymce富文本,这里特别记录一下,以便于以后方便使用,因为也涉及到图片的上传,刚刚使用的时候图片上传这里只能输入地址保存,就想能手动上传,然后在网上看了好多方法,需要这个插件那个插件的感觉很复杂,后来阴差阳错的把手动上传配置出来了,操作很简单。[tinymce中文文档](http://tinymce.ax-z.cn/)1.安装npm install tinymcenpm instal
·
最近在写tinymce富文本,这里特别记录一下,以便于以后方便使用,因为也涉及到图片的上传,刚刚使用的时候图片上传这里只能输入地址保存,就想能手动上传,然后在网上看了好多方法,需要这个插件那个插件的感觉很复杂,后来阴差阳错的把手动上传配置出来了,操作很简单。tinymce中文文档
1.安装
npm install tinymce
npm install @tinymce/tinymce-vue
2.在官网下载语言包 https://www.tiny.cloud/get-tiny/language-packages/
在目录public下边新建一个tinymce文件夹,然后在node_modules里找到tinymce的skin包,复制到public/tinymce里,新建langs文件,将语言包放到下边。
3.使用,我是将富文本做成了一个组件,具体代码如下
<!-- 富文本编辑器 -->
<template>
<div class="tinymce-editor">
<editor v-model="myValue" :init="init" :disabled="disabled" @onClick="onClick" style="height:100%;">
</editor>
</div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import Editor from "@tinymce/tinymce-vue";
import 'tinymce/themes/silver/theme'
import "tinymce/plugins/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/fullscreen' //全屏
import 'tinymce/plugins/paste'
export default {
components: {
Editor
},
props: {
value: {
type: String,
required: false
},
disabled: {
type: Boolean,
default: false
},
plugins: {
type: [String, Array],
default: 'lists image imagetools link media table textcolor wordcount contextmenu fullscreen paste'
},
toolbar: {
type: [String, Array],
default: 'imagetools bold italic underline strikethrough blockquote | forecolor backcolor | formatselect | fontsizeselect | fontselect | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists link unlink image media table | removeformat | undo redo | fullscreen',
branding: false
}
},
data() {
return {
init: {
language_url: "/tinymce/langs/zh_CN.js",
language: "zh_CN",
skin_url: "/tinymce/skins/lightgray",
plugins: this.plugins,
toolbar: this.toolbar,
branding: false, //隐藏品牌标识
branding: false, //水印
height: 500,
menubar: false, // 最上方menu菜单的显示隐藏
toolbar_drawer: true,
statusbar: false, // 隐藏编辑器底部的状态栏
elementpath: false, //禁用下角的当前标签路径
// CONFIG: Paste
paste_retain_style_properties: 'all',
paste_word_valid_elements: '*[*]', //word需要它
paste_data_images: true, // 粘贴的同时能把内容里的图片自动上传,非常强力的功能
paste_convert_word_fake_lists: false, // 插入word文档需要该属性
paste_webkit_styles: 'all',
paste_merge_formats: true,
nonbreaking_force_tab: false,
paste_auto_cleanup_on_paste: false,
//CONFIG: Font
fontsize_formats: '10px 11px 12px 14px 16px 18px 20px 24px',
images_upload_handler: (blobInfo, success) => {
this.upload(blobInfo,(e)=>{
success(e)
})
}
},
myValue: this.value,
}
},
mounted() {
tinymce.init({});
},
methods: {
onClick(e) {
this.$emit('onClick', e, tinymce)
},
//可以添加一些自己的自定义事件,如清空内容
clear() {
this.myValue = ''
},
upload(blobInfo,fn) {
let formData = new FormData()
formData.append('file', blobInfo.blob())
//这里为自己的上传接口调用方法
this.$api.product.fileUploading(formData).then(res => {
if (res.code === 200) {
fn && fn(res.result)
} else {
this.$message.error('图片上传失败')
fn && fn('')
}
})
}
},
watch: {
value(newValue) {
this.myValue = (newValue == null ? '' : newValue)
},
myValue(newValue) {
if (this.triggerChange) {
this.$emit('change', newValue)
} else {
this.$emit('input', newValue)
}
},
}
}
</script>
<style scoped>
.tinymce-editor {
width: 100%;
height: 100%;
}
</style>
4.另外 只要配置上images_upload_handler 就会出来手动上传,
如果需要粘贴图像进去,也是需要配置images_upload_handler的
更多推荐
已为社区贡献3条内容
所有评论(0)