</editor>

</div>

</template>

import md5 from "js-md5"; // 加密

let OSS = require("ali-oss");

import tinymce from "tinymce/tinymce";

import Editor from "@tinymce/tinymce-vue";

import "tinymce/themes/silver";

import "tinymce/icons/default/icons";

import "tinymce/themes/silver/theme";

import "tinymce/plugins/image";

import "tinymce/plugins/table";

import "tinymce/plugins/lists";

import "tinymce/plugins/contextmenu";

import "tinymce/plugins/wordcount";

import "tinymce/plugins/colorpicker";

import "tinymce/plugins/textcolor";

export default {

components: {

Editor,

},

props: {

//传入一个value，使组件支持v-model绑定

value: {

type: String,

default: "",

},

disabled: {

type: Boolean,

default: false,

},

plugins: {

type: [String, Array],

default: "lists image table textcolor wordcount contextmenu powerpaste",

},

toolbar: {

type: [String, Array],

default:

},

},

data() {

return {

//初始化配置

init: {

language_url: "/tinymce/langs/zh_CN.js",

language: "zh_CN",

skin_url: "/tinymce/skins/ui/oxide",

height: 300,

plugins: this.plugins,

toolbar: this.toolbar,

powerpaste_word_import: "propmt", // 参数可以是propmt, merge, clear，效果自行切换对比

powerpaste_html_import: "propmt", // propmt, merge, clear

powerpaste_allow_local_images: true,

paste_data_images: true,

branding: false,

menubar: false,

//此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，

//如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler

images_upload_handler: (blobInfo, success, failure) => {

// success( );

this.imagesUpload(blobInfo, success);

},

},

myValue: this.value,

};

},

mounted() {

tinymce.init({});

},

methods: {

imagesUpload(blobInfo, success) {

let that = this;

that.$api.getOssKey().then((res) => {

let bucket = "gksb";

let region = "oss-cn-beijing";

let type = "/img/";

let client = new OSS({

accessKeyId: res.accessKeyId,

accessKeySecret: res.accessSecret,

stsToken: res.securityToken,

bucket: bucket,

region: region,

});

let file = blobInfo.blob();

let timestamp = md5(new Date().getTime().toString()); //获取当前时间戳

let fileLast = file.name.substring(

file.name.indexOf("."),

file.name.length

);

let storeAs = `${type}${timestamp}${fileLast}`;

console.log(storeAs, file, 888);

function dataURLtoBlob(dataurl) {

var arr = dataurl.split(","),

mime = arr[0].match(/:(.*?);/)[1],

bstr = atob(arr[1]),

n = bstr.length,

u8arr = new Uint8Array(n);

while (n--) {

u8arr[n] = bstr.charCodeAt(n);

}

return new Blob([u8arr], {

type: mime,

});

}

// 文件类型

if (file instanceof File) {

// 非文件类型同后缀字段置空

multipartUpload(storeAs, file).then((res) => {

console.log(res);

success(res);

});

} else {

put(storeAs, file);

}

async function put(storeAs, file) {

try {

//object-name可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。

let result = await client.put(storeAs, file);

console.log(result,9090);

} catch (e) {

console.log(e,9080);

}

}

put();

// 开始分片上传。

async function multipartUpload(storeAs, file, mime) {

try {

// object-name可以定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至Bucket根目录或Bucket下的指定目录。

const result = await client.multipartUpload(storeAs, file);

let url = result.res.requestUrls[0];

// console.log(url.substring(0, url.indexOf("?uploadId")));

if (url.indexOf("?uploadId") > 0) {

url = url.substring(0, url.indexOf("?uploadId"));

}

return url;

// console.log(result, 123213213);

} catch (e) {

console.log(e, 9090);

// 捕获超时异常。

if (e.code === "ConnectionTimeoutError") {

that.$Message.info("上传失败");

console.log("TimeoutError");

// do ConnectionTimeoutError operation

}

}

}

});

},

//添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events

//需要什么事件可以自己增加

onClick(e) {

this.$emit("onClick", e, tinymce);

},

//可以添加一些自己的自定义事件，如清空内容

clear() {

this.myValue = "";

},

},

watch: {

value(newValue) {

this.myValue = newValue;

},

myValue(newValue) {

this.$emit("input", newValue);

},

},

};

</script>

</style>

求大佬解决

求大神指点：关于富文本框中上传的图片 可以加点击事件吗

NaNull

1个回复

求大神指点：关于富文本框中上传的图片可以加点击事件吗