脚本宝典收集整理的这篇文章主要介绍了

一款基于vue好用的富文本编辑器Froala WYSIWYG Editor

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h1 id="articleHeader0">前言:</h1> <p>基于<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>使用过几款富文本编辑器:<br /><a href="https://github.com/wangfupeng1988/wangEditor" rel="nofollow noreferrer" target="_blank">wangEditor</a><br /><a href="https://github.com/surmon-china/vue-quill-editor" rel="nofollow noreferrer" target="_blank">vue-quill-editor</a><br /><a href="https://github.com/davidroyer/vue2-editor" rel="nofollow noreferrer" target="_blank">vue2-editor</a></p> <p>趟过坑,但是这几款总感觉不是那么适合项目需求,苦苦搜寻总算找到一款好用的富文本编辑器<a href="https://github.com/froala/wysiwyg-editor" rel="nofollow noreferrer" target="_blank">Froala WYSIWYG Editor</a></p> <hr> <h1 id="articleHeader1">支持特性:</h1> <p><span class="img-wrap"><img data-src="/img/bVbhIm7?w=2000&amp;h=1000" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>快速预览Demo:<br /><a href="https://www.froala.com/wysiwyg-editor" rel="nofollow noreferrer" target="_blank">Basic demo:</a><br /><a href="https://www.froala.com/wysiwyg-editor/inline" rel="nofollow noreferrer" target="_blank">Inline demo:</a><br /><a href="https://www.froala.com/wysiwyg-editor/examples" rel="nofollow noreferrer" target="_blank">Full list: </a></p> <hr> <h1 id="articleHeader2">使用</h1> <p>废话不多说,开始撸代码</p> <p><a href="https://github.com/froala/vue-froala-wysiwyg" rel="nofollow noreferrer" target="_blank">Vuejs v2.0+ -Froala WYSIWYG Editor</a></p> <h2 id="articleHeader3">安装</h2> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install vue-froala-wysiwyg --save" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword">install</span> vue-froala-wysiwyg <span class="hljs-comment">--save</span></code></pre> <h2 id="articleHeader4">引入</h2> <h3 id="articleHeader5">main.js</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// 引入 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')//此处可在index.html中引入:font-awesome cdn地址:<link href=&quot;https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css&quot; rel=&quot;stylesheet&quot;> require('froala-editor/css/froala_style.min.css')</p> <p>// Import and use Vue Froala lib.<br /> import VueFroala from 'vue-froala-wysiwyg'<br /> Vue.use(VueFroala)<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-comment">// 引入 Froala Editor js file.</span> <span class="hljs-built_in">require</span>(<span class="hljs-string">'froala-editor/js/froala_editor.pkgd.min'</span>) <span class="hljs-comment">//引入中文语言包</span> <span class="hljs-built_in">require</span>(<span class="hljs-string">'froala-editor/js/languages/zh_cn'</span>) <span class="hljs-comment">//引入 Froala Editor css files.</span> <span class="hljs-built_in">require</span>(<span class="hljs-string">'froala-editor/css/froala_editor.pkgd.min.css'</span>) <span class="hljs-built_in">require</span>(<span class="hljs-string">'font-awesome/css/font-awesome.css'</span>)<span class="hljs-comment">//此处可在index.html中引入:font-awesome cdn地址:&lt;link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"&gt;</span> <span class="hljs-built_in">require</span>(<span class="hljs-string">'froala-editor/css/froala_style.min.css'</span>) <span class="hljs-comment">// <a href="http://www.js-code.com/tag/import" title="浏览关于“Import”的文章" target="_blank" class="tag_link">Import</a> and use <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a> Froala lib.</span> <span class="hljs-keyword">import</span> VueFroala <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-froala-wysiwyg'</span> Vue.use(VueFroala) </code></pre> <h3 id="articleHeader6">app.vue</h3> <p>主要通过config来配置富文本编辑器,v-model来数据传递</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <div id=&quot;app&quot;> <froala :tag=&quot;'textarea'&quot; :config=&quot;froalaConfig&quot; v-model=&quot;froalaContent&quot;></froala> </div> <p></template></p> <p><script> import VueFroala from 'vue-froala-wysiwyg';</p> <p>export default { name: 'app', data () { return { //More -> https://www.froala.com/wysiwyg-editor/docs/options froalaConfig: { 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: &quot;dark&quot;,//主题 placeholder: &quot;请填写内容&quot;, language: &quot;zh_cn&quot;,//国际化 imageUploadURL: &quot;http://i.froala.com/upload&quot;,//上传url fileUploadURL: &quot;http://i.froala.com/upload&quot;,//上传url 更多上传介绍 请访问https://www.froala.com/wysiwyg-editor/docs/options quickInsertButtons: ['image', 'table', 'ul', 'ol', 'hr'],//快速插入项 // toolbarVisibleWithoutSelection: true,//是否开启 不选中模式 // disableRightClick: true,//是否屏蔽右击 colorsHEXInput: false,//关闭16进制色值 toolbarSticky: true,//操作栏是否自动吸顶 zIndex: 99999, events: { 'froalaEditor.initialized': function () { console.log('initialized') } }, }, froalaContent: &quot;</p> <p>www</p> <p>&quot;,//默认测试文本 } } } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs lua"><code>&lt;template&gt; &lt;<a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a> id=<span class="hljs-string">"app"</span>&gt; &lt;froala :tag=<span class="hljs-string">"'textarea'"</span> :<span class="hljs-built_in">config</span>=<span class="hljs-string">"froalaConfig"</span> v-model=<span class="hljs-string">"froalaContent"</span>&gt;&lt;/froala&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; import VueFroala from <span class="hljs-string">'vue-froala-wysiwyg'</span>; <a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a> default { name: <span class="hljs-string">'app'</span>, data () { <span class="hljs-keyword">return</span> { //More -&gt; https://www.froala.com/wysiwyg-editor/docs/options froalaConfig: { toolbarButtons: [<span class="hljs-string">'undo'</span>, <span class="hljs-string">'redo'</span>, <span class="hljs-string">'clearFormatting'</span>, <span class="hljs-string">'|'</span>, <span class="hljs-string">'bold'</span>, <span class="hljs-string">'italic'</span>, <span class="hljs-string">'underline'</span>,<span class="hljs-string">'strikeThrough'</span>,<span class="hljs-string">'|'</span>, <span class="hljs-string">'fontFamily'</span>, <span class="hljs-string">'fontSize'</span>, <span class="hljs-string">'color'</span>, <span class="hljs-string">'|'</span>,<span class="hljs-string">'paragraphFormat'</span>, <span class="hljs-string">'align'</span>, <span class="hljs-string">'formatOL'</span>, <span class="hljs-string">'formatUL'</span>, <span class="hljs-string">'outdent'</span>, <span class="hljs-string">'indent'</span>, <span class="hljs-string">'quote'</span>, <span class="hljs-string">'-'</span>, <span class="hljs-string">'insertLink'</span>, <span class="hljs-string">'insertImage'</span>, <span class="hljs-string">'insertVideo'</span>, <span class="hljs-string">'embedly'</span>, <span class="hljs-string">'insertFile'</span>, <span class="hljs-string">'insertTable'</span>, <span class="hljs-string">'|'</span>, <span class="hljs-string">'emoticons'</span>, <span class="hljs-string">'specialCharacters'</span>, <span class="hljs-string">'insertHR'</span>, <span class="hljs-string">'selectAll'</span>, <span class="hljs-string">'|'</span>, <span class="hljs-string">'print'</span>, <span class="hljs-string">'spellChecker'</span>, <span class="hljs-string">'help'</span>, <span class="hljs-string">'|'</span>, <span class="hljs-string">'fullscreen'</span>],//[<span class="hljs-string">'fullscreen'</span>, <span class="hljs-string">'bold'</span>, <span class="hljs-string">'italic'</span>, <span class="hljs-string">'underline'</span>, <span class="hljs-string">'strikeThrough'</span>, <span class="hljs-string">'subscript'</span>, <span class="hljs-string">'superscript'</span>, <span class="hljs-string">'|'</span>, <span class="hljs-string">'fontFamily'</span>, <span class="hljs-string">'fontSize'</span>, <span class="hljs-string">'color'</span>, <span class="hljs-string">'inlineStyle'</span>, <span class="hljs-string">'paragraphStyle'</span>, <span class="hljs-string">'|'</span>, <span class="hljs-string">'paragraphFormat'</span>, <span class="hljs-string">'align'</span>, <span class="hljs-string">'formatOL'</span>, <span class="hljs-string">'formatUL'</span>, <span class="hljs-string">'outdent'</span>, <span class="hljs-string">'indent'</span>, <span class="hljs-string">'quote'</span>, <span class="hljs-string">'-'</span>, <span class="hljs-string">'insertLink'</span>, <span class="hljs-string">'insertImage'</span>, <span class="hljs-string">'insertVideo'</span>, <span class="hljs-string">'embedly'</span>, <span class="hljs-string">'insertFile'</span>, <span class="hljs-string">'insertTable'</span>, <span class="hljs-string">'|'</span>, <span class="hljs-string">'emoticons'</span>, <span class="hljs-string">'specialCharacters'</span>, <span class="hljs-string">'insertHR'</span>, <span class="hljs-string">'selectAll'</span>, <span class="hljs-string">'clearFormatting'</span>, <span class="hljs-string">'|'</span>, <span class="hljs-string">'print'</span>, <span class="hljs-string">'spellChecker'</span>, <span class="hljs-string">'help'</span>, <span class="hljs-string">'html'</span>, <span class="hljs-string">'|'</span>, <span class="hljs-string">'undo'</span>, <span class="hljs-string">'redo'</span>],//显示可操作项 // theme: <span class="hljs-string">"dark"</span>,//主题 placeholder: <span class="hljs-string">"请填写内容"</span>, language: <span class="hljs-string">"zh_cn"</span>,//国际化 imageUploadURL: <span class="hljs-string">"http://i.froala.com/upload"</span>,//上传url fileUploadURL: <span class="hljs-string">"http://i.froala.com/upload"</span>,//上传url 更多上传介绍 请访问https://www.froala.com/wysiwyg-editor/docs/options quickInsertButtons: [<span class="hljs-string">'image'</span>, <span class="hljs-string">'table'</span>, <span class="hljs-string">'ul'</span>, <span class="hljs-string">'ol'</span>, <span class="hljs-string">'hr'</span>],//快速插入项 // toolbarVisibleWithoutSelection: <span class="hljs-literal">true</span>,//是否开启 不选中模式 // disableRightClick: <span class="hljs-literal">true</span>,//是否屏蔽右击 colorsHEXInput: <span class="hljs-literal">false</span>,//关闭<span class="hljs-number">16</span>进制色值 toolbarSticky: <span class="hljs-literal">true</span>,//操作栏是否自动吸顶 zIndex: <span class="hljs-number">99999</span>, events: { <span class="hljs-string">'froalaEditor.initialized'</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span></span> { console.<span class="hljs-built_in">log</span>(<span class="hljs-string">'initialized'</span>) } }, }, froalaContent: <span class="hljs-string">"&lt;p&gt;www&lt;/p&gt;"</span>,//默认测试文本 } } } &lt;/script&gt;</code></pre> <h3 id="articleHeader7">Webpack settings</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var webpack = require('webpack') var path = require('path') module.exports = { module: { loaders: [ // ... // Css loader. //css装载器 { test: /.css$/, loader: 'vue-style-loader!css-loader' }, // Font awesome loader. //如果引入Font awesome 需要这块设置 { test: /.(woff2?|eot|ttf|otf)(?.*)?$/, loader: 'url', query: { limit: 10000, name: path.posix.join('path/to/yours/assets/directory', 'fonts/[name].[hash:7].[ext]') } } ] }, vue: { loaders: { // ... // Css loader for Webpack 1.x . css: 'vue-style-loader!css-loader' } }, plugins: [ // ... // Jquery loader plugin. 这块挺重要 new webpack.ProvidePlugin({ $: &quot;jquery&quot;, jQuery: &quot;jquery&quot; }) ] }) " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">var</span> webpack = <span class="hljs-built_in">require</span>(<span class="hljs-string">'webpack'</span>) <span class="hljs-keyword">var</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">'path'</span>) <span class="hljs-built_in">module</span>.exports = { <span class="hljs-keyword">module</span>: { loaders: [ <span class="hljs-comment">// ...</span> <span class="hljs-comment">// Css loader. //css装载器</span> { test: <span class="hljs-regexp">/.css$/</span>, loader: <span class="hljs-string">'vue-style-loader!css-loader'</span> }, <span class="hljs-comment">// Font awesome loader. //如果引入Font awesome 需要这块设置</span> { test: <span class="hljs-regexp">/.(woff2?|eot|ttf|otf)(?.*)?$/</span>, loader: <span class="hljs-string">'url'</span>, query: { limit: <span class="hljs-number">10000</span>, name: path.posix.join(<span class="hljs-string">'path/to/yours/assets/directory'</span>, <span class="hljs-string">'fonts/[name].[hash:7].[ext]'</span>) } } ] }, vue: { loaders: { <span class="hljs-comment">// ...</span> <span class="hljs-comment">// Css loader for Webpack 1.x .</span> css: <span class="hljs-string">'vue-style-loader!css-loader'</span> } }, plugins: [ <span class="hljs-comment">// ...</span> <span class="hljs-comment">// Jquery loader plugin. 这块挺重要</span> <span class="hljs-keyword">new</span> webpack.ProvidePlugin({ $: <span class="hljs-string">"jquery"</span>, <a href="http://www.js-code.com/tag/jquery" title="浏览关于“jQuery”的文章" target="_blank" class="tag_link">jQuery</a>: <span class="hljs-string">"jquery"</span> }) ] }) </code></pre> <h2 id="articleHeader8">预览</h2> <p><span class="img-wrap"><img data-src="/img/bVbhInC?w=1152&amp;h=656" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span><br /><span class="img-wrap"><img data-src="/img/bVbhInD?w=1060&amp;h=712" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span><br /><span class="img-wrap"><img data-src="/img/bVbhInE?w=1960&amp;h=810" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <h1 id="articleHeader9">校长红包福利</h1> <p><span class="img-wrap"><img data-src="/img/bVbkJpJ?w=1079&amp;h=549" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

一款基于vue好用的富文本编辑器Froala WYSIWYG Editor

全部内容,希望文章能够帮你解决

一款基于vue好用的富文本编辑器Froala WYSIWYG Editor

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过