vue3.0 + ueditor

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

 

关于富文本，也找了一些好看且支持vue的，可是功能都没有百度全面

 

反正这个系统也是本身人用，颜值无所谓了

 

关于vue2.0+ueditor 有须要的能够看原文：http://www.javashuo.com/article/p-yovkzqhh-dh.html

注：我是参考的这个配的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引入你要使用的组件或页面中

 

一、import VueUeditorWrap from 'vue-ueditor-wrap'

不要忘记注册组件

二、components: {

  VueUeditorWrap

}

 

页面调用：

三、<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