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


Posted in Javascript onOctober 23, 2020

目的: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"></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的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery.buildFragment使用方法及思路分析
Jan 07 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
Jul 17 Javascript
node.js中的url.parse方法使用说明
Dec 10 Javascript
jQuery检测输入的字符串包含的中英文的数量
Apr 17 Javascript
基于zepto的移动端轻量级日期插件--date_picker
Mar 04 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
Nov 22 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
Feb 10 Javascript
vue.js父组件使用外部对象的方法示例
Apr 25 Javascript
JavaScript引用类型Array实例分析
Jul 24 Javascript
详解vue中this.$emit()的返回值是什么
Apr 07 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
May 05 Javascript
解决微信小程序中的滚动穿透问题
Sep 16 Javascript
jquery实现异步文件上传ajaxfileupload.js
Oct 23 #jQuery
vue项目配置同一局域网可使用ip访问的操作
Oct 23 #Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 #Javascript
利用PHP实现递归删除链表元素的方法示例
Oct 23 #Javascript
如何在面试中手写出javascript节流和防抖函数
Oct 22 #Javascript
如何通过Proxy实现JSBridge模块化封装
Oct 22 #Javascript
微信小程序canvas动态时钟
Oct 22 #Javascript
You might like
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
javascript 动态加载 css 方法总结
2009/07/11 Javascript
jquery animate 动画效果使用说明
2009/11/04 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
3种vue组件的书写形式
2017/11/29 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
2018/09/07 Javascript
详解vue组件中使用路由方法
2019/02/12 Javascript
js/jQuery实现全选效果
2019/06/17 jQuery
Angular6使用forRoot() 注册单一实例服务问题
2019/08/27 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
Webpack5正式发布,有哪些新特性
2020/10/12 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
python连接mysql调用存储过程示例
2014/03/05 Python
python以环状形式组合排列图片并输出的方法
2015/03/17 Python
浅析Python编写函数装饰器
2016/03/18 Python
Python编写Windows Service服务程序
2018/01/04 Python
Python实现通讯录功能
2018/02/22 Python
python调用API实现智能回复机器人
2018/04/10 Python
pandas分别写入excel的不同sheet方法
2018/12/11 Python
初次部署django+gunicorn+nginx的方法步骤
2019/09/11 Python
python3.8下载及安装步骤详解
2020/01/15 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
耐克美国官网:Nike.com
2016/08/01 全球购物
三分钟演讲稿事例
2014/03/03 职场文书
硕士生工作推荐信
2014/03/07 职场文书
法定代表人身份证明书
2014/09/10 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers