wangEditor 编辑器 Vue 2.0 + Nodejs 设置
资料[*]Vue2.0 版本的安装：https://www.wangeditor.com/v5/for-frame.html#%E4%BD%BF%E7%94%A8
[*]上传图片设置：https://www.wangeditor.com/v5/menu-config.html#%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87
安装步调
1.安装界面底子部分
<!-- 富文本编辑器 -->
<template>
<div class="WangEditor" style="border: 1px solid #ccc">
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editor"
:defaultConfig="toolbarConfig"
:mode="mode"
/>
<Editor
style="height: 500px; overflow-y: hidden;"
v-model="html"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="onCreated"
/>
</div>
</template>
<script>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
components: { Editor, Toolbar },
data() {
return {
editor: null,
html: '<p>hello</p>',
toolbarConfig: {},
editorConfig: {
placeholder: '请输入内容...',
},
mode: 'default', // or 'simple'
}
},
mounted() {
// 模拟 ajax 请求，异步渲染编辑器
setTimeout(() => {
this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
}, 1500)
},
beforeDestroy() {
const editor = this.editor
if (editor == null) return
editor.destroy() // 组件销毁时，及时销毁编辑器
},
methods: {
// 编辑器实例创建完毕后回调
onCreated(editor) {
// 对象密封
this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
},
},
}
</script>
<style scoped lang="scss">
.WangEditor{
// 去掉重影小叉
::v-deep .btn-close {
svg {
display: none;
}
}
}
</style>
2.设置上传服务
editorConfig: {
placeholder: '请输入内容...',
MENU_CONF: {
uploadImage:{
fieldName: 'images',
server: 'http://localhost:3000/api/uploadImage', // 默认的是8081，这里要设置自己的IP和端口
maxSize: 5 * 1024 * 1024, // 5MB
}
}
},
3.搭建后端Api
3-1. 设置静态文件，添加目次
// 创建主应用
const app = express();
// 使 public/uploads 目录可以作为静态文件目录访问
app.use('/uploads', express.static(path.join(__dirname, 'public', 'uploads')));
3-2. 设置Multer
// Multer 配置
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, 'public/uploads/'); // 上传文件的存储路径
},
filename: (req, file, cb) => {
// 对文件名进行处理，确保文件名中的非英文字符不会出现乱码
const sanitizedFilename = Date.now() + '-' + encodeURIComponent(file.originalname);
cb(null, sanitizedFilename); // 使用 URL 编码后的文件名
}
});
// 创建 multer 实例
const upload = multer({
storage: storage,
limits: { fileSize: 5 * 1024 * 1024 },// 限制文件大小最大为5MB
}).single('images');// 这里使用 single() 来接收单个文件，'images' 是表单字段名称
3-3. 设置图片上传api
// 图片上传
app.post('/api/uploadImage', (req, res) => {
// 使用 multer 中间件来处理文件上传
upload(req, res, (err) => {
if (err) {
return res.status(500).json({
errno: 1,
message: '文件上传失败',
});
}
const file = req.file;// 上传的文件信息存储在 req.file 中
if (!file) {
return res.status(400).json({
errno: 1,
message: '没有上传文件',
});
}
// 获取服务器的 IP 地址
const ip = req.socket.localAddress === '::1' ? 'localhost' : req.socket.localAddress;
const port = 3000; // 端口号
const baseUrl = `http://${ip}:${port}/uploads/`; // 构建完整的 URL
// 返回文件的URL路径
res.status(200).json({
errno: 0,
data: {
url: `${baseUrl}${file.filename}`,// 上传后的文件路径
alt: 'Uploaded Image',
href: '',// 可选的链接（点击图片时跳转）
},
});
})
})
4.解决弹窗小叉重影
<style scoped lang="scss">
.WangEditor{
// 去掉重影小叉
::v-deep .btn-close {
svg {
display: none;
}
}
}
</style>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]