首页 > 其他分享 >vue 项目中如何使用 富文本编辑

vue 项目中如何使用 富文本编辑

时间:2022-08-13 19:44:52浏览次数:87  
标签:文本编辑 vue 项目 wangeditor customConfig html editor any

第一步

  npm   i    wangeditor

第二步

在需要的组件中引入

import WangEditor from "wangeditor";

第三步   找到容器  <div id="editor"></div> 写一个函数  const wangeditor = () => {       let editor: any = new WangEditor("#editor");       editor.config.customAlert = (err: any) => {         //如果检测到错误的话就打印.         console.log(err);       };       editor.customConfig = editor.customConfig         ? editor.customConfig         : editor.config;       //设置customConfig属性       //设置customConfig对编辑器内文字的变化的处理方法       editor.customConfig.onchange = (html: any) => {         //参数html即已经转化HTML格式的文本         editorContent.value = html;       };       editor.create();     };    

标签:文本编辑,vue,项目,wangeditor,customConfig,html,editor,any
From: https://www.cnblogs.com/yxlbk/p/16583882.html

相关文章

  • VUE学习-mixin混入
    mixin混入混入(mixin)提供了一种非常灵活的方式,来分发Vue组件中的可复用功能。组件式混入//定义一个混入对象varmyMixin={ created:function(){this.hel......
  • vue+openlayer实现地图聚合效果和撒点效果
    前言:openlayer是目前我们gis常用的一款开源的,并且反馈都特别好的软件了,像之前的ol3,风靡一时,地图实现也很简单,很实用,目前vue中使用地图也是非常多的,那么如果在......
  • vue学习之------过滤器Filters
    注:Vue3中已废弃filter过滤器常用于文本的格式化例如:helloworld>>Hello World过滤器可以用在两个地方:{{插值表达式}}和v-bind属性绑定 过滤器定义: ......
  • vue echarts 宽度100% 显示不正常
    varchartDom=document.getElementById("chartDom");varoption={};varmyChart=echarts.init(chartDom);option&&myChart.setOption(opt......
  • vuecli3+cesium开发环境搭建
    一、vue-cli3+cesium搭建步骤1、vuecreate'yourproject-name'新建你的项目2、安装cesium依赖npminstallcesium--save3、新建cesiumContainer.vue文件,src/views/......
  • VUE学习-过渡 & 动画
    过渡&动画Vue在插入、更新或者移除DOM时,提供多种不同方式的应用过渡效果。包括以下工具:在CSS过渡和动画中自动应用class在过渡钩子函数中使用JavaScript直接......
  • Java中list集合自定义排序-2022新项目
    一、业务场景为了加快首页数据查询的效率,因此将首页查询的数据大多数都放在了缓存中,包括各种list集合数据。对这些从缓存中获取的数据做了一个兜底处理,如果从缓存中......
  • sass-loader 版本不兼容导致老项目起不来,重新构建失败的问题 Module build failed (fr
    Failedtocompile../src/styles/index.scss(./node_modules/[email protected]@css-loader??ref--8-oneOf-3-1!./node_modules/[email protected]@postcss-loader......
  • VUE学习-表单输入绑定
    表单输入绑定v-model可以用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。v-model会忽略所有表单元素的value、checked、selecteda......
  • VUE学习-基础(基础语法 & 模板语法)
    基础语法引入vue<!--开发环境版本,包含了有帮助的命令行警告--><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!--生产环境版本,优化了尺寸......