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 相关文章推荐
js GridView 实现自动计算操作代码
Mar 25 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
jquery实现叠层3D文字特效代码分享
Aug 21 Javascript
jQuery 中的 DOM 操作
Apr 26 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 Javascript
浅谈Koa服务限流方法实践
Oct 23 Javascript
vue中子组件传递数据给父组件的讲解
Jan 27 Javascript
vue.js中使用echarts实现数据动态刷新功能
Apr 16 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 Javascript
Vue为什么要谨慎使用$attrs与$listeners
Aug 27 Javascript
原生JavaScript实现弹幕组件的示例代码
Oct 12 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
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
javascript操作文本框readOnly
2007/05/15 Javascript
js的with语句使用方法
2007/09/21 Javascript
jquery select(列表)的操作(取值/赋值)
2009/08/06 Javascript
JSQL 基于客户端的成绩统计实现方法
2010/05/05 Javascript
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
jquery随意添加移除html的实现代码
2011/06/21 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
cookie的复制与使用记住用户名实现代码
2013/11/04 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
2014 年最热门的21款JavaScript框架推荐
2014/12/25 Javascript
使用NodeJs 开发微信公众号(三)微信事件交互实例
2016/03/02 NodeJs
jQuery实现的超链接提示效果示例【附demo源码下载】
2016/09/09 Javascript
JavaScript中的ajax功能的概念和示例详解
2016/10/17 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
微信小程序实现上传多张图片、删除图片
2020/07/29 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
简单介绍Python中的几种数据类型
2016/01/02 Python
python中os模块详解
2016/10/14 Python
python利用rsa库做公钥解密的方法教程
2017/12/10 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
使用Python将语音转换为文本的方法
2020/08/10 Python
Django缓存Cache使用详解
2020/11/30 Python
伦敦时尚生活的缩影:LN-CC
2017/01/24 全球购物
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
如何强制垃圾回收
2015/10/06 面试题
三年级作文之小小梦想
2019/12/06 职场文书
Nginx同一个域名配置多个项目的实现方法
2021/03/31 Servers
详解使用内网穿透工具Ngrok代理本地服务
2022/03/31 Servers
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript
Python加密技术之RSA加密解密的实现
2022/04/08 Python