|
|
|
|
@ -1,141 +1,141 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="tinymce">
|
|
|
|
|
<Editor v-model="myValue" :init="init" :disabled="disabled"></Editor>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import {
|
|
|
|
|
uploads
|
|
|
|
|
} from '@/api/uploads.js'
|
|
|
|
|
import tinymce from "tinymce/tinymce";
|
|
|
|
|
import Editor from "@tinymce/tinymce-vue";
|
|
|
|
|
import "/public/tinymce/skins/skin.css";
|
|
|
|
|
import "/public/tinymce/langs/zh_CN";
|
|
|
|
|
import "tinymce/themes/silver/theme";
|
|
|
|
|
import "tinymce/plugins/media";
|
|
|
|
|
import "tinymce/plugins/lists";
|
|
|
|
|
import "tinymce/plugins/table";
|
|
|
|
|
import "tinymce/plugins/hr";
|
|
|
|
|
import "tinymce/plugins/autolink";
|
|
|
|
|
import "tinymce/plugins/help";
|
|
|
|
|
import "tinymce/plugins/visualblocks";
|
|
|
|
|
import "tinymce/plugins/fullscreen";
|
|
|
|
|
import "tinymce/plugins/textpattern";
|
|
|
|
|
import "tinymce/plugins/contextmenu";
|
|
|
|
|
import "tinymce/plugins/wordcount";
|
|
|
|
|
import "tinymce/plugins/colorpicker";
|
|
|
|
|
import "tinymce/plugins/textcolor";
|
|
|
|
|
import "tinymce/icons/default"
|
|
|
|
|
import 'tinymce/plugins/code'
|
|
|
|
|
import "tinymce/plugins/image"
|
|
|
|
|
<template>
|
|
|
|
|
<div class="tinymce">
|
|
|
|
|
<Editor v-model="myValue" :init="init" :disabled="disabled"></Editor>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import {
|
|
|
|
|
uploads
|
|
|
|
|
} from '@/api/uploads.js'
|
|
|
|
|
import tinymce from "tinymce/tinymce";
|
|
|
|
|
import Editor from "@tinymce/tinymce-vue";
|
|
|
|
|
import "/public/tinymce/skins/skin.css";
|
|
|
|
|
import "/public/tinymce/langs/zh_CN";
|
|
|
|
|
import "tinymce/themes/silver/theme";
|
|
|
|
|
import "tinymce/plugins/media";
|
|
|
|
|
import "tinymce/plugins/lists";
|
|
|
|
|
import "tinymce/plugins/table";
|
|
|
|
|
import "tinymce/plugins/hr";
|
|
|
|
|
import "tinymce/plugins/autolink";
|
|
|
|
|
import "tinymce/plugins/help";
|
|
|
|
|
import "tinymce/plugins/visualblocks";
|
|
|
|
|
import "tinymce/plugins/fullscreen";
|
|
|
|
|
import "tinymce/plugins/textpattern";
|
|
|
|
|
import "tinymce/plugins/contextmenu";
|
|
|
|
|
import "tinymce/plugins/wordcount";
|
|
|
|
|
import "tinymce/plugins/colorpicker";
|
|
|
|
|
import "tinymce/plugins/textcolor";
|
|
|
|
|
import "tinymce/icons/default"
|
|
|
|
|
import 'tinymce/plugins/code'
|
|
|
|
|
import "tinymce/plugins/image"
|
|
|
|
|
import "tinymce/plugins/imagetools"
|
|
|
|
|
import "/public/tinymce/plugins/axupimgs/plugin.js"
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
Editor
|
|
|
|
|
},
|
|
|
|
|
props: {
|
|
|
|
|
height: {
|
|
|
|
|
type: Number,
|
|
|
|
|
default: 300,
|
|
|
|
|
},
|
|
|
|
|
value: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: "",
|
|
|
|
|
},
|
|
|
|
|
disabled: {
|
|
|
|
|
type: Boolean,
|
|
|
|
|
default: false,
|
|
|
|
|
},
|
|
|
|
|
plugins: {
|
|
|
|
|
type: [String, Array],
|
|
|
|
|
default: "code image axupimgs paste preview searchreplace autolink directionality visualblocks visualchars fullscreen template codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave ",
|
|
|
|
|
},
|
|
|
|
|
toolbar: {
|
|
|
|
|
type: [String, Array],
|
|
|
|
|
default: ` undo redo restoredraft | code | image | axupimgs | imagetools | assignment | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough anchor | alignleft aligncenter alignright alignjustify outdent indent |
|
|
|
|
|
styleselect formatselect fontselect fontsizeselect | table charmap emoticons hr pagebreak | bullist numlist | blockquote subscript superscript removeformat |
|
|
|
|
|
insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter`,
|
|
|
|
|
},
|
|
|
|
|
menubar: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: "edit insert view format table CardBtn",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
myValue: this.value,
|
|
|
|
|
showImg: false,
|
|
|
|
|
imgUploadUrl: `${process.env.VUE_APP_UPLOAD_API}`,
|
|
|
|
|
init: {
|
|
|
|
|
language_url: "/public/tinymce/langs/zh_CN.js", // 这里需要单独处理
|
|
|
|
|
language: "zh_CN",
|
|
|
|
|
height: this.height,
|
|
|
|
|
plugins: this.plugins,
|
|
|
|
|
fontsize_formats: "8px 10px 12px 14px 16px 18px 24px 28px 36px",
|
|
|
|
|
toolbar: this.toolbar,
|
|
|
|
|
branding: false,
|
|
|
|
|
menubar: this.menubar,
|
|
|
|
|
// 图片上传三个参数，图片数据，成功时的回调函数，失败时的回调函数
|
|
|
|
|
images_upload_url: this.imgUploadUrl,
|
|
|
|
|
images_upload_handler: (blobInfo, success, failure) => {
|
|
|
|
|
this.handleImgUpload(blobInfo, success, failure);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
handleImgUpload(blobInfo, success, failure) {
|
|
|
|
|
console.log("我要上传", blobInfo);
|
|
|
|
|
let self = this;
|
|
|
|
|
let file = blobInfo.blob();
|
|
|
|
|
const isLt2M = file.size / 1024 < 2048;
|
|
|
|
|
if (!isLt2M) {
|
|
|
|
|
failure("上传失败，图片不可超过2M!");
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
let formdate = new FormData();
|
|
|
|
|
formdate.append("file", blobInfo.blob()); //imageFile文件名和后端统一
|
|
|
|
|
uploads(formdate).then(res => {
|
|
|
|
|
if (res) {
|
|
|
|
|
let url = res.url;
|
|
|
|
|
success(url); //回显url
|
|
|
|
|
} else {
|
|
|
|
|
failure(res.errmsg);
|
|
|
|
|
this.$message.error(res.errmsg);
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
computed: {},
|
|
|
|
|
mounted() {
|
|
|
|
|
tinymce.init({});
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
value(newValue) {
|
|
|
|
|
this.myValue = newValue;
|
|
|
|
|
},
|
|
|
|
|
myValue(newValue) {
|
|
|
|
|
this.$emit("input", newValue);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
.tinymce {
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
&__upload {
|
|
|
|
|
z-index: 2;
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 4px;
|
|
|
|
|
top: 0px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::v-deep .tox.tox-tinymce.tox-fullscreen {
|
|
|
|
|
z-index: 0
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
import "/public/tinymce/plugins/axupimgs/plugin.js"
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
Editor
|
|
|
|
|
},
|
|
|
|
|
props: {
|
|
|
|
|
height: {
|
|
|
|
|
type: Number,
|
|
|
|
|
default: 300,
|
|
|
|
|
},
|
|
|
|
|
value: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: "",
|
|
|
|
|
},
|
|
|
|
|
disabled: {
|
|
|
|
|
type: Boolean,
|
|
|
|
|
default: false,
|
|
|
|
|
},
|
|
|
|
|
plugins: {
|
|
|
|
|
type: [String, Array],
|
|
|
|
|
default: "code image axupimgs paste preview searchreplace autolink directionality visualblocks visualchars fullscreen template codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave ",
|
|
|
|
|
},
|
|
|
|
|
toolbar: {
|
|
|
|
|
type: [String, Array],
|
|
|
|
|
default: ` undo redo restoredraft | code | image | axupimgs | imagetools | assignment | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough anchor | alignleft aligncenter alignright alignjustify outdent indent |
|
|
|
|
|
styleselect formatselect fontselect fontsizeselect | table charmap emoticons hr pagebreak | bullist numlist | blockquote subscript superscript removeformat |
|
|
|
|
|
insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter`,
|
|
|
|
|
},
|
|
|
|
|
menubar: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: "edit insert view format table CardBtn",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
myValue: this.value,
|
|
|
|
|
showImg: false,
|
|
|
|
|
imgUploadUrl: `${process.env.VUE_APP_UPLOAD_API}`,
|
|
|
|
|
init: {
|
|
|
|
|
language_url: "/public/tinymce/langs/zh_CN.js", // 这里需要单独处理
|
|
|
|
|
language: "zh_CN",
|
|
|
|
|
height: this.height,
|
|
|
|
|
plugins: this.plugins,
|
|
|
|
|
fontsize_formats: "8px 10px 12px 14px 16px 18px 24px 28px 36px",
|
|
|
|
|
toolbar: this.toolbar,
|
|
|
|
|
branding: false,
|
|
|
|
|
menubar: this.menubar,
|
|
|
|
|
// 图片上传三个参数，图片数据，成功时的回调函数，失败时的回调函数
|
|
|
|
|
images_upload_url: this.imgUploadUrl,
|
|
|
|
|
images_upload_handler: (blobInfo, success, failure) => {
|
|
|
|
|
this.handleImgUpload(blobInfo, success, failure);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
handleImgUpload(blobInfo, success, failure) {
|
|
|
|
|
let self = this;
|
|
|
|
|
let file = blobInfo.blob();
|
|
|
|
|
const isLt2M = file.size / 1024 < 2048;
|
|
|
|
|
if (!isLt2M) {
|
|
|
|
|
failure("上传失败，图片不可超过2M!");
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
let formdate = new FormData();
|
|
|
|
|
formdate.append("file", blobInfo.blob()); //imageFile文件名和后端统一
|
|
|
|
|
uploads(formdate).then(res => {
|
|
|
|
|
if (res) {
|
|
|
|
|
let url = res.url;
|
|
|
|
|
console.log(url,333)
|
|
|
|
|
success(url); //回显url
|
|
|
|
|
} else {
|
|
|
|
|
failure(res.errmsg);
|
|
|
|
|
this.$message.error(res.errmsg);
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
computed: {},
|
|
|
|
|
mounted() {
|
|
|
|
|
tinymce.init({});
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
value(newValue) {
|
|
|
|
|
this.myValue = newValue;
|
|
|
|
|
},
|
|
|
|
|
myValue(newValue) {
|
|
|
|
|
this.$emit("input", newValue);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
.tinymce {
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
&__upload {
|
|
|
|
|
z-index: 2;
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 4px;
|
|
|
|
|
top: 0px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::v-deep .tox.tox-tinymce.tox-fullscreen {
|
|
|
|
|
z-index: 0
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
xy