Vue 使用 fraola——vue-froala-wysiwyg

vue-froala-wysiwyg

froala官网
安装

npm install vue-froala-wysiwyg --save

在main.js全局配置

import 'froala-editor/css/froala_editor.pkgd.min.css'
import 'froala-editor/css/froala_style.min.css'
import 'froala-editor/js/froala_editor.pkgd.min.js'
import 'froala-editor/js/languages/zh_cn.js'
import 'froala-editor/js/plugins.pkgd.min.js'
import VueFroala from 'vue-froala-wysiwyg'Vue.use(VueFroala)

froala.vue

<template><div id="app"><froala id="edit":tag="'textarea'":config="froalaConfig"v-model="froalaData"></froala></div>
</template><script>
export default {name: 'froala',data() {return {froalaData: '',froalaConfig: {//自定义工具栏// toolbarButtons: [//   'undo',//   'redo',//   'clearFormatting',//   'bold',//   'italic',//   'underline',//   'strikeThrough',//   'fontFamily',//   'fontSize',//   'color',//   'inlineStyle',//   'paragraphFormat',//   'align',//   'formatOL',//   'formatUL',//   'outdent',//   'indent',//   'quote',//   'insertLink',//   'insertImage',//   'insertVideo',//   'embedly',//   'insertFile',//   'insertTable',//   'emoticons',//   'specialCharacters',//   'insertHR',//   'selectAll',//   'print',//   'spellChecker',//   'html',//   'help',//   'fullscreen',// ],// theme: "dark",//主题placeholderText: '请在此输入',language: 'zh_cn', //语言imageUploadURL: 'http://i.froala.com/upload', //上传urlimageUploadParams: { token: '', i: '', ak: '', f: 9 },fileUploadURL: 'http://i.froala.com/upload',fileUploadParams: { token: '', i: '', ak: '', f: 9 },videoUploadURL: 'http://i.froala.com/upload',videoUploadParams: { token: '', i: '', ak: '', f: 9 },quickInsertButtons: ['image', 'video', 'table', 'ul', 'ol', 'hr'], //快速插入项// toolbarVisibleWithoutSelection: true,//是否开启 不选中模式// disableRightClick: true,//是否屏蔽右击colorsHEXInput: true, //关闭16进制色值toolbarSticky: false, //操作栏是否自动吸顶,zIndex: 2501,height: '400',// autofocus: true,events: {initialized: function () {console.log(1)},blur: () => {console.log(123)},'image.beforeUpload': function (images) {console.log(images)return true},'file.beforeUpload': function () {console.log(this.froalaData)return true},'video.beforeUpload': function () {console.log(this.froalaData)return true},contentChanged: () => {},},},}},methods: {},
}
</script>
<style>
.editor-wrap {width: 900px;
}
.editor-wrap > div {width: 100%;
}
.fr-wrapper > div[style*='z-index:9999;'],
.fr-wrapper > div[style*='z-index: 9999;'] {height: 0;overflow: hidden;
}
.fr-box .second-toolbar #logo {width: 0 !important;height: 0 !important;overflow: hidden;
}
.fr-box .fr-toolbar {border-radius: 4px 4px 0 0;border-color: #dcdfe6;
}
.fr-box .second-toolbar {border-radius: 0 0 4px 4px;border-color: #dcdfe6;
}
.fr-box .fr-wrapper {border-color: #dcdfe6 !important;
}
</style>

效果图
默认工具栏

自定义工具栏

Vue 使用 fraola——vue-froala-wysiwyg相关推荐

html用vue传递数据,Vue组件及数据传递详解
本文我们就和大家详细介绍一下Vue系列(三):组件及数据传递.路由.单文件组件.vue-cli脚手架,希望能帮助到大家. 一. 组件component 1. 什么是组件?组件(Component)是 ...
Vue：利用Vue生成的网页，在浏览器中的标签页中的图标与标题怎么修改为自己的？
Vue:利用Vue生成的网页,在浏览器中的标签页中的图标与标题怎么修改为自己的? 在解决这个问题的时候,在网上搜到了许多答案,可以说是众说纷纭,作者结合了多个答案,最后解决了这个问题,下面把用到的资源 ...
vue filter对象_学习vue源码（3）手写Vue.directive、Vue.filter、Vue.component方法
一.Vue.directive Vue.directive(id,[definition]); 1)参数 { string } id{ Function | Object } [ definition ...
vue教程2-03 vue计算属性的使用 computed
vue教程2-03 vue计算属性的使用 computed computed:{b:function(){ //默认调用getreturn 值}}--------------------------c ...
go html vue,用Go+Vue.js快速搭建一个Web应用(初级demo)
Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文给大家介绍用Go+Vue.js快速搭建一个Web应用(初级demo). 环境准备: 1. 安装go语言,配置go开 ...
Vue.js(一) Vue.js + element-ui 扫盲
Vue.js(一) Vue.js + element-ui 扫盲 2018年12月09日 20:32:59 vbirdbest 阅读数 7043更多分类专栏: Vue.js + ElementUI ...
Vue.js 从 Vue 1.x 迁移
从 Vue 1.x 迁移 FAQ 哇,非常长的一页!是否意味着 Vue 2.0 已经完全不同了呢,是否需要从头学起呢,Vue 1.0 的项目是不是没法迁移了? 非常开心地告诉你,并不是!几乎 90% ...
在Centos 7 上跑 vue 项目以及 Vue 热更新失效
安装npm yum install npm 安装vue npm install vue 安装vue-cli sudo npm install --global vue-cli 注意: 因为全局安装,会 ...
vue脚手架搭建配置试调地址和端口号_全栈的自我修养: 002使用@vue/cli进行vue环境搭建 (使用Vue,SpringBoot,Flask完成前后端分离)...
全栈的自我修养: 使用@vue/cli进行vue.js环境搭建 Success, real success, is being willing to do the things that other ...
解决vue: 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称...
我是用yarn安装的vue脚手架(yarn global add @vue/cli),yarn提示安装成功后,运行了下vue --version,结果报错. vue : 无法将"vue&qu ...

Vue 使用 fraola——vue-froala-wysiwyg

vue-froala-wysiwyg

Vue 使用 fraola——vue-froala-wysiwyg相关推荐

最新文章

热门文章