在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 相关文章推荐
用Javascript 和 CSS 实现脚注(Footnote)效果
Sep 09 Javascript
jQuery+CSS 实现的超Sexy下拉菜单
Jan 17 Javascript
node.js使用require()函数加载模块
Nov 26 Javascript
jQuery事件对象总结
Oct 17 Javascript
jQuery序列化表单成对象的简单实现
Nov 29 Javascript
微信小程序 require机制详解及实例代码
Dec 14 Javascript
JQuery实现图片轮播效果
May 08 jQuery
js轮播图的插件化封装详解
Jul 17 Javascript
js正则表达式校验指定字符串的方法
Jul 23 Javascript
jquery操作select常见方法大全【7种情况】
May 28 jQuery
微信小程序 调用远程接口 给全局数组赋值代码实例
Aug 13 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
Dec 04 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 文件上传代码(限制jpg文件)
2010/01/05 PHP
php提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
ThinkPHP的L方法使用简介
2014/06/18 PHP
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
jquery select选中的一个小问题
2009/10/11 Javascript
jQuery中与toggleClass等价的程序段 以及未来学习的方向
2010/03/18 Javascript
js定时器的使用(实例讲解)
2014/01/06 Javascript
js控制浏览器全屏示例代码
2014/02/20 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
2014/09/01 Javascript
总结javascript中的六种迭代器
2016/08/16 Javascript
那些精彩的JavaScript代码片段
2017/01/12 Javascript
微信小程序之MaterialDesign--input组件详解
2017/02/15 Javascript
图文讲解vue的v-if使用方法
2019/02/11 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
浅谈Python 的枚举 Enum
2017/06/12 Python
Python 支付整合开发包的实现
2019/01/23 Python
python处理excel绘制雷达图
2019/10/18 Python
flask框架渲染Jinja模板与传入模板变量操作详解
2020/01/25 Python
基于Python3.6中的OpenCV实现图片色彩空间的转换
2020/02/03 Python
使用python-pptx包批量修改ppt格式的实现
2020/02/14 Python
linux 下selenium chrome使用详解
2020/04/02 Python
Django基于客户端下载文件实现方法
2020/04/21 Python
keras绘制acc和loss曲线图实例
2020/06/15 Python
call在Python中改进数列的实例讲解
2020/12/09 Python
python正则表达式re.match()匹配多个字符方法的实现
2021/01/27 Python
美国一家主打母婴用品的团购网站:zulily
2017/09/19 全球购物
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
产品质量承诺书
2014/03/27 职场文书
《祁黄羊》教学反思
2014/04/22 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书
如何利用React实现图片识别App
2022/02/18 Javascript
Win11如何设置右键单击显示所有选项?Win11右键单击显示所有选项设置教程
2022/04/08 数码科技