先上本人的实际需求:
需求是点编辑,弹出一个窗口,窗口中是ueditor,在ueditor中编辑上图中的描述信息,然后存到数据库,接下来在unity程序中拉取描述信息并展示。接下来开始操作。
1.做一个弹窗,很简单,就不细聊了,本人用的el-dialog(elementUI)。如下:
2.开始集成百度的ueditor,首先下载包装了ueditor的vue组件,链接如下:
vue-ueditor-wrap - Vue + UEditor + v-model双向绑定
如图下载,本人下载的是.net版本,下载解压后如图:
重命名后(下载解压后的文件夹我重命名为ueditor)将此文件夹完整放入项目的public文件夹下,如图(重命名是为了让其他人更好识别,你不重命名也无所谓的):
3.安装组件:
npm i vue-ueditor-wrap@3.x -S
本人装的是3.0.8版本,vue3项目必须安装3.0以上版本
4.vue代码设置
(1)main.js设置
两行代码即可,引入并use,如下:
import VueUeditorWrap from 'vue-ueditor-wrap';