专做外贸的网站酷站百分百

专做外贸的网站,酷站百分百,门户网站和微网站的区别,什么是网络设计工作wangEditor5介绍 wangEditor5 —— 轻量级 web 富文本编辑器#xff0c;配置方便#xff0c;使用简单。支持 IE10 浏览器。 官网#xff1a;www.wangEditor.com 下载 注意#xff1a; wangeditor都是小写字母 // 下面两个依赖都需要安装 npm i wangeditor/editor npm …wangEditor5介绍wangEditor5 —— 轻量级 web 富文本编辑器配置方便使用简单。支持 IE10 浏览器。官网www.wangEditor.com下载注意 wangeditor都是小写字母// 下面两个依赖都需要安装 npm i wangeditor/editor npm i wangeditor/editor-for-vuenext相关组件Editor : 编辑器组件Toolbar 菜单栏组件import wangeditor/editor/dist/css/style.css // 引入 css import { Editor, Toolbar } from wangeditor/editor-for-vue ... template div styleborder: 1px solid #ccc Toolbar 属性/ Editor 属性/ /div /template了解vue3的shallowRefVue 的响应性系统默认是深度的。虽然这让状态管理变得更直观但在数据量巨大时深度响应性也会导致不小的性能负担因为每个属性访问都将触发代理的依赖追踪。Vue 确实也为此提供了一种解决方案通过使用 shallowRef() 和 shallowReactive() 来绕开深度响应。浅层式 API 创建的状态只在其顶层是响应式的对所有深层的对象不会做任何处理。const shallowArray shallowRef([ /* 巨大的列表里面包含深层的对象 */ ]) // 这不会触发更新... shallowArray.value.push(newObject) // 这才会触发更新 shallowArray.value [...shallowArray.value, newObject] // 这不会触发更新... shallowArray.value[0].foo 1 // 这才会触发更新 shallowArray.value [ { ...shallowArray.value[0], foo: 1 }, ...shallowArray.value.slice(1) ]基础案例script setup import wangeditor/editor/dist/css/style.css // 引入 css import { onBeforeUnmount, ref, shallowRef, onMounted } from vue import { Editor, Toolbar } from wangeditor/editor-for-vue // mode: default 默认模式 - 集成了 wangEditor 所有功能 // mode: simple 简洁模式 - 仅有部分常见功能但更加简洁易用 const mode ref(simple) // const mode ref(default) // 编辑器实例必须用 shallowRef const editorRef shallowRef() // 内容 HTML const valueHtml ref(phello/p) // 模拟 ajax 异步获取内容 onMounted(() { setTimeout(() { valueHtml.value p模拟 Ajax 异步设置内容/p }, 1500) }) const toolbarConfig {} const editorConfig { placeholder: 请输入内容... } // 组件销毁时也及时销毁编辑器 onBeforeUnmount(() { const editor editorRef.value if (editor null) return editor.destroy() }) const handleCreated (editor) { editorRef.value editor // 记录 editor 实例重要 } /script template div styleborder: 1px solid #ccc Toolbar styleborder-bottom: 1px solid #ccc :editoreditorRef :defaultConfigtoolbarConfig :modemode / Editor styleheight: 500px; overflow-y: hidden; v-modelvalueHtml :defaultConfigeditorConfig :modemode onCreatedhandleCreated / /div /template工具栏配置查看所有默认工具栏配置const handleCreated (editor) { editorRef.value editor // 记录 editor 实例重要 //打印所有默认配置 console.log(editor.getConfig()[MENU_CONF]) }自定义工具栏// 工具栏配置 const toolbarConfig { toolbarKeys: [ headerSelect, //正文 blockquote, //引号 |, //分隔线 bold, //加粗 underline, //下划线 ] } // 可以使用当前方法获取所有的工具栏配置选项 console.log(editor.getConfig()[MENU_CONF]);上传图片的菜单配置工具栏配置决定了在工具栏显示哪些工具菜单配置决定了该工具使用时的相关配置。比如 工具栏上显示上传图片工具但上传后的接口地址header中携带token等需要通过菜单配置// 初始化默认配置 const editorConfig { placeholder: 请输入内容..., MENU_CONF: {} } editorConfig.MENU_CONF[uploadImage] { server: /api/upload, fieldName: file, headers: { Authorization: Bearer sessionStorage.getItem(token), }, // 上传之前触发 onBeforeUpload(file) { // TS 语法 // onBeforeUpload(file) { // JS 语法 // file 选中的文件格式如 { key: file } return file // 可以 return // 1. return file 或者 new 一个 file 接下来将上传 // 2. return false 不上传这个 file }, // 上传进度的回调函数 onProgress(progress) { // TS 语法 // onProgress(progress) { // JS 语法 // progress 是 0-100 的数字 console.log(progress, progress) }, // 自定义插入图片 customInsert(res, insertFn) { // TS 语法 // customInsert(res, insertFn) { // JS 语法 // res 即服务端的返回结果 let { url } res // 从 res 中找到 url alt href 然后插入图片 insertFn(url) } }后端处理路由 routes/uploadRouter.jsconst express require(express) const router express.Router() const upload require(../tools/upload) //图片上传 // 这里的file名称需要跟前端的name值保持一致 router.post(/uploadImg, upload.single(file), (req, res) { // console.log(req.file.filename) // // 需要返回图片的访问地址 域名文件名 const url http://localhost:3000/uploads/ req.file.filename // console.log(req.file.filename); res.json({ url }); }) module.exports router上传方法 tools/upload.jsconst multer require(multer) // nodejs用于上传文件的模块 const uuid require(uuid) //uuid用来生成唯一标识符 /* multer是node的中间件, 处理表单数据 主要用于上传文件 multipart/form-data */ // 指定存储位置 const storage multer.diskStorage({ // 存储位置 destination(req, file, callback) { // 参数一 错误信息 参数二 上传路径此处指定upload文件夹 callback(null, public/uploads) }, // 确定文件名 filename(req, file, cb) { //文件扩展名 let extName file.originalname.slice(file.originalname.lastIndexOf(.)) //新文件名 let fileName uuid.v1() cb(null, fileName extName) } }) // 得到multer对象 传入storage对象 const upload multer({ storage }) module.exports upload;编辑器封装父组件script setup import { ref } from vue; import Editor from ./editor.vue; //向子组件传递的富文本编辑器的初始内容 const html ref(pdddddd/p) const submit (){ console.log(html,html.value); } /script template div classrich-txt h3富文本编辑器/h3 Editor v-model:htmlhtml/Editor button clicksubmit提交/button /div /template style langscss scoped/style子组件script setup import wangeditor/editor/dist/css/style.css // 引入 css import { onBeforeUnmount, ref, shallowRef, onMounted,computed } from vue import { Editor, Toolbar } from wangeditor/editor-for-vue // 编辑器实例必须用 shallowRef const editorRef shallowRef() const props defineProps({ html: String }) const emit defineEmits() const mode ref(simple) // const mode ref(default) // 内容 HTML const valueHtml computed({ get () { console.log(props.html); return props.html }, set (value) { emit(update:html, value) } }) // const toolbarConfig {} // 工具栏配置 const toolbarConfig { toolbarKeys: [ headerSelect, //正文 blockquote, //引号 |, //分隔线 bold, //加粗 underline, //下划线 ] } // 初始化默认配置 const editorConfig { placeholder: 请输入内容..., } // 组件销毁时也及时销毁编辑器 onBeforeUnmount(() { const editor editorRef.value if (editor null) return editor.destroy() }) const handleCreated (editor) { editorRef.value editor // 记录 editor 实例重要 console.log(editor.getConfig()[MENU_CONF]) } /script template div styleborder: 1px solid #ccc Toolbar styleborder-bottom: 1px solid #ccc :editoreditorRef :defaultConfigtoolbarConfig :modemode / Editor styleheight: 500px; overflow-y: hidden; v-modelvalueHtml :defaultConfigeditorConfig :modemode onCreatedhandleCreated / /div /template注意父组件调用子组件的时候只需要添加相应式和组件script import Editor from ../upload/Editor.vue; const html ref(); /script Editor v-model:htmlhtml/Editor