Vue+Element使用富文本编辑器的示例代码


Posted in Javascript onAugust 14, 2017

富文本编辑器在任何项目中都会用到,在Element中我们推荐vue-quill-editor组件,现在我就把它提供给大家,希望对大家有用。具体截图如下:

Vue+Element使用富文本编辑器的示例代码

安装编辑器组件

具体方法:npm install vue-quill-editor --save

编写组件

首先我们在components文件夹里创建ue.vue组件,效果图如下:

Vue+Element使用富文本编辑器的示例代码

组件

<!-- 组件代码如下 -->
<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>

以上就是全部代码,谢谢大家,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 的应用开发初探(mootools)
Dec 19 Javascript
微博@符号的用户名提示效果。(想@到谁?)
Nov 05 Javascript
Jquery之美中不足小结
Feb 16 Javascript
jQuery常见开发技巧详细整理
Jan 02 Javascript
Jquery easyUI 更新行示例
Mar 06 Javascript
实例讲解JQuery中this和$(this)区别
Dec 08 Javascript
jquery移动点击的项目到列表最顶端的方法
Jun 24 Javascript
jQuery实现文本框邮箱输入自动补全效果
Nov 17 Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 Javascript
Bootstarp基本模版学习教程
Feb 01 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
Sep 28 Javascript
带你快速理解javascript中的事件模型
Aug 14 #Javascript
JS获取子、父、兄节点方法小结
Aug 14 #Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 #Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 #Javascript
JavaScript实现动态添加Form表单元素的方法示例
Aug 14 #Javascript
JavaScript实现的搜索及高亮显示功能示例
Aug 14 #Javascript
带你了解session和cookie作用原理区别和用法
Aug 14 #Javascript
You might like
浅谈PHP语法(1)
2006/10/09 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
2017/01/13 PHP
PHP用户管理中常用接口调用实例及解析(含源码)
2017/03/09 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
javascript 冒号 使用说明
2009/06/06 Javascript
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
js操作iframe父子窗体示例
2014/05/22 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
Angularjs material 实现搜索框功能
2016/03/08 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
2017/01/13 Javascript
彻底解决 webpack 打包文件体积过大问题
2017/07/07 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
2018/09/18 Javascript
JavaScript判断数组类型的方法
2019/10/23 Javascript
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
原生js+css实现tab切换功能
2020/09/17 Javascript
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28
2020/10/28 DOTA
Python3.5面向对象程序设计之类的继承和多态详解
2019/04/24 Python
django框架中间件原理与用法详解
2019/12/10 Python
你可能不知道的Python 技巧小结
2020/01/29 Python
Pyecharts地图显示不完成问题解决方案
2020/05/11 Python
纯css3实现走马灯效果
2014/12/26 HTML / CSS
免费获得微软MCSD证书赶快行动吧!
2012/11/13 HTML / CSS
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
学校节能宣传周活动总结
2014/07/09 职场文书
党支部书记四风问题整改措施
2014/09/24 职场文书
教师党员自我评价范文
2015/03/04 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
2015入党自传格式范文
2015/06/26 职场文书
开学季:喜迎新生,迎新标语少不了
2019/11/07 职场文书
MySQL索引知识的一些小妙招总结
2021/05/10 MySQL