总是周知编辑器能让不懂变成语言的人也能写出一下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.$ = jQueryVue.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 -> /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: "/upload",//上传urlfileUploadURL: "/upload",//上传url 更多上传介绍 请访问/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>
