froala 的使用

在Vue中使用Froala：

引入

 // Require Froala Editor js file.require('froala-editor/js/froala_editor.pkgd.min')// Require 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 VueFroala from 'vue-froala-wysiwyg'Vue.use(VueFroala)`

使用 – 基本项的配置例子

 <froala :tag="'textarea'" :config="config" v-model="model"></froala>

config: { // 编辑器的初始化信息imageUploadURL: 'http://upload.qiniu.com/',fileUploadURL: 'http://upload.qiniu.com/',videoUploadURL: 'http://upload.qiniu.com/',height: 360,language: 'zh_cn',toolbarButtons: ['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '|','fontFamily', 'fontSize', 'color', 'inlineStyle', 'paragraphStyle', '|','paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', '-','insertLink', 'insertImage', 'insertTable', '|', 'emoticons','specialCharacters', 'insertHR', 'selectAll', 'clearFormatting', '|', 'print', 'spellChecker','help', 'html', '|', 'undo', 'redo', 'myButton', 'toolsButton', 'insertAudio', 'wirisEditor', 'wirisChemistry'],events: {'froalaEditor.image.beforeUpload': function (e, editor, images) {var bucketType = 4 // 项目参数self.froalaAjax(bucketType, 'img')},'froalaEditor.file.beforeUpload': function (e, editor, files) {let bucketType = self._fileType.TYPE_AUDIO // 项目参数self.froalaAjax(bucketType, 'aodio')},'froalaEditor.initialized': function (e, editor) {self.editor = editor // 获取实例self.editor.addOption = self.addOption // 插件回调 调用vue自身方法}}}model: 'Edit Your Content Here!'

froalaAjax (bucketType, type) {var url = this.$url.options.rooturl = url + '\\' + this._url.file.getTokenlet request = new XMLHttpRequest()request.open('POST', url + '?bucketType=' + bucketType, false)request.setRequestHeader('Accept', 'application/json')request.setRequestHeader('Content-Type', 'application/json')request.send()if (request.status === 200) {if (type === 'img') {this.editor.opts.imageUploadParams.token = JSON.parse(request.response).uptoken} else if (type === 'aodio') {this.editor.opts.fileUploadParams.token = JSON.parse(request.response).uptoken}}}

修改插件例子
-

 (function ($) {// Add an option for your plugin.$.FroalaEditor.DEFAULTS = $.extend($.FroalaEditor.DEFAULTS, {myOption: false});$.FroalaEditor.DefineIcon("buttonIcon", {ALT: 'Image button', template: 'image',SRC: "/static/froala-editor/img/button.png"})$.FroalaEditor.RegisterCommand('myButton', {// Button title.title: '················',// Specify the icon for the button.// If this option is not specified, the button name will be used.icon: 'buttonIcon',// Save the button action into undo stack.undo: true,// Focus inside the editor before the callback.focus: true,// Show the button on mobile or not.showOnMobile: true,// Refresh the buttons state after the callback.refreshAfterCallback: true,// Called when the button is hit.callback: function (edit,edit2) {var html = this.html.get();var i = 0;for(i=1;i <= 10;i++){if($(html).find(':input[value="'+i+'"]').length==0){this.html.insert("<input class=\'filling-space\' readonly=\'readonly\' value=\'"+i+"\'>", false);break ;}}if(i>10){(new window.Vue()).$message({message: "空的个数最多10个", type: 'warning'})}elsethis.addOption();},// Called when the button state might have changed.refresh: function ($btn) {// The current context is the editor instance.console.log (this.selection.element());}})// Define the plugin.// The editor parameter is the current instance.$.FroalaEditor.PLUGINS.myPlugin = function (editor) {// Private variable visible only inside the plugin scope.var private_var = 'My awesome plugin';// Private method that is visible only inside plugin scope.function _privateMethod () {console.log (private_var);}// Public method that is visible in the instance scope.function publicMethod () {console.log (_privateMethod());}// The start point for your plugin.function _init () {// You can access any option from documentation or your custom options.console.log (editor.opts.myOption)// Call any method from documentation.// editor.methodName(params);// You can listen to any event from documentation.// editor.events.add('contentChanged', function (params) {});}// Expose public methods. If _init is not public then the plugin won't be initialized.// Public method can be accessed through the editor API:// $('.selector').froalaEditor('myPlugin.publicMethod');return {_init: _init,publicMethod: publicMethod}}
})(jQuery);

当然，这种适用法并不是万能的，例如，你需要使用数学公式时，这种引用方法就会有问题。则可以在index.html中引入：

<!-- Include Editor style. --><link href="static/froala-editor/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" /><link href="static/froala-editor/css/froala_style.min.css" rel="stylesheet" type="text/css" />
<!-- Include external JS libs. --><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include Editor JS files. --><script type="text/javascript" src="static/froala-editor/js/froala_editor.pkgd.min.js"></script><script src="static/froala-editor/js/languages/zh_cn.js"></script></script>

用jquery来操作：

<script>// 初始化function  initEditor(select, config, callback){// eslint-disable-next-line no-undef$(select).on('froalaEditor.initialized', function (e, editor) {if (callback) {callback(e, editor) // 回调}}).froalaEditor(config)}// 销毁function destroy (select) {$(select).froalaEditor('destroy')}// 修改编辑内容function updateVal (select, txt, i) {if (i === undefined) {$(select).froalaEditor('html.set', txt)} else {$(select).eq(i).froalaEditor('html.set', txt)}}// 获取编辑内容function valueEditor (select, i) {return $(select).eq(i).froalaEditor('html.get')}</script>

 <div id="editor-main"> </div>window.initEditor('#editor-main', this.config)

froala 的使用相关推荐

所见即所得html5编辑器,一个漂亮的所见即所得(WYSIWYG)富文本编辑器:Froala
本文翻译来自wysiwyg-editor,大家想看原文可以点击此链接. 介绍 WYSIWYG HTML编辑器是一款有史以来最强大的JavaScript富文本编辑器之一.它采用了最新的技术,并利用jQu ...
Froala富文本编辑器
Froala富文本编辑器 https://www.froala.com/wysiwyg-editor
JavaScript 所见所得文本编辑器 Froala Editor 4.0.17Crack
Froala Editor v4.0.17 清除格式工具现在可以从粘贴的内容中删除内联样式. 2023 年 1 月 24 日 - 9:07新版本特征清除格式工具现在可以从粘贴的内容中删除内联样式. ...
完美Crack：Froala Editor 4.0.16 Patch
基于 Web 的 JavaScript/HTML WYSIWYG 文本编辑器. Froala Editor 是一个用 JavaScript 编写的轻量级 WYSIWYG HTML 编辑器,可为您的应用 ...
Froala Editor JavaScript WYSIWYG HTML 编辑器
Froala Editor JavaScript WYSIWYG HTML 多用途.易于使用的 WYSIWYG 编辑器,优雅每次点击,我们都会让网络编辑变得更简单.更强大.更愉快安全.快速.智能和 ...
froala WYSIWYG Editor 利用代码实现在线破解，去掉授权提示，去掉保存代码有版权超链接
froala WYSIWYG Editor是一款非常好用的编辑器,虽然破解了可以用但是得把文件放到本地,用cdn就没办法使用了. 经过我研究终于破解了用cdn的使用方法: new FroalaEdi ...
Froala V4.0.18 Crack Froala 编辑器
Froala V4.0.18:复制和粘贴图像变得更好,还有更多! 2023 年 3 月 25 日最忠实用户编辑器,新版本发表评论 Froala Editor团队很高兴地宣布发布Froala Ed ...
Froala Editor 插入的表格页面展示问题样式消失
在froala编辑器里显示表格样式如下: 但是获取的html,拿出来显示样式却丢了处理方法: 在显示界面引入 froala_style.min.css文件绘制html的区域的容器引用 fr ...
froala editor富文本编辑器出现验证失败的解决方法
froala editor富文本编辑器出现验证失败的解决方法出现这种情况,首先要下载源码包地址 https://www.froala.com/wysiwyg-editor 之后引用本地的 froal ...
Froala Editor内容中删除内联样式
Froala Editor内容中删除内联样式易于集成-编辑器可以在任何时间内集成到任何类型的项目中.它只需要基本的JavaScript和HTML编码知识. 流行-HTML编辑器在开发人员中很流行,它 ...

froala 的使用

froala 的使用相关推荐

最新文章

热门文章