Vue引入Froala-Editor富文本编辑器

总是周知编辑器能让不懂变成语言的人也能写出一下html的基本标签，但坏处也非常明显，第一编辑器所编辑出的内容是无法自适应的，第二编辑器的内容无法调节响应式但Froala却有一个不错的点，那就是他的图片可以设置百分比单位，可以在一定程度上达到自适应效果
那么我们就一起来看看怎么安装把
引入对于版本的vue-froala-wysiwy

npm install vue-froala-wysiwyg@2.9.0  --save

然后引入jquery 很多人不喜欢jquery，但这个没办法，Froala对jquery是有依赖的

npm install jquery --save

然后引入babel-runtime和core-js

 npm install core-js --save

 npm install babel-runtime --save

在main.js引入依赖

//引入 Froala Editor js file.
require('froala-editor/js/froala_editor.pkgd.min')
//引入中文语言包
require('froala-editor/js/languages/zh_cn')
//引入 Froala Editor css files.
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 and use Vue Froala lib.
import jQuery from 'jquery'
import VueFroala from 'vue-froala-wysiwyg'
window.$ = jQuery
Vue.use(VueFroala)

最好我们创建一个编辑器组件

<template><div id="app"><froala :tag="'textarea'" :config="froalaConfig" v-model="froalaContent"></froala></div>
</template>
<script>
import jQuery from 'jquery'
import VueFroala from 'vue-froala-wysiwyg'
export default {name: 'app',data () {return {//More -> https://www.froala.com/wysiwyg-editor/docs/optionsfroalaConfig: {toolbarButtons: ['undo', 'redo', 'clearFormatting', '|', 'bold', 'italic', 'underline','strikeThrough','|', 'fontFamily', 'fontSize', 'color', '|','paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', '-', 'insertLink', 'insertImage', 'insertVideo', 'embedly', 'insertFile', 'insertTable', '|', 'emoticons', 'specialCharacters', 'insertHR', 'selectAll', '|', 'print', 'spellChecker', 'help', '|', 'fullscreen'],//['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '|', 'fontFamily', 'fontSize', 'color', 'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', '-', 'insertLink', 'insertImage', 'insertVideo', 'embedly', 'insertFile', 'insertTable', '|', 'emoticons', 'specialCharacters', 'insertHR', 'selectAll', 'clearFormatting', '|', 'print', 'spellChecker', 'help', 'html', '|', 'undo', 'redo'],//显示可操作项// theme: "dark",//主题placeholder: "请填写内容",language: "zh_cn",//国际化imageUploadURL: "http://i.froala.com/upload",//上传urlfileUploadURL: "http://i.froala.com/upload",//上传url 更多上传介绍 请访问https://www.froala.com/wysiwyg-editor/docs/optionsquickInsertButtons: ['image', 'table', 'ul', 'ol', 'hr'],//快速插入项// toolbarVisibleWithoutSelection: true,//是否开启 不选中模式// disableRightClick: true,//是否屏蔽右击colorsHEXInput: false,//关闭16进制色值toolbarSticky: true,//操作栏是否自动吸顶zIndex: 99999,events: {'froalaEditor.initialized': function () {console.log(jQuery)console.log(VueFroala)}},},froalaContent: "<p>www</p>",//默认测试文本}}
}
</script>

Vue引入Froala-Editor富文本编辑器相关推荐

froala editor富文本编辑器出现验证失败的解决方法
froala editor富文本编辑器出现验证失败的解决方法出现这种情况,首先要下载源码包地址 https://www.froala.com/wysiwyg-editor 之后引用本地的 froal ...
小程序editor 富文本编辑器组件
效果: 关于editor 富文本编辑器组件复制到组件common 里面.json 引用即可链接:https://pan.baidu.com/s/1_QIp28IOVuyVFfKfFZwxKQ 提取 ...
小程序的四次元口袋：editor富文本编辑器的使用、渲染，以及rich-text进行解析
editor富文本 1.介绍富文本编辑器,可以对图片.文字进行编辑.极大地丰富了我们文章的结构样式,之前小程序还没有自己开发富文本插件,而在2019年微信小程序正式发布了富文本api. 支持的类型 ...
php引入百度Ueditor富文本编辑器
php引入百度Ueditor富文本编辑器文本编辑器插件内容丰富,比起传统的textarea标签输入要好用很多,看看如何在页面实现引入吧 1.下载适合的资源包(可以去官网下载适合的版本),我是php引 ...
vue中引入TinyMCE实现富文本编辑器
整片文章是以vue2.X 引入tinymce富文本编译器首先,先确认你的vue版本是 2 还是 3 ,查看项目的package.json中vue的版本,我的是2.5.2 一共两个步骤 vue工程中安 ...
Vue中使用vue-quil-editor富文本编辑器+el-upload实现带图片上传到SpringBoot后台接口
场景系统中经常会用到富文本编辑器,比如新增通知和公告功能,并且需要添加上传图片. vue-quill-editor官网: https://www.npmjs.com/package/vue-quil ...
ueditor html中使用方法,vue集成百度UEditor富文本编辑器使用教程
在前端开发的项目中,难免会遇到需要在页面上集成一个富文本编辑器.那么,如果你有这个需求,希望可以帮助到你. vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于 ...
基于 Vue 的移动端富文本编辑器 vue-quill-editor 实战
优秀的富文本编辑器有很多,比如:UEditor,wangEditor 等,但并不是每个都能在移动端有很好的表现. 我们暂且不讨论移动端是否真的需要富文本,既然有这需求,就把它实现出来. 失败的尝试正 ...
vue中使用wangeditor富文本编辑器（含图片上传和回显）
最近在写vue的项目中,遇到一个需求,点击编辑,显示弹框,在弹框中的富文本编辑器中编辑自定义文本样式,可以上传图片并回显.编辑完成确定后显示在页面上. 首先先写一个editor.vue的页面.(建议单 ...
vue中使用element-tiptap富文本编辑器
element-tiptap富文本编辑器 npm安装 npm install element-tiptap --save yarn安装 yarn add element-tiptap 全局引入 imp ...

Vue引入Froala-Editor富文本编辑器

Vue引入Froala-Editor富文本编辑器相关推荐

最新文章

热门文章