1.下载 tinymce完整包放到public目录
2.下载中文语言包到tinymce/langs里
- await load("/tinymce/tinymce.min.js")引入
@/components/Tinymce/index.vue
<template>
<div :id="id"></div>
</template>
<script>
import { onMounted, onUnmounted } from "vue";
import dynamicLoadScript from "@/utils/loadScript.js";
export default {
props: {
value: {
type: String,
default: ""
}
},
setup(props, { emit }) {
const id = "tinymce-" + new Date().getTime();
const init = () => {
window.tinymce.init({
selector: `#${id}`,
// skin: "oxide-dark",
language: "zh_CN",
plugins: `print preview searchreplace autolink directionality visualblocks visualchars
fullscreen image link media template code codesample table charmap hr pagebreak
nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern
help emoticons autosave autoresize`,
toolbar: `code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor
| alignleft aligncenter alignright alignjustify outdent indent | \
styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs`,
min_height: 600,
branding: false, // 去水印
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;`,
toolbar_sticky: true,
autosave_ask_before_unload: false,
init_instance_callback: editor => {
if (props.value) {
editor.setContent(props.value);
}
editor.on("NodeChange Change KeyUp SetContent", () => {
emit("update:value", editor.getContent());
});
},
// 图片上传三个参数，图片数据，成功时的回调函数，失败时的回调函数
images_upload_handler: async (blobInfo, success, failure) => {
console.log(blobInfo, success, failure);
// await getSign(blobInfo.blob());
// let formdata = new FormData();
// for (const key in this.ossInfo) {
// formdata.append(key, this.ossInfo[key]);
// }
// formdata.append("file", blobInfo.blob());
// $http
// .post("https://阿里云oss服务器.com", formdata)
// .then(() => {
// let url = `${this.ossInfo.host}/${this.ossInfo.key}`;
// success(url);
// })
// .catch((res) => {
// console.log(res);
// failure("error");
// });
}
});
};
onMounted(async () => {
await dynamicLoadScript ("/tinymce/tinymce.min.js");
init();
});
onUnmounted(() => {
const tinymce = tinymce.get(id);
tinymce.destroy();
});
return { id };
}
};
</script>
@util/loadScript.js
const dynamicLoadScript = src => {
return new Promise((resolve, reject) => {
const existingScript = document.getElementById(src);
if (existingScript) resolve();
if (!existingScript) {
const script = document.createElement("script");
script.src = src;
script.id = src;
document.body.appendChild(script);
script.onload = resolve;
script.onerror = reject;
}
});
};
export default dynamicLoadScript;
使用
<template>
<h1>page B</h1>
<Tinymce v-model:value="content" />
</template>
<script>
import { ref } from "vue";
import Tinymce from "@/components/Tinymce/index.vue";
export default {
components: { Tinymce },
setup() {
const content = ref("<p>123</p>");
return {
content
};
}
};
</script>
4.封装echarts组件
src/components/Echarts/index.vue
<template>
<div :id="id" :style="{ width, height }"></div>
</template>
<script>
import dynamicLoadScript from "@/utils/loadScript.js";
import { onMounted, ref, watch } from "vue";
export default {
props: {
options: {
type: Object,
default() {
return {};
}
},
width: {
type: String,
default: "600px"
},
height: {
type: String,
default: "400px"
}
},
setup(props) {
const id = "echarts-" + new Date().getTime();
const echartInstance = ref(null);
onMounted(async () => {
await dynamicLoadScript("https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js");
echartInstance.value = window.echarts.init(document.getElementById(id));
echartInstance.value.setOption(props.options);
});
watch(
() => props.options,
options => {
echartInstance.value.setOption(options);
},
{
deep: true // 深度监听的参数
}
);
return {
id,
echartInstance
};
}
};
</script>
使用src/views/PageA.vue
<template>
<h1>page A</h1>
<Echarts :options="options" />
<el-button @click="add">追加数据</el-button>
</template>
<script>
import Echarts from "@/components/Echarts/index.vue";
import { reactive } from "vue";
export default {
components: { Echarts },
setup() {
const options = reactive({
title: { text: "总用户量" },
tooltip: {},
xAxis: {
data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"]
},
yAxis: {},
series: [
{
name: "用户量",
type: "line",
data: [5, 20, 36, 10, 10, 20]
}
]
});
const add = () => {
options.series.push({
name: "用户量2",
type: "line",
data: [15, 20, 36, 10, 10, 20]
});
};
console.log("options :>> ", options.series);
return { options, add };
}
};
</script>
