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 相关文章推荐
Script的加载方法小结
Jan 12 Javascript
JavaScript 变量作用域分析
Jul 04 Javascript
Javascript中产生固定结果的函数优化技巧
Jan 16 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
JavaScript实现网页加载进度条代码超简单
Sep 21 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
Aug 25 Javascript
浅谈Vue下使用百度地图的简易方法
Mar 23 Javascript
vue.js将时间戳转化为日期格式的实现代码
Jun 05 Javascript
Vue 配合eiement动态路由,权限验证的方法
Sep 26 Javascript
axios如何利用promise无痛刷新token的实现方法
Aug 27 Javascript
react用Redux中央仓库实现一个todolist
Sep 29 Javascript
让你30分钟快速掌握vue3教程
Oct 26 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数据结构与算法(PHP描述) 快速排序 quick sort
2012/06/21 PHP
PHP数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
解析获取优酷视频真实下载地址的PHP源代码
2013/06/26 PHP
PHP Cookie学习笔记
2016/08/23 PHP
在浏览器窗口上添加遮罩层的方法
2012/11/12 Javascript
禁止ajax缓存获取程序最新数据的方法
2013/11/19 Javascript
js的toUpperCase方法用法实例
2015/01/27 Javascript
JSONP之我见
2015/03/24 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
nodejs之get/post请求的几种方式小结
2017/07/26 NodeJs
详解JavaScript中的数组合并方法和对象合并方法
2018/05/11 Javascript
Vue验证码60秒倒计时功能简单实例代码
2018/06/22 Javascript
vue-cli和v-charts实现可视化图表过程解析
2019/10/08 Javascript
一起写一个即插即用的Vue Loading插件实现
2019/10/31 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
浅析Python多线程下的变量问题
2015/04/28 Python
python+django快速实现文件上传
2016/10/24 Python
Python编程把二叉树打印成多行代码
2018/01/04 Python
Python2包含中文报错的解决方法
2018/07/09 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
Python监控服务器实用工具psutil使用解析
2019/12/19 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
Otticanet意大利:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
一套中级Java程序员笔试题
2015/01/14 面试题
儿科护士实习自我鉴定
2013/10/17 职场文书
电信专业毕业生推荐信
2013/11/18 职场文书
团队精神的演讲稿
2014/05/14 职场文书
大三学生学年自我鉴定
2014/09/12 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
党员个人承诺书
2015/04/27 职场文书
如何正确理解python装饰器
2021/06/15 Python
一文弄懂MySQL索引创建原则
2022/02/28 MySQL
关于Python中进度条的六个实用技巧分享
2022/04/05 Python