vue3.0 + ueditor

时间：2024-01-25 17:05:45

公司有个需求，需要做个发送邮件的模版（富文本对于模版的扩展性更好吧）

 

关于富文本，也找了一些好看且支持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的富文本啦
 

图片上传功能需要后端配合配置，我们还没到这一步，到等了再来续更

如果有别的问题，请自行百度 哈哈哈

 

相关文章