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 相关文章推荐
用Javscript实现表单复选框的全选功能
May 25 Javascript
jQuery 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
基于jquery的关于动态创建DOM元素的问题
Dec 24 Javascript
基于jquery的鼠标拖动效果代码
May 30 Javascript
javascript学习笔记(十) js对象 继承
Jun 19 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
js判断两个日期是否相等的方法
Sep 10 Javascript
javascript中select下拉框的用法总结
Jan 07 Javascript
JS操作input标签属性checkbox全选的实现代码
Mar 02 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
Mar 21 Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
Apr 29 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
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
解析PHP工厂模式的好处
2013/06/18 PHP
smarty中post用法实例
2014/11/28 PHP
php递归json类实例
2014/12/02 PHP
php实现搜索一维数组元素并删除二维数组对应元素的方法
2015/07/06 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
php中file_get_contents()函数用法实例
2019/02/21 PHP
javascript 兼容FF的onmouseenter和onmouseleave的代码
2008/07/19 Javascript
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
五段实用的js高级技巧
2011/12/20 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
2017/02/13 Javascript
bootstrap 设置checkbox部分选中效果
2017/04/20 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
2017/07/19 Javascript
highcharts 在angular中的使用示例代码
2017/09/20 Javascript
JQuery中DOM节点的操作与访问方法实例分析
2019/12/23 jQuery
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
Python标准库使用OrderedDict类的实例讲解
2019/02/14 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
python绘制封闭多边形教程
2020/02/18 Python
Mamas & Papas沙特阿拉伯:英国最受欢迎的婴儿品牌
2017/11/20 全球购物
Nili Lotan官网:Nili Lotan同名品牌
2018/01/07 全球购物
Spartoo西班牙官网:法国时尚购物网站
2018/03/27 全球购物
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
农民工创业典型事迹
2014/01/25 职场文书
考生诚信考试承诺书
2014/05/23 职场文书
任长霞观后感
2015/06/16 职场文书
感恩父母主题班会
2015/08/12 职场文书
《悬崖边的树》读后感2篇
2019/12/02 职场文书
教你怎么用PyCharm为同一服务器配置多个python解释器
2021/05/31 Python
linux下安装redis图文详细步骤
2021/12/04 Redis
python实现学生信息管理系统(面向对象)
2022/06/05 Python