vue3 使用 wangEditor v5

import { computed, onBeforeUnmount, ref } from "vue";
import {
Editor,
Toolbar,
getEditor,
removeEditor,
} from "@wangeditor/editor-for-vue";
import cloneDeep from "lodash.clonedeep";
import { uploads } from "@/utils/baseCodes";
import { qiniudnUploader } from "@/utils/qiniudnUploader";
import { token, deleteYunImg } from "@/api/upload";
import { useStore } from "vuex";
export default {
components: { Editor, Toolbar },
setup(props, ctx) {
// console.log(props);
// console.log(ctx);
const store = useStore();
const imgdata = [];
const editorId = `w-e-${Math.random().toString().slice(-5)}`; //【注意】编辑器 id ，要全局唯一
const defaultContent = [{ type: "paragraph", children: [{ text: "" }] }];
const getDefaultContent = computed(() => cloneDeep(defaultContent)); // 注意，要深拷贝 defaultContent ，否则报错
const toolbarConfig = {};
const editorConfig = { placeholder: "请输入内容...", MENU_CONF: {} };
　//这里是图片上传，我博客是用使用了七牛云存储，所以这边调用七牛存储
editorConfig.MENU_CONF["uploadImage"] = {
// 上传图片的配置
// 自定义上传
async customUpload(file, insertFn) {
// file 即选中的文件
// 自己实现上传，并得到图片 url alt href
// 最后插入图片
uploads(file, (files) => {
token().then((res) => {
qiniudnUploader(res.data, files, "IMG", (res) => {
insertFn(
"http://" + store.state.qiniu.qiniuaddr + "/" + res.key,
null,
null
);
imgdata.push(res.key);
});
});
});
},
};
//这里是上传的时候对比数据删除多余的图片
const ongetImg = () => {
const editor = getEditor(editorId);
const imgList = editor.getElemsByType("image");
imgdata.map((item) => {
imgList.map((img, index) => {
if (index === 0) {
ctx.emit("onUrl", img.src);
}
if (img.src.indexOf(item) !== -1) {
// console.log(img.src);
} else {
deleteYunImg({
bucket: store.state.qiniu.name,
key: item,
}).then((res) => {
console.log(res);
});
}
});
});
};
const editorClear = () => {
const editor = getEditor(editorId);
editor.clear();
};
　//我在这里把数据存到父组件存储
const handleChange = (editor) => {
console.log("change:", editor.children);
const contentStr = JSON.stringify(editor.children);
const html = editor.getHtml();
ctx.emit("onBack", contentStr, html);
//
console.log(html)
};
const dangerouslyInsertHtml = (content) => {
const editor = getEditor(editorId);
if (editor == null) return;
console.log(content);
editor.dangerouslyInsertHtml(content);
};
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
const editor = getEditor(editorId);
if (editor == null) return;
editor.destroy();
removeEditor(editorId);
});
return {
editorId,
mode: "default",
getDefaultContent,
toolbarConfig,
editorConfig,
handleChange,
ongetImg,
editorClear,
dangerouslyInsertHtml,
};
},
};
</script>

最后

以上就是玩命小霸王为你收集整理的vue3 使用 wangEditor v5的全部内容，希望文章能够帮你解决vue3 使用 wangEditor v5所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。