vue-froala-wysiwyg富文本编辑器

这个富文本编辑器，感觉收费麻烦我后续又更新了一个braft_editor富文本编辑器

安装

npm i vue-froala-wysiwyg -S;
如果出现 Cannot find module '@babel/runtime/core-js/object/keys'
执行下面这个
npm install --save-dev @babel/runtime-corejs2

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-editor.vue

<!--
label:用于给富文本赋予默认值,清空值label=" ",必须加空格,负责不会清空
v-model:单向绑定，由于富文本监听问题，不能用v-model赋予默认值-->
<template><div class="editor-wrap"><froalaid="froala-editor":tag="'textarea'":config="froalaConfig"v-model="body"></froala></div>
</template>
<script>
export default {props: {// 显示的工具列表tool:{type:Array,default:['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']},placeholder: {type: String//   required: true},height: {type: Number},value: {type: String,default: null},label: {type: String,default: ''},index: {type: Number,default: 1}},name: 'froala-editor',data() {var that = thisreturn {editor: null,body: null,froalaConfig: {toolbarButtons: this.tool,// theme: "dark",//主题placeholderText: this.placeholder || '请在此输入',language: 'zh_cn', //国际化imageUploadURL: '', //上传urlimageUploadParams: { token: '', i: '', ak: '', f: 9 },fileUploadURL: '',fileUploadParams: { token: '', i: '', ak: '', f: 9 },videoUploadURL: '',videoUploadParams: { token: '', i: '', ak: '', f: 9 },quickInsertButtons: ['image', 'table', 'ul', 'ol', 'hr'], //快速插入项// toolbarVisibleWithoutSelection: true,//是否开启 不选中模式// disableRightClick: true,//是否屏蔽右击colorsHEXInput: false, //关闭16进制色值toolbarSticky: false, //操作栏是否自动吸顶,zIndex: 2501,height: this.height || '400',// autofocus: true,events: {initialized: function() {// console.log("initialized1111");// this.editor = editor;// console.log(editor.opts.imageUploadParams);that.editor = this// console.log("initial");// that.editor.html.set(that.value);that.body = that.value// that.setHtml()},blur: () => {// console.log("blur....");this.$emit('blur')},'image.beforeUpload': function() {// Image was uploaded to the server.// var i = generateUUID()// this.opts.imageUploadParams.token = getToken()// this.opts.imageUploadParams.i = i// this.opts.imageUploadParams.ak = md5(COMM_API_KEY + i)return true},'file.beforeUpload': function() {// Image was uploaded to the server.// var i = generateUUID()// this.opts.fileUploadParams.token = getToken()// this.opts.fileUploadParams.i = i// this.opts.fileUploadParams.ak = md5(COMM_API_KEY + i)return true},'video.beforeUpload': function() {// Image was uploaded to the server.// var i = generateUUID()// this.opts.videoUploadParams.token = getToken()// this.opts.videoUploadParams.i = i// this.opts.videoUploadParams.ak = md5(COMM_API_KEY + i)return true},contentChanged: () => {}}}}},watch: {body: function(newVal, old) {if (old !== newVal) {let val = this.getSimpleText(this.editor.html.get(true))this.$emit('input', val)}},label: function(newVal, old) {if (old !== newVal) {this.editor.html.set(newVal)}}},mounted() {setTimeout(() => {this.setIndex(this.index)}, 200)},methods: {//更改富文本层级setIndex(val) {this.$nextTick(() => {let dv = document.getElementsByClassName('fr-box')for (let i in dv) {if (!dv[i].style) {return}dv[i].style.cssText = 'z-index:' + val}})},//富文本中提取纯文本getSimpleText: (html) => {var re1 = new RegExp('<p data-f-id="pbf".+?</p>', 'g') //匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容var msg = html.replace(re1, '') //执行替换成空字符return msg},//重置富文本resetValue(val) {this.body = val || ''}}
}
</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>

运用组件

<template>
<froalaEditor :label="editorContentLaebl" v-model="basicForm.editorContent"></froalaEditor>
</template>
<script>
import froalaEditor from '../../components/common/froala-editor.vue'
export default {components: { froalaEditor },data() {return {editorContentLaebl:"",basicForm:{editorContent：""}}}
}

这款富文本编辑器需要解决一个bug
在node-modules下面找到这个文件夹替换s文件夹下面两个js文件,文件代码太多，不方便发布在博客上，把文件放在腾讯微云上方便下载
文件腾讯微云链接：https://share.weiyun.com/5aqW8Wj

vue-froala-wysiwyg富文本编辑器相关推荐

vue 是否有word编辑控件_GitHub - C84882428/editor-ui: vue集成 tinymce 富文本编辑器,增加导入 word 模板...
editor-ui vue 集成 tinymce 富文本编辑器自定义 tinymce 富文本编辑器, 在原来的编辑器中增加上传 word 模板最终展示效果: 主要代码: 整体思路: 1,在编辑器原 ...
vue使用百度富文本编辑器（ueditor）
文章目录 vue使用百度富文本编辑器(ueditor) 1.进入官网或者github下载源码 2.使用grunt编译 4.安装`vue-ueditor-wrap` 5.组件中引入,自定义组件 6.后端 ...
froala editor富文本编辑器出现验证失败的解决方法
froala editor富文本编辑器出现验证失败的解决方法出现这种情况,首先要下载源码包地址 https://www.froala.com/wysiwyg-editor 之后引用本地的 froal ...
所见即所得html5编辑器,一个漂亮的所见即所得(WYSIWYG)富文本编辑器:Froala
本文翻译来自wysiwyg-editor,大家想看原文可以点击此链接. 介绍 WYSIWYG HTML编辑器是一款有史以来最强大的JavaScript富文本编辑器之一.它采用了最新的技术,并利用jQu ...
vue移动端富文本编辑器vue-html5-editor
简介 Intro Vue-html5-editor是一个Vue的富文本编辑器插件,简洁灵活可扩展,适用于vue2.0以上版本,支持IE11. Vue-html5-editor is an html5 ...
wangeditor html编辑,Vue整合wangEditor富文本编辑器
最近在做项目时,客户有个发布新闻动态的功能,具体页面内容让客户自己编写,所以要选择富文本编辑器,这样用户体验好一点.网上有很多的富文本编辑器, 因为项目的功能并不是很复杂,所以选择了wangEdito ...
VUE+tinymce（富文本编辑器）
效果图: VUE项目引入tinymce 1.tinymce安装以及下载 npm install @tinymce/tinymce-vue -save npm install tinymce -save ...
vue使用ckeditor4富文本编辑器配置
使用场景: 本来最开始使用的是quill富文本编辑器,但是由于功能和项目得实际需求并不是怎么适合,因为我需要在Word文档里面把一些内容进行粘贴复制进去(复制的是图文),当出现这种场景的话quill就 ...
vue使用WangEditor富文本编辑器(批量上传图片到服务器)
最近要写一个官网,但是这个官网要写成活的可配置的项目,于是要先写一后台管理系统,用来配置官网的菜单和页面,配置菜单自然是vue+ElementUI表格表单的增删改查,但是配置页面就要有排版.样式等等, ...
Vue中引入富文本编辑器
这里使用的是 vue-quill-editor 富文本组件先安装一下: npm i vue-quill-editor -s 下载之后去components文件夹中新建一个文件夹 KEditor,然 ...

vue-froala-wysiwyg富文本编辑器

vue-froala-wysiwyg富文本编辑器相关推荐

最新文章

热门文章