公司有个需求,需要做个发送邮件的模版(富文本对于模版的扩展性更好吧)
关于富文本,也找了一些好看且支持vue的,但是功能都没有百度全面
反正这个系统也是自己人用,颜值无所谓了
关于vue2.0+ueditor 有需要的可以看原文:https://juejin.im/post/5c6e78f95188252f30483be3
注:我是参考的这个配的vue3.0+ueditor
第一步:下载Ueditor相关静态文件
在下载的同时,不要让小手闲着,安装vue-ueditor-wrap
npm i vue-ueditor-wrap -D
第二步:修改ueditor并引入项目
下载下来的ueditor包,解压之后,名称是带着版本号的,为了看上去简洁一些,可以改成自己看上去顺眼的名字,比如UEditor
将解压完并顺利改完名字的UEditor文件,直接丢到咱们项目的public文件中
注:本项目是针对vue-cli3.0来说的,配置的时候和vue-cli2.0略有不同
vue3.0中,没有static文件,但是存在public,所有咱们将UEditor放到public中
第三步:进入vue项目配置
到了这一步,已经成功了50%
现在高潮来了哦
将vue-ueditor-wrap引入你要使用的组件或页面中
1、import VueUeditorWrap from ‘vue-ueditor-wrap‘
不要忘记注册组件
2、components: {
VueUeditorWrap
}
页面调用:
3、<vue-ueditor-wrap v-model="value" :config="myConfig"></vue-ueditor-wrap>
config为调用vue-ueditor-wrap的配置项,在页面中单独设置的独立配置
data () { return { value: ‘这是我调用vue-ueditor-wrap的案例‘, myConfig: { // 编辑器不自动被内容撑高 autoHeightEnabled: false, // 初始容器高度 initialFrameHeight: 240, // 初始容器宽度 initialFrameWidth: ‘100%‘, // 上传文件接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口,请勿在生产环境使用!!!) serverUrl: ‘http://35.201.165.105:8000/controller.php‘, // UEditor 资源文件的存放路径,如果你使用的是 vue-cli 生成的项目,通常不需要设置该选项,vue-ueditor-wrap 会自动处理常见的情况,如果需要特殊配置,参考下方的常见问题2 UEDITOR_HOME_URL: ‘/UEditor/‘ } } }
同时修改UEditor中的配置文件ueditor.config.js
中的UEDITOR_HOME_URL
到这里,如果没什么疑难杂症出现的话,打开页面,毫无疑问你应该能够看到blingbling的富文本啦
图片上传功能需要后端配合配置,我们还没到这一步,到等了再来续更
如果有别的问题,请自行百度 哈哈哈
原文地址:https://www.cnblogs.com/tongjiaojiao/p/11737197.html