Vue+Element使用富文本编辑器的示例代码
2017-08-14 14:40
1396 查看
富文本编辑器在任何项目中都会用到,在Element中我们推荐vue-quill-editor组件,现在我就把它提供给大家,希望对大家有用。具体截图如下:
安装编辑器组件
具体方法:npm install vue-quill-editor --save
编写组件
首先我们在components文件夹里创建ue.vue组件,效果图如下:
组件
<!-- 组件代码如下 --> <template> <div> <script id="editor" type="text/plain"></script> </div> </template> <script> export default { name: 'UE', data () { return { editor: null } }, props: { defaultMsg: { type: String }, config: { type: Object } }, mounted() { const _this = this; this.editor = UE.getEditor('editor', this.config); // 初始化UE this.editor.addListener("ready", function () { _this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后,放入内容。 }); }, methods: { getUEContent() { // 获取内容方法 return this.editor.getContent() } }, destroyed() { this.editor.destroy(); } } </script>
在页面中使用
下面是使用代码
<template> <div> <el-row class="warp"> <el-col :span="24" class="warp-breadcrum"> <el-breadcrumb separator=">"> <el-breadcrumb-item :to="{path:'/home'}"><b>首页</b></el-breadcrumb-item> <el-breadcrumb-item :to="{path: '/aboutus/aboutlist'}">关于我们</el-breadcrumb-item> <el-breadcrumb-item>添加关于我们</el-breadcrumb-item> </el-breadcrumb> </el-col> <!-- Form 组件提供了表单验证的功能,只需要通过 rule 属性传入约定的验证规则,并 Form-Item 的 prop 属性设置为需校验的字段名即可。具体可以参考官网:http://element.eleme.io/#/zh-CN/component/form --> <el-col :span="24" class="warp-main"> <el-form ref="infoForm" :model="infoForm" :rules="rules" label-width="120px"> <el-form-item label="标题" prop="a_title"> <el-input v-model="infoForm.a_title"></el-input> </el-form-item> <el-form-item label="来源" prop="a_source"> <el-input v-model="infoForm.a_source"></el-input> </el-form-item> <!--使用编辑器 --> <el-form-item label="详细"> <div class="edit_container"> <quill-editor v-model="infoForm.a_content" ref="myQuillEditor" class="editer" :options="editorOption" @ready="onEditorReady($event)"> </quill-editor> </div> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">确认提交</el-button> </el-form-item> </el-form> </el-col> </el-row> </div> </template> <script> import { quillEditor } from 'vue-quill-editor' //调用编辑器 export default { data() { return { infoForm: { a_title: '', a_source: '', a_content:'', editorOption: {} }, //表单验证 rules: { a_title: [ {required: true, message: '请输入标题', trigger: 'blur'} ], a_content: [ {required: true, message: '请输入详细内容', trigger: 'blur'} ] }, } }, computed: { editor() { return this.$refs.myQuillEditor.quill } }, mounted() { //初始化 }, methods: { onEditorReady(editor) { }, onSubmit() { //提交 //this.$refs.infoForm.validate,这是表单验证 this.$refs.infoForm.validate((valid) => { if(valid) { this.$post('m/add/about/us',this.infoForm).then(res => { if(res.errCode == 200) { this.$message({ message: res.errMsg, type: 'success' }); this.$router.push('/aboutus/aboutlist'); } else { this.$message({ message: res.errMsg, type:'error' }); } }); } }); } }, components: { //使用编辑器 quillEditor } } </script>
相关文章推荐
- vue使用mint-ui实现下拉刷新和无限滚动的示例代码
- 在vue项目中使用element-ui的Upload上传组件的示例
- vue2.0项目中使用Ueditor富文本编辑器示例代码
- vue2.0使用swiper组件实现轮播的示例代码
- 使用vue的transition完成滑动过渡的示例代码
- vue中使用heatmapjs的示例代码(结合百度地图)
- vue组件中使用iframe元素的示例代码
- vue使用drag与drop实现拖拽的示例代码
- vue中使用gojs/jointjs的示例代码
- 使用vue.js实现联动效果的示例代码
- 在Vue 中使用Typescript的示例代码
- vue+element的表格实现批量删除功能示例代码
- vue 项目中使用Loading组件的示例代码
- vue 里面使用axios 和封装的示例代码
- vuejs+element-ui+laravel5.4上传文件的示例代码
- 如何在vue中使用ts的示例代码
- laravel5.4+vue+element简单搭建的示例代码
- Vue中使用Sortable的示例代码
- vue中使用element-ui进行表单验证的实例代码
- vue基于Element构建自定义树的示例代码