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 相关文章推荐
accesskey 提交
Jun 26 Javascript
JavaScript 封装Ajax传递的数据代码
Jun 05 Javascript
Jquery 学习笔记(一)
Oct 13 Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
May 24 Javascript
JavaScript动态调整TextArea高度的代码
Dec 28 Javascript
jQuery extend 的简单实例
Sep 18 Javascript
javascript unicode与GBK2312(中文)编码转换方法
Nov 14 Javascript
input链接页面、打开新网页等等的具体实现
Dec 30 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 Javascript
Javascript 正则表达式校验数字的简单实例
Nov 02 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
Nov 02 Javascript
微信小程序支付之c#后台实现方法
Oct 19 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
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
PHP数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
LotusPhp笔记之:基于ObjectUtil组件的使用分析
2013/05/06 PHP
搭建基于Docker的PHP开发环境的详细教程
2015/07/01 PHP
PHP如何通过AJAX方式实现登录功能
2015/11/23 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
PHP 中TP5 Request 请求对象的实例详解
2017/07/31 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
RR vs IO BO3 第二场2.13
2021/03/10 DOTA
走出JavaScript初学困境—js初学
2008/12/29 Javascript
input的focus方法使用
2010/03/13 Javascript
自己动手开发jQuery插件教程
2011/08/25 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
2013/06/05 Javascript
Javascript实现单张图片浏览
2014/12/18 Javascript
node.js [superAgent] 请求使用示例
2015/03/13 Javascript
AngularJS中transclude用法详解
2016/11/03 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
2017/08/29 Javascript
node.js实现的装饰者模式示例
2017/09/06 Javascript
[05:42]DOTA2英雄梦之声_第10期_蝙蝠骑士
2014/06/21 DOTA
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
[00:14]PWL:老朋友Mushi拍VLOG与中国玩家问好
2020/11/04 DOTA
Python解析json文件相关知识学习
2016/03/01 Python
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
Python实现石头剪刀布游戏
2021/01/20 Python
教师岗位职责
2013/11/17 职场文书
注塑工厂厂长岗位职责
2013/12/02 职场文书
企业元宵节主持词
2014/03/25 职场文书
团支书竞选演讲稿
2014/04/28 职场文书
校园绿化美化方案
2014/06/08 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server