在vue中获取wangeditor的html和text的操作

2024-08-02 03:42:02

目的：vue 中获取 wangeditor 的 html 和 text。

补充知识：vue-cli webpack 引入 wangeditor(轻量级富文本框)

1：使用npm下载：

//（注意 wangeditor 全部是小写字母）

npm install wangeditor

2: 直接在项目模板中引用

import E from 'wangeditor'

3：HTML

<div id="editorElem" style="text-align:left"></div>

<button v-on:click="getContent">查看内容</button>

4：js代码

  export default {
   name: 'editor',
   data () {
    return {
     editorContent: ''
    }
   },
   methods: {
    getContent: function () {
      alert(this.editorContent)
    }
   },
   mounted() {
    var editor = new E('#editorElem')
    editor.customConfig.onchange = (html) => {
     this.editorContent = html
    }
    editor.create()
   }
  }

5：哈哈然后就搞定啦附录原作者github 地址

https://github.com/wangfupeng1988/wangEditor/blob/master/README.md

以上这篇在vue中获取wangeditor的html和text的操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

详解Vue基于vue-quill-editor富文本编辑器使用心得

vue-quill-editor的guthub地址,现在市面上有很多的富文本编辑器,我个人还是非常推荐Vue自己家的vue-quill-deitor,虽然说只支持IE10+,但这种问题,帅给别人吧! 那么我们直击正题,在vue中使用quill呢,我们需要npm进行安装,安装命令如下: npm install vue-quill-editor 再安装依赖项 npm install quill 使用: 在main.js中进行引入 import Vue from 'vue' import VueQui
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义

本文为大家分享了Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义,供大家参考,具体内容如下 1.安装 npm install vue-quill-editor --save 2.在main.js中引入 import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quil
Vue中Quill富文本编辑器的使用教程

在项目中需要引入Quill文本编辑器,并且根据需求,需要自定义字体选项.图片拖拽上传和改变大小,所以根据Quill官网系统学习了一下,以下是我学习和研究的结果. 一.主题 Quill的富文本编辑器分为snow和bubble两种. snow是有工具栏的,如下: bubble是只有文本域的,如下: 那么具体如何选择在vue项目中,具体引入Quill的文件中,需要使用哪种主题就写哪个.默认是snow主题的. <script> export default { data:function(){ re
在vue中获取wangeditor的html和text的操作

目的:vue 中获取 wangeditor 的 html 和 text. 补充知识:vue-cli webpack 引入 wangeditor(轻量级富文本框) 1:使用npm下载: //(注意 wangeditor 全部是小写字母) npm install wangeditor 2: 直接在项目模板中引用 import E from 'wangeditor' 3:HTML <div id="editorElem" style="text-align:left"
Vue中使用wangeditor富文本编辑的问题

wangEditor是基于javascript和css开发的 Web富文本编辑器, 轻量.简洁.易用.开源免费. 在我们实际项目上还是比较频繁应用到的,下面出个案例供大家参考学习- wangEditor文档:https://www.wangeditor.com/ 富文本编辑器截图: <!--富文本编辑器.http://www.wangeditor.com/ 使用示例: <AppEditor v-model="content"></AppEditor> --
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)

mounted() { // 在mounted中监听表格scroll事件 this.$refs.scrollTable.addEventListener( 'scroll',(event) => { this.adjustTable(event); }); }, ...... // target中的属性很多,可以通过控制台查看--clientWidth可以获取除滚动条外的可视区域宽度 adjustTable(event) { this.clientWidth = event.target.cli
在vue中获取token,并将token写进header的方法

需要准备的东西:Vue+axios+Vuex+Vue-router 1.在login.vue中通过发送http请求获取token //根据api接口获取token var url = this.HOST + "/session"; this.$axios.post(url, { username: this.loginForm.username, password: this.loginForm.pass }).then(res => { // console.log(res.d
在Vue中获取组件声明时的name属性方法

在实际开发中,我们可能需要拿到组件声明时创建的一些属性,比较典型的话就是name属性,在实际开发中需要定位问题时,需要找到是哪一个组件,但是我们总不可能写代码的时候去先找到组件的name属性,然后复制粘贴,作为参数传给函数吧. 例如: catchError('componentsName', 'errorDescription') 太傻了. 解决办法,获取到组件的this,然后利用this去拿到组件的name属性,这样的话,代码就可以这么写: catchError.call(this, 'err
Vue 中获取当前时间并实时刷新的实现代码

1. 实现代码 <template> <div> {{nowDate}}{{nowWeek}}{{nowTime}} </div> </template> <script> export default { data(){ return { nowDate: "", // 当前日期 nowTime: "", // 当前时间 nowWeek: "" // 当前星期 } }, methods
在Vue 中获取下拉框的文本及选项值操作

方法1:  <el-form :model="ruleForm" label-position="right" ref="ruleForm" // 被ref 标记的 status-icon size="small" inline :rules="rules" label-width="150px" class="demo
在Vue中获取自定义属性方法:data-id的实例

获取自定义属性的方法: 第一步:首先在标签上绑定上@click="getDateId(item.id)",并将属性值传到绑定的事件里面第二步:在标签上继续绑定:date-id = "item.id"属性第三步:在<script>里面的属性methods里面添写上事件函数 getDateId(id){} 在事件函数里面获取id的值即可 <template> <h2 class="left t-title" @cli
如何在Vue中获取DOM元素的实际宽高

目录前言一.获取元素二.获取元素宽高补充:vue项目获取dom元素宽高总是不准确总结前言最近使用 D3.js 开发可视化图表,因为移动端做了 rem 适配,所以需要动态计算获取图表容器的宽高,其中涉及到一些原生DOM API的使用,避免遗忘这里总结一下. 一.获取元素在 Vue 中可以使用 ref 来获取一个真实的 DOM 元素. 为了保险起见,所有的 DOM 操作建议都放在 $nextTick() 方法中. <template> <div class="box
在vue中使用jsonp进行跨域请求接口操作

前言: 这里我们使用的是第三方插件jsonp. github网址:https://github.com/webmodules/jsonp 1.安装 npm install jsonp -S 2.引入一般新建一个js文件来引入原始jsonp插件,然后对原始插件进行封装,对跨域接口参数的拼接,封装好这个jsonp文件后export出去,之后在哪里用到就再在那里import. 1.新建jsonp.js文件来封装原始jsonp插件 // 引入原始jsonp插件 import originJsonp f

在vue中获取wangeditor的html和text的操作

相关推荐

随机推荐