vue3.0 + ueditor

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

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

时间: 2024-10-31 18:36:37

vue3.0 + ueditor的相关文章

VUE3.0升级与配置(跨域等)

1.检查本机vue版本 vue -V 2.升级vue3.0命令 npm install -g @vue/cli 3.创建完项目后,在项目根目录新增vue.config.js文件,插入代码(简洁) 1 module.exports = { 2 runtimeCompiler: true, //是否使用包含运行时编译器的 Vue 构建版本 3 publicPath: '', 4 productionSourceMap: false, //不在production环境使用SourceMap 5 dev

Vue3.0结合bootstrap做多页面应用(1)创建项目

本人主要做c# winform应用,刚接触vue,发现用vue做单页面应用的比较多,多页面的资料很少,特别是用vue3.0版本做多页面的资料,更少,所以自己整理一下,结合bootstrap和jquery,也可以给有需要的同行做个参考. 1.首先用 vue --version 命令查一下安装的vue-cli版本,要3.x版本,我原先装的是2.9.6版本的 2.卸载vue-cli,执行命令:cnpm uninstall -g vue-clinpm uninstall -g vue-cli ,执行完就

使用vue3.0和element实现后台管理模板

通过自己所学的这段时间,利用空余时间,使用vue3.0脚手架搭建的一个关于后台的管理模板,所实现功能也是模仿一个后台的界面,数据分为两种存放,一种是直接存储到mlab,这里的数据是存放这登录注册,只有注册了自己的账号才能访问到页面,另一些数据直接存放在easy-mock里, 源码地址:https://github.com/MrZHLF/vue-admin 自己需要搭建vue3.0的脚手架,在这里就不用讲关于vue3.0的脚手架怎么搭建.vue3.0脚手架需要node版本10以上,这样的话,可以使

关于vue的计算属性以及双向绑定的原理理解(vue2.x)以及vue3.0

vue的计算属性: 1.什么是计算属性? 计算属性的目的是用于对数据进行简单运算的,若在模板中放过多的计算逻辑会导致模板难以维护. 计算属性是基于它们的依赖进行缓存的.计算属性只有在它的相关依赖发生改变时才会重新求值. 2.计算属性如何使用? 1.在一个计算属性里可以完成各种复杂的逻辑,包括运算.函数调用等,只要最终返回一个结果就可以. computed: { reverseText: function(){ return app1.text.split('').reverse().join('

vue3.0 vue create项目后无法初始化问题

刚开始照着菜鸟教程里面安装npm环境,所有的流程都没问题安装完vue的时候,查看里面的命令没有版老本的init 然后最终导致我npm run dev老是出现问题,最后网上找到的具体的解决办法. npm install -g @vue/cli vue create my-project 这是vue3.0的命令,如果想按照视频老师步骤来,可以这样安装: npm install -g @vue/cli npm install -g @vue/cli-init 执行后,就可以使用vue init web

前端随心记---------vue3.0终于来了,作者已公布源码

Vue3.0 何去何从? 就在国庆的第五天,10月5日凌晨,web前端开发框架Vuejs的作者:尤雨溪在微博宣布Vue3.0版本终于要面正式推出了!  其实,在11月14日-16日于多伦多举办的 VueConf TO 2018 大会上,尤雨溪发表了名为 “ Vue 3.0 Updates ” 的主题演讲,对 Vue 3.0 的更新计划.方向进行了详细阐述. 1.更快 Virtual DOM 完全重写,mounting & patching 提速 100% : 更多编译时(compile-time

快速进阶Vue3.0

在2019.10.5日发布了Vue3.0预览版源码,但是预计最早需要等到 2020 年第一季度才有可能发布 3.0 正式版. 可以直接看 github源码. 新版Vue 3.0计划并已实现的主要架构改进和新功能: 编译器(Compiler) 使用模块化架构 优化 "Block tree" 更激进的 static tree hoisting 功能 (检测静态语法,进行提升) 支持 Source map 内置标识符前缀(又名"stripWith") 内置整齐打印(pre

对于 vue3.0 特性你有什么了解的吗?

Vue 3.0 的目标是让 Vue 核心变得更小.更快.更强大,因此 Vue 3.0 增加以下这些新特性: (1)监测机制的改变3.0 将带来基于代理 Proxy 的 observer 实现,提供全语言覆盖的反应性跟踪.这消除了 Vue 2 当中基于 Object.defineProperty 的实现所存在的很多限制: 只能监测属性,不能监测对象 检测属性的添加和删除: 检测数组索引和长度的变更: 支持 Map.Set.WeakMap 和 WeakSet. 新的 observer 还提供了以下特

vue3.0中如何使用ueditor

1.在官网下载一个ueditor版本[https://ueditor.baidu.com/website/download.html],解压后放到public文件下的static文件中重命名为Editor (自己建立一个static文件,直接放到public文件下会出错). 2.修改相应的配置. ueditor.config.js中 window.UEDITOR_HOME_URL = "/Editor/"; var URL = window.UEDITOR_HOME_URL || ge