在vue中完美使用ueditor组件(cdn)解读
大唐锦绣 人气:0vue使用ueditor组件(cdn)
前言:无需main.js或页面全局或局部引入,直接使用cdn将ueditor作为vue组件
请直接创建vue文件,作为组件使用。复制粘贴,即可直接使用(此篇只展示前端代码,后端大家自由选择,图片资源存放建议使用阿里云oss或者七牛云对象存储)
component组件代码:
<template> <script :id="randomId" name="content" type="text/plain" :style="ueditorStyle"></script> </template> <script> export default { name: 'Editor', props: { ueditorPath: { // UEditor 代码的路径 type: String, default: '............',//cdn地址 }, ueditorConfig: { // UEditor 配置项 type: Object, default: function() { return { toolbars:[['source', 'bold', 'italic', 'underline', 'removeformat', 'forecolor', 'backcolor', 'paragraph', 'fontfamily', 'fontsize', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', 'simpleupload']], serverUrl: '............',//后台保存路由 }; } }, ueditorStyle: { type: Object, default: function() { return { } } }, }, data() { return { // 为了避免麻烦,每个编辑器实例都用不同的 id randomId: 'editor_' + (Math.random() * 100000000000000000), instance: null, // scriptTagStatus -> 0:代码未加载,1:两个代码依赖加载了一个,2:两个代码依赖都已经加载完成 scriptTagStatus: 0 }; }, created() { if (window.UE !== undefined) { // 如果全局对象存在,说明编辑器代码已经初始化完成,直接加载编辑器 this.scriptTagStatus = 2; this.initEditor(); } else { // 如果全局对象不存在,说明编辑器代码还没有加载完成,需要加载编辑器代码 this.insertScriptTag(); } console.log(this) }, beforeDestroy() { // 组件销毁的时候,要销毁 UEditor 实例 if (this.instance !== null && this.instance.destroy) { this.instance.destroy(); } }, methods: { insertScriptTag() { let editorScriptTag = document.getElementById('editorScriptTag'); let configScriptTag = document.getElementById('configScriptTag'); // 如果这个tag不存在,则生成相关代码tag以加载代码 if (editorScriptTag === null) { configScriptTag = document.createElement('script'); configScriptTag.type = 'text/javascript'; configScriptTag.src = this.ueditorPath + 'neditor.config.js'; configScriptTag.id = 'configScriptTag'; editorScriptTag = document.createElement('script'); editorScriptTag.type = 'text/javascript'; editorScriptTag.src = this.ueditorPath + 'neditor.all.min.js'; editorScriptTag.id = 'editorScriptTag'; let s = document.getElementsByTagName('head')[0]; s.appendChild(configScriptTag); s.appendChild(editorScriptTag); } // 等待代码加载完成后初始化编辑器 if (configScriptTag.loaded) { this.scriptTagStatus++; } else { configScriptTag.addEventListener('load', () => { this.scriptTagStatus++; configScriptTag.loaded = true; this.initEditor(); }); } if (editorScriptTag.loaded) { this.scriptTagStatus++; } else { editorScriptTag.addEventListener('load', () => { this.scriptTagStatus++; editorScriptTag.loaded = true; this.initEditor(); }); } this.initEditor(); }, initEditor() { // scriptTagStatus 为 2 的时候,说明两个必需引入的 js 文件都已经被引入,且加载完成 if (this.scriptTagStatus === 2 && this.instance === null) { // Vue 异步执行 DOM 更新,这样一来代码执行到这里的时候可能 template 里面的 script 标签还没真正创建 // 所以,我们只能在 nextTick 里面初始化 UEditor this.$nextTick(() => { this.instance = window.UE.getEditor(this.randomId, this.ueditorConfig); // 绑定事件,当 UEditor 初始化完成后,将编辑器实例通过自定义的 ready 事件交出去 this.instance.addListener('ready', () => { this.$emit('ready', this.instance); }); }); } } } }; </script> <style> .edui-editor { line-height: normal; } </style>
在使用页面
import Editor from '你的component路径/Editor.vue'
使用代码:
<!--html片段 --> <el-form-item label="奖品说明" prop="description" :error="prize.errors.description"> <editor @ready="editorReady" :ueditorStyle="ueditorStyle"> </editor> </el-form-item> <!-- script片段 --> import Editor from '你的component路径/Editor.vue' export default { data(){ return { ueditorStyle: {//ueditor样式 width: '100%', height: '200px' }, } }, components:{ Editor }, methods:{ editorReady (editor) {//保存ueditor内容 this.editor = editor if (this.$router.currentRoute.params.id > 0) this.fetch() editor.addListener('afterAutoSave', () => { this.prize.data.description = editor.getContent() }) }, }, } <!-- 注意点 --> this.editor.setContent(编辑框内的数据)//设置ueditor框内内容,在编辑时使用
vue项目使用ueditor指南
基本使用
1.下载资源包
因为ueditor在npm上暂无官方依赖包,因此需要先到官网下载文件包,我下载的是jsp版本的
2.引入依赖文件
将下载后的文件夹命名为UE,并放入到项目static文件夹中,然后再main.js引入依赖文件(我这里是全局引入,也可以再使用的组件中引入);
import '../static/UE/ueditor.config.js' import '../static/UE/ueditor.all.min.js' import '../static/UE/lang/zh-cn/zh-cn.js' import '../static/UE/ueditor.parse.min'
3.初始化ueditor
我这里是单独将ueditor抽成一个组件,因此初始化时的id和配置都是从父组件传入的。定义组件:
<template> <div> <script :id=id type="text/plain"></script> </div> </template> <script> export default { name: 'UE', data () { return { editor: null } }, props: { config: { type: Object }, id: { type: String }, content: { type: String } }, mounted () { this._initEditor() }, methods: { _initEditor () { // 初始化 this.editor = UE.getEditor(this.id,this.config) }, getUEContent () { // 获取含标签内容方法 return this.editor.getContent() } }, destroyed () { this.editor.destroy() } </script>
4.使用组件:
(1).通过import引入定义好的组件;
import UE from '@/components/ueditor/ueditor.vue'
(2).在对应的位置使用组件
<el-form-item label="文章内容" prop="articleContent"> <UE :id=id :config=config ref="ue"></UE> </el-form-item>
(3).在父组件的data中定义初始化配置
// 初始化Ueditor配置参数 config: { initialFrameWidth: null, initialFrameHeight: 300 }, id: 'container',// 不同编辑器必须不同的id
(4).在父组件中获取编辑器内容
// 获取富文本内容 getEdiotrContent () { let content = this.$refs.ue.getUEContent() // 调用子组件方法 this.articleData.articleContent = content }
使用配置
如果需要使用到图片上传功能就需要进行在资源文件ueditor.config.js中正确配置资源路径和图片上传路径
资源加载路径:window.UEDITOR_HOME_URL = "/static/UE/";
文件上传路径:serverUrl: 后台接口地址
跳坑心得
1.开发环境正常使用,但生产环境样式文件未加载,编辑器无法正常显示,图片上传功能无法使用
(1)样式文件未加载
在开发环境我配置的资源路径是:window.UEDITOR_HOME_URL = "/static/UE/";
但当我发布到生产环境时样式完全乱了。
—— 这是因为我代码不是直接放在服务器根目录,而是下级文件夹中,因此资源文件无法正确加载,因为需要开发环境和生产环境配置不同的window.UEDITOR_HOME_URL,当然如果代码放在根目录,此处无需修改
(2)图片上传无法使用
—— 这是因为的在开发环境上传路径做了代理,而static文件不会被打包压缩,在生产环境请求路径就不对。
以上两个问题,我做了如下配置:
var serverApi = ''; if (process.env.NODE_ENV === "production" || process.env.NODE_ENV === "productionTest") { // 生产/测试环境 window.UEDITOR_HOME_URL = "/newconsole/modules/static/UE/"; serverApi = "/newconsole/static/UE/config/getConfig" }else { // 开发环境 window.UEDITOR_HOME_URL = "/static/UE/"; serverApi = "/api/static/UE/config/getConfig" } var URL = window.UEDITOR_HOME_URL || getUEBasePath(); /** * 配置项主体。注意,此处所有涉及到路径的配置别遗漏URL变量。 */ window.UEDITOR_CONFIG = { //为编辑器实例添加一个路径,这个不能被注释 UEDITOR_HOME_URL: URL, // 服务器统一请求接口路径 serverUrl: serverApi }
这样就可以很好的兼任开发环境和生产环境。
2.编辑器内容过多时,会将编辑器撑开拉长,体验不好
这个问题处理就比较简单了,只需要在ueditor.config.js文件中修改autoHeightEnabled:false 即可,这样如果内容过多时就会出现滚动条,而不会撑开编辑器。
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容