vue-webpack集成tinymce富文本框
1、安装依赖:
npm install tinymce@5.3.1 -S
npm install @tinymce/tinymce-vue@3.0.1 -S
2、在static目录下新建tinymce/plugins文件夹,将node_modules下的tinymce的skins文件夹复制到刚创建的static/tinymce/plugins目录下;
![](https://img2022.cnblogs.com/blog/1983657/202209/1983657-20220907153822835-1244514243.jpg)
3、在compoents文件夹下创建富文本框组件:imcoder-tinymce.vue
<template> <!-- 富文本 --> <div> <editor v-model="content" :init="init" :disabled="disabled" @onClick="onClick"></editor> </div> </template> <script> import Vue from 'vue' import tinymce from "tinymce/tinymce"; import Editor from "@tinymce/tinymce-vue"; import "tinymce/icons/default/icons"; import "tinymce/themes/silver"; import "tinymce/plugins/image"; import "tinymce/plugins/media"; 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"; import "tinymce/plugins/code"; import "tinymce/plugins/link"; import "tinymce/plugins/advlist"; import "tinymce/plugins/codesample"; import "tinymce/plugins/hr"; import "tinymce/plugins/fullscreen"; import "tinymce/plugins/textpattern"; import "tinymce/plugins/searchreplace"; import "tinymce/plugins/autolink"; import "tinymce/plugins/directionality"; import "tinymce/plugins/visualblocks"; import "tinymce/plugins/visualchars"; import "tinymce/plugins/template"; import "tinymce/plugins/charmap"; import "tinymce/plugins/nonbreaking"; import "tinymce/plugins/insertdatetime"; import "tinymce/plugins/imagetools"; import "tinymce/plugins/autosave"; import "tinymce/plugins/autoresize"; // 扩展插件 // import "../assets/tinymce/plugins/lineheight/plugin"; // import "../assets/tinymce/plugins/bdmap/plugin"; import $ from 'jquery' export default { components: { Editor }, props: { value: { type: String, default: "" }, disabled: { type: Boolean, default: false }, plugins: { type: [String, Array], default: "preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr nonbreaking insertdatetime advlist lists wordcount imagetools textpattern autosave bdmap autoresize lineheight" }, toolbar: { type: [String, Array], default: "code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link codesample | alignleft aligncenter alignright alignjustify outdent indent lineheight formatpainter | \ styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \ table image media charmap hr pagebreak insertdatetime | bdmap fullscreen preview" } }, data() { return { //初始化配置 init: { language_url: "/static/tinymce/langs/zh_CN.js", language: "zh_CN", skin_url: "/static/tinymce/skins/ui/oxide", height: 770, min_height: 770, max_height: 770, toolbar_mode: "wrap", plugins: this.plugins, toolbar: this.toolbar, content_style: "p {margin: 5px 0;}", fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px", font_formats: "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;", branding: 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); let fd = new FormData(); console.log( blobInfo.blob()); fd.append("file", blobInfo.blob()); // 调接口,上传图片 // this.$http({ // url: this.$http.adornUrl('/sys/quilEditImage'), // method: 'post', // data: this.$http.adornData({ // fd // },) // }).then(response => { // console.log(response); // // 后端接口返回上传图片的访问地址 // // 编辑器的上传图片内容被处理为<img src="success方法里面的参数" /> // success(response.url) // }) //改用ajax,引入jqery依赖,并在webpack.base.conf.js文件中进行引入: //1、const webpack = require('webpack') //2、plugins:[ // new webpack.ProvidePlugin({ // $: 'jquery', // jQuery: 'jquery' // }) // ] $.ajax({ type:'post', url: window.SITE_CONFIG.baseUrl+"/sys/quilEditImage", data:fd, beforeSend: function (XMLHttpRequest) { XMLHttpRequest.setRequestHeader("token", Vue.cookie.get('token'));}, contentType : false, processData : false, success:function (response) { console.log(response); success(window.SITE_CONFIG.baseUrl+"/app/"+response.url) } }); } }, content: this.value }; }, mounted() { tinymce.init({}); }, methods: { onClick(){ console.log("正在操作。。。"); console.log(this.content); } }, watch: { value(newValue) { this.content = newValue; }, content(newValue) { this.$emit("input", newValue); } } }; </script> <style lang="scss"> </style>
4、在需要使用的页面进行组件注册,并使用:
![](https://img2022.cnblogs.com/blog/1983657/202209/1983657-20220907153044995-476050140.jpg)
5、参考链接:https://cloud.tencent.com/developer/article/1648996