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

富文本编辑器在任何项目中都会用到,在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>

以上就是全部代码,谢谢大家,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Vue.js结合Ueditor富文本编辑器的实例代码

    在前端开发的项目中.难免会遇到需要在页面上集成一个富文本编辑器. 前一段时间公司Vue.js项目需要使用UEditor富文本编辑器,在百度上搜索一圈没有发现详细的说明,决定自己尝试,忙活了一天终于搞定了. 1. 总体思路 1.1 模块化 vue的很大的一个优势在于模块化,我们可以通过模块化实现页面和逻辑的复用.所以可以把Ueditor重新封装成一个.vue的模板文件.其他组件通过引入这个模板实现代码复用. 1.2 数据传输 首先父组件需要设置编辑器的长度.宽度.初始文本,这些数据可以通过prop

  • vue2.0项目中使用Ueditor富文本编辑器示例代码

    最近在vue项目中需要使用富文本编辑器,于是将Ueditor集成进来,作为公共组件. 项目地址:https://github.com/suweiteng/vue2-management-platform 1.放入静态资源并配置 首先把官网下载的Ueditor资源,放入静态资源src/static中. 修改ueditor.config.js中的window.UEDITOR_HOME_URL配置,如下图: 2.引入 在main.js中引入 import '../static/UE/ueditor.

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

    富文本编辑器在任何项目中都会用到,在Element中我们推荐vue-quill-editor组件,现在我就把它提供给大家,希望对大家有用.具体截图如下: 安装编辑器组件 具体方法:npm install vue-quill-editor --save 编写组件 首先我们在components文件夹里创建ue.vue组件,效果图如下: 组件 <!-- 组件代码如下 --> <template> <div> <script id="editor"

  • Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)

    使用教程(注意细看总结部分,写了几点,希望有所帮助): 1.安装插件:npm install vue-quill-editor 2.安装插件依赖:npm install quill 3.main.js文件中引入: import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' impor

  • 微信小程序整合使用富文本编辑器的方法详解

    本文实例讲述了微信小程序整合使用富文本编辑器的方法.分享给大家供大家参考,具体如下: 使用WxParse插件实现小程序的富文本显示 ,下载地址:富文本插件WxParse 具体使用步骤: 1. 复制插件文件夹到项目根目录,emojis是表情包,可选择性删除 2. 在.js文件中引入WxParse模块 var WxParse= require('../../../wxParse/wxParse.js'); 3. 在.wxss文件中引入WxParse.wxss样式,也可以在app.wxss中引入 @i

  • Django框架使用富文本编辑器Uedit的方法分析

    本文实例讲述了Django框架使用富文本编辑器Uedit的方法.分享给大家供大家参考,具体如下: Uedit是百度一款非常好用的富文本编辑器 一.安装及基本配置 官方GitHub(有详细的安装使用教程):https://github.com/zhangfisher/DjangoUeditor 1. settings.py INSTALLED_APPS = [ ... 'DjangoUeditor', ... ] 2. 配置urls from django.conf.urls import url

  • vue+element 实现商城主题开发的示例代码

    本文介绍了vue+element 实现商城主题开发的示例代码,分享给大家,具体如下: <template> <div> <div class="set-phone"> <el-form :model="theme" :rules="rules" ref="ruleForm" class="demo-ruleForm"> <el-form-item lab

  • vue+element实现动态换肤的示例代码

    有时候一个项目的主题并不能满足所有人的审美,这时候换肤功能就很友好,本项目基于vue+element实现后台管理项目的换肤功能 1.创建换肤组件 <template> <el-color-picker class="theme-picker" popper-class="theme-picker-dropdown" v-model="theme" :predefine="predefineColors" &g

  • Vue 中使用富文本编译器wangEditor3的方法

    富文本编译器在vue中的使用 在开发的过程中由于某些特殊需求,被我们使用,今天我就简单讲一讲如何在vue中使用wangEditor3 首先讲一下简单的使用. 1.使用npm安装 npm install wangeditor --save 2.vue页面代码如下 <template> <section> <div id="div5"></div> <div id="div6"></div> <

  • django轻松使用富文本编辑器CKEditor的方法

    前言 django是一个容易快速上手的web框架,用它来创建内容驱动型的网站(比如独立博客)十分方便.遗憾的是,django并没有提供官方的富文本编辑器,而后者恰好是内容型网站后台管理中不可或缺的控件.ckeditor是一款基于javascript,使用非常广泛的开源网页编辑器.它可以和多种编程语言相结合,python当然也不例外.本文就来介绍一下如何在基于django博客系统如何完美地用上ckeditor. 使用方法 1.安装 pip install django-ckeditor 2.将'c

  • 使用富文本编辑器上传图片实例详解

    富文本编辑器上传图片 一.导入kindeditor的js <script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script> <script type="text/javascript" charset="utf-8" src=&qu

  • vue集成kindeditor富文本的实现示例代码

    指令 该指令的作用是dom渲染后触发,因为非vue的插件有的是dom必须存在的情况下才可以执行 Vue.directive('loaded-callback', { inserted: function (el, binding, vnode) { binding.value(el, binding, vnode) } }) 安装kindeditor npm install kindeditor kindeditor组件 <template> <div class="kinde

随机推荐