Vue.js结合Ueditor富文本编辑器的使用方法
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Vue.js结合Ueditor富文本编辑器的使用方法,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3207字,纯文字阅读大概需要5分钟。
内容图文
本篇文章主要介绍了Vue.js结合Ueditor的项目实例代码,这里整理了详细的代码,具有一定的参考价值,有兴趣的可以了解一下在前端开发的项目中。难免会遇到需要在页面上集成一个富文本编辑器。
前一段时间公司Vue.js项目需要使用UEditor富文本编辑器,在百度上搜索一圈没有发现详细的说明,决定自己尝试,忙活了一天终于搞定了。
1. 总体思路
1.1 模块化
vue的很大的一个优势在于模块化,我们可以通过模块化实现页面和逻辑的复用。所以可以把Ueditor重新封装成一个.vue的模板文件。其他组件通过引入这个模板实现代码复用。
1.2 数据传输
首先父组件需要设置编辑器的长度、宽度、初始文本,这些数据可以通过props来传递。编辑器中的文本变化可以通过vue自定义事件向父组件传递。
2. 具体实现步骤
2.1 引入关键的JS以及CSS文件
将以下文件全部拷贝到项目中
2.2 配置Ueditor.config.js
首先配置URL参数,我们需要将这个路径指向刚才拷贝的文件的更目录,注意这里最好使用相对路劲。
然后是默认宽度高度的设置
,initialFrameWidth:null // null表示宽度自动 ,initialFrameHeight:320
其他功能的配置可以在官方文档查看
2.3 创建编辑器模板
我们需要在编辑器模板中import Ueditor核心JS库,并添加contentChange回调函数就大功告成了。
之所以使用import语法来引入核心JS库是因为这样更符合ES6模块化的规范,我看到网上有人建议在main.js中引入JS,但是过早地引入JS可能导致页面首次加载缓慢。
<template> <p ref="editor"></p> </template> <script> /* eslint-disable */ import '../../../assets/js/ueditor/ueditor.config'; import '../../../assets/js/ueditor/ueditor.all'; import '../../../assets/js/ueditor/lang/zh-cn/zh-cn'; import { generateRandonInteger } from '../../../vuex/utils'; export default { data() { return { id: generateRandonInteger(100000) + 'ueditorId', }; }, props: { value: { type: String, default: null, }, config: { type: Object, default: {}, } }, watch: { value: function value(val, oldVal) { this.editor = UE.getEditor(this.id, this.config); if (val !== null) { this.editor.setContent(val); } }, }, mounted() { this.$nextTick(function f1() { // 保证 this.$el 已经插入文档 this.$refs.editor.id = this.id; this.editor = UE.getEditor(this.id, this.config); this.editor.ready(function f2() { this.editor.setContent(this.value); this.editor.addListener("contentChange", function () { const wordCount = this.editor.getContentLength(true); const content = this.editor.getContent(); const plainTxt = this.editor.getPlainTxt(); this.$emit('input', { wordCount: wordCount, content: content, plainTxt: plainTxt }); }.bind(this)); this.$emit('ready', this.editor); }.bind(this)); }); }, }; </script> <style> body{ background-color:#ff0000; } </style>
3. 编辑器的使用
使用编辑器模板的时候我需要通过props传入config以及初始文本value。
<template xmlns:v-on="http://www.w3.org/1999/xhtml"> <p class="edit-area"> <ueditor v-bind:value=defaultMsg v-bind:config=config v-on:input="input" v-on:ready="ready"></ueditor> </p> </template> <script> import ueditor from './ueditor.vue'; export default { components: { ueditor, }, data() { return { defaultMsg: '初始文本', config: { initialFrameWidth: null, initialFrameHeight: 320, }, }; }, }; </script>
如果需要让Ueditor上传图片的话,还需要在后台配置一个接口。这部分还没有时间研究,等过几天补上
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
vue的项目优化之通过keep-alive数据缓存的方法
Vue组件选项props的使用介绍
Vue.js通用应用框架-Nuxt.js的解析
以上就是Vue.js结合Ueditor富文本编辑器的使用方法的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的Vue.js结合Ueditor富文本编辑器的使用方法全部内容,希望文章能够帮你解决Vue.js结合Ueditor富文本编辑器的使用方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。