vue-froala-wysiwyg 富文本编辑器功能


Posted in Javascript onSeptember 19, 2019

近期需要在vue3项目上做一个富文本编辑器,找了很多插件组件,最终决定用 froala。虽然不是免费的,但是功能实在是太强大了。

froala 文档:https://www.froala.com/wysiwyg-editor/docs/overview

froala 官方demo: https://www.froala.com/wysiwyg-editor/examples

下面介绍在vue3.中如何安装使用froala。

Step1:

froala 依赖于jQuery。所以要安装jQuery;

yarn add jquery

或者

npm install jquery --save

froala 依赖于 babel-runtime。所以也要安装。

yarn add babel-runtime@6.26.0

或者

npm install babel-runtime@6.26.0

Step2:

在main.js 里引入jQuery。

import jquery from 'jquery'
window.jquery = window.$ = jquery

在main.js里引入froala相关的文件并且进行相应的配置。

require('froala-editor/js/froala_editor.pkgd.min')
require('froala-editor/css/froala_editor.pkgd.min.css')
require('font-awesome/css/font-awesome.css')
require('froala-editor/css/froala_style.min.css')
 
import VueFroala from 'vue-froala-wysiwyg'
Vue.use(VueFroala)

Step3 :

这个时候就可以使用froala这个组件啦~。

在某个.vue文件中:

<template>
 <div>
  <froala :tag="'textarea'" :config="config" v-model="model"></froala>
 </div>
</template>

<script>
import VueFroala from 'vue-froala-wysiwyg';

export default {
 name: 'app',
 data () {
  return {
   config: {
    events: {
     'froalaEditor.initialized': function () {
      console.log('initialized')
     }
    }
   },
   model: 'Edit Your Content Here!'
  }
 }
}
</script>

其他相关的config配置 和 事件操作 可以查看文档。

总结

以上所述是小编给大家介绍的vue-froala-wysiwyg 富文本编辑器功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
根据分辨率不同,调用不同的css文件
Jul 07 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
Apr 12 Javascript
在百度知道团队中快速审批新成员的js脚本
Feb 02 Javascript
Jquery中扩展方法extend使用技巧
Aug 24 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
Nov 28 Javascript
javascript中cookie对象用法实例分析
Jan 30 Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
Dec 17 Javascript
Bootstrap模态框插入视频的实现代码
Jun 25 Javascript
jQuery中复合选择器简单用法示例
Mar 31 jQuery
react-router 路由切换动画的实现示例
Dec 03 Javascript
微信小程序实现两个页面传值的方法分析
Dec 11 Javascript
关于layui toolbar和template的结合使用方法
Sep 19 #Javascript
深入理解javascript prototype的相关知识
Sep 19 #Javascript
基于Vue的商品主图放大镜方案详解
Sep 19 #Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
Sep 19 #Javascript
微信小程序错误this.setData报错及解决过程
Sep 18 #Javascript
解决layui富文本编辑器图片上传无法回显的问题
Sep 18 #Javascript
layui 富文本赋值,取值,取纯文本值的实例
Sep 18 #Javascript
You might like
一个MYSQL操作类
2006/11/16 PHP
深入Nginx + PHP 缓存详解
2013/07/11 PHP
PHP整合七牛实现上传文件
2015/07/03 PHP
一个简单至极的PHP缓存类代码
2015/10/23 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
一直复略了的一个问题,关于表单重复提交
2007/02/15 Javascript
javascript编程起步(第三课)
2007/02/27 Javascript
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
JS高级拖动技术 setCapture,releaseCapture
2011/07/31 Javascript
利用json获取字符出现次数的代码
2012/03/22 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
javascript实现显示和隐藏div方法汇总
2015/08/14 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
基于Jquery和html5的7款个性化地图插件
2015/11/17 Javascript
jquery中ajax处理跨域的三大方式
2016/01/05 Javascript
js和jquery实现监听键盘事件示例代码
2020/06/24 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
JavaScript forEach中return失效问题解决方案
2020/06/01 Javascript
[02:16]DOTA2超级联赛专访Burning 逆袭需要抓住机会
2013/06/24 DOTA
利用python将图片转换成excel文档格式
2017/12/30 Python
python opencv实现图片缺陷检测(讲解直方图以及相关系数对比法)
2020/04/07 Python
深入了解NumPy 高级索引
2020/07/24 Python
Stubhub英国:购买体育、演唱会和剧院门票
2018/06/10 全球购物
美赞臣新加坡官方旗舰店:Enfagrow新加坡
2019/05/15 全球购物
新学期开学演讲稿
2014/05/24 职场文书
党员志愿者活动方案
2014/08/28 职场文书
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
小学生暑假安全公约
2015/07/14 职场文书
小学运动会报道稿
2015/07/22 职场文书
同乡会致辞
2015/07/30 职场文书
教你win10系统中APPCRASH事件问题解决方法
2022/07/15 数码科技
输入框跟随文字内容适配宽实现示例
2022/08/14 Javascript