官方地址 https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md#closed-by-default 新的写法 相比之下写法变得更加简化,下面具体看是否真香 子组件

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210623152824701.png 组件传值 父组件

下面上源码

//子组件 <template> <div> <div id="editorbox"></div> <el-button @click="getHtml">获取文本内容</el-button> </div> </template> <script setup lang='ts' > import { ref, onMounted, defineEmits, defineProps, defineExpose } from "vue"; import E from "wangeditor"; const editorRef = ref() const props = defineProps({ data: String }) console.log(props); const emit = defineEmits(['getHtml']) const getHtml = () => { const texthtml = editorRef.value.txt.html() emit("getHtml", texthtml) } const setHtml = (val: string) => { editorRef.value.txt.html(val) // 重新设置编辑器内 } const clearnHtml = () => { editorRef.value.txt.clear() } onMounted(() => { const editor = new E('#editorbox') editor.config.placeholder = '请输入内容'; editor.config.menus = [ // 菜单配置 "head", // 标题 "bold", // 粗体 "fontSize", // 字号 "fontName", // 字体 "italic", // 斜体 "underline", // 下划线 "strikeThrough", // 删除线 "foreColor", // 文字颜色 "backColor", // 背景颜色 "link", // 插入链接 "list", // 列表 "justify", // 对齐方式 "quote", // 引用 "emoticon", // 表情 "image", // 插入图片 "table", // 表格 "code", // 插入代码 "undo", // 撤销 "redo", // 重复 "video",//视频 ] editor.config.height = props.data; editor.config.zIndex = 100; editor.config.showLinkImg = false; // 隐藏“网络图片”tab editor.config.showLinkVideo = false//使用本地上传视频 editor.config.showFullScreen = true //显示全屏按钮 editor.config.uploadImgShowBase64 = false //用 base64 保存图片 // editor.config.uploadImgShowBase64 = false; // 使用 base64 保存图片 // editor.config.pasteText = true; // 只粘贴纯文本 // editor.config.uploadImgMaxSize = 3 * 1024 * 1024; //限制图片大小 // editor.config.uploadImgServer = "wdx"; //上传图片地址 // editor.config.uploadImgHeaders = { // Authorization: 'wdx' // 设置请求头 // }; // editor.config.uploadFileName = "file"; //设置字段 // editor.config.uploadImgMaxLength = 10; // 限制一次最多上传 5 张图片 // editor.config.uploadImgTimeout = 3 * 60 * 1000; // 设置超时时间 // editor.config.uploadImgHooks = { // fail: (xhr, editor, result) => { // // 插入图片失败回调 // }, // success: (xhr, editor, result) => { // // 图片上传成功回调 // }, // customInsert: (insertImg, result, editor) => { // // 图片上传成功，插入图片的回调 // //result为上传图片成功的时候返回的数据，这里我打印了一下发现后台返回的是data：[{url:"路径的形式"},...] // let url = result.data.url; // insertImg(url); // }, // } editorRef.value = editor editor.create(); }) // console.dir(expose); defineExpose({ setHtml, getHtml, clearnHtml }) </script> <style scoped lang="scss"> </style>

父组件

<template> <div> {{ boxHeight.data }} <EditorChild ref="box" :data="boxHeight.data" @getHtml="getHtml" /> </div> </template> <script setup lang='ts'> import { ref, onMounted, reactive } from "vue"; import EditorChild from '../components/editor-child.vue' const getHtml = (e: any) => { console.log('获取内容==>', e); } const boxHeight = reactive({ data: 400 }) const box = ref(null) onMounted(() => { console.log(box.value); let p = '<p style="color:red">我是红色字体</p>' box.value.setHtml(p) }) </script> <style scoped lang="scss"> </style>

默认情况下

css变量

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。