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 相关文章推荐
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
Sep 10 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
Jan 14 Javascript
JQuery性能优化的几点建议
May 14 Javascript
jquery delay()介绍及使用指南
Sep 02 Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 Javascript
javascript编写简易计算器
May 06 Javascript
element-ui 限制日期选择的方法(datepicker)
May 16 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
关于AOP在JS中的实现与应用详解
May 06 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
Sep 06 Javascript
js实现带箭头的进度流程
Mar 26 Javascript
JS如何实现手机端输入验证码效果
May 13 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
非常好用的两个PHP函数 serialize()和unserialize()
2012/02/04 PHP
PHP输出图像imagegif、imagejpeg与imagepng函数用法分析
2016/11/14 PHP
php的4种常用运行方式详解
2016/12/22 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
php实现session共享的实例方法
2019/09/19 PHP
基于PHP实现生成随机水印图片
2020/12/09 PHP
Jquery iframe内部出滚动条
2010/02/11 Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
2011/10/06 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
JQuery Ajax WebService传递参数的简单实例
2016/11/02 Javascript
从零学习node.js之简易的网络爬虫(四)
2017/02/22 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
JavaScript数据结构之单链表和循环链表
2017/11/28 Javascript
浅谈Angular7 项目开发总结
2018/12/19 Javascript
微信小程序文章详情页跳转案例详解
2019/07/09 Javascript
layui table 表格上添加日期控件的两种方法
2019/09/28 Javascript
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
Python根据区号生成手机号码的方法
2015/07/08 Python
关于Python面向对象编程的知识点总结
2017/02/14 Python
python3基于TCP实现CS架构文件传输
2018/07/28 Python
基于Django静态资源部署404的解决方法
2019/07/28 Python
使用python和pygame制作挡板弹球游戏
2019/12/03 Python
python随机生成大小写字母数字混合密码(仅20行代码)
2020/02/01 Python
python如何实现复制目录到指定目录
2020/02/13 Python
CSS3的RGBA中关于整数和百分比值的转换
2015/08/04 HTML / CSS
挖掘机司机岗位职责
2014/02/12 职场文书
幼儿园招生广告
2014/03/19 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
宾馆前台接待岗位职责
2015/04/02 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
离职告别感言
2015/08/04 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书