注: vue2 版本的 nodeJs 版本有限制,要是16或者17;
1.安装wangEditor
yarn add @wangeditor/editor @wangeditor/editor-for-vue
2.使用示例
<template> <div style="border: 1px solid #ccc;"> <!-- 工具栏 --> <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" /> <!-- 编辑器 --> <Editor style="height: 500px; overflow-y: hidden;" :defaultConfig="editorConfig" v-model="html" @onCreated="onCreated" /> </div> </template> <script> import { Editor, Toolbar } from '@wangeditor/editor-for-vue' export default { name: 'MyEditor', components: { Editor, Toolbar }, data() { return { editor: null, html: '<p>hello world</p>', toolbarConfig: {}, editorConfig: { placeholder: '请输入内容...', } } }, methods: { onCreated(editor) { this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错 }, }, mounted() { // 模拟 ajax 请求,异步渲染编辑器 setTimeout(() => { this.html = '<p>Ajax 异步设置内容 HTML</p>' }, 1500) }, beforeDestroy() { const editor = this.editor if (editor == null) return editor.destroy() // 组件销毁时,及时销毁 editor ,重要!!! }, } </script> <!-- 记得引入 wangEditor css 文件,重要 !!! --> <style src="@wangeditor/editor/dist/css/style.css"></style>
3.NodeJs不兼容处理办法
# Linux and macOS (Windows Git Bash)- export NODE_OPTIONS=--openssl-legacy-provider # Windows command prompt- set NODE_OPTIONS=--openssl-legacy-provider
标签:return,vue2,wangeditor,Object,wsl,editor,版本,wangEdit From: https://www.cnblogs.com/Mr-zou/p/17814081.html