Vue中使⽤froala富⽂本编辑器制作打印模板
参考 知识开发的⼀个功能，制作⼀个打印模板的管理模块，如下(就是保存froala编辑后的html⽂本，其中包括Vue的Template，这样我们可以利⽤Vue的模板的优势来动态绑定⼀些数据源进⾏HTML的打印，基本上跟过去⽔晶报表做⼀个模板再绑定数据源的⽅法异曲同⼯)
在 main.js ⾥引⽤ froala 组件
// Import and use Vue Froala lib.
import VueFroala from 'vue-froala-wysiwyg'
// 引⼊ 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')
// 批量导⼊ froala-editor 插件⽂件
function importAll (r) {
r.keys().forEach(r)
}
t('froala-editor/js/plugins/', false, /\.js$/))
t('froala-editor/css/plugins/', false, /\.css$/))
Vue.use(VueFroala)
以上基本是引⽤了所有的插件，不然⼯具栏会有很多的按钮不出来
然后把 froala ⽂本编辑器封装成⼀个Vue组件，只暴露我们想要的功能
<template>
<div class="editor-wrap">
<froala
:
tag="'textarea'"
:config="config"
v-model="body.innerHTML"
/>
</div>
<script>
import FroalaEditor from 'froala-editor' export default {
props: {
// 显⽰的⼯具列表
placeholder: {
type: String
},
height: {
type: Number
},
value: {
type: String,
default: null
},
index: {
type: Number,
default: 1
},
buttons: {
type: Array,
default: () => [
'undo',
'redo',
'clearFormatting',
'bold',
'italic',
'underline',
'strikeThrough',
'fontFamily',
'fontSize',
'textColor',
'color',
'backgroundColor',
'inlineStyle',
'paragraphFormat',
'align',
'formatOL',
'formatUL',
'outdent',
'indent',
'quote',
// 'insertLink',
'insertImage',
// 'insertVideo',
// 'embedly',
// 'insertFile',
'insertTable',
// 'emoticons',
'specialCharacters',
'insertHR',
'selectAll',
'print',
'spellChecker',
'html',
'help',
'fullscreen',
'clear',
'save'
]
}
},
data () {
const that = this
uploadImage: {
loading: false,
previewVisible: false,
previewImage: '',
imgFile: {},
isSize: false,
isType: false
},
fileList: [],
body: {
innerHTML: this.value,
textLen: 0,
leftoverLen: 99999999999,
sumLen: 999999999,
error_tip: '',
error_show: false
},
config: {
codeBeautifierOptions: {
end_with_newline: true,
indent_inner_html: true,
extra_liners: "['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'pre', 'ul', 'ol', 'table', 'dl']",          brace_style: 'expand',
indent_char: ' ',
indent_size: 4,
wrap_line_length: 0
},
htmlAllowedAttrs: ['.*'],
toolbarButtons: this.buttons,
// theme: "dark", //主题
placeholderText: this.placeholder || '编辑⽂本',
language: 'zh_cn', // 国际化
imageUploadURL: '', // 上传url
imageUploadParams: { 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: true, // 关闭16进制⾊值
toolbarSticky: false, // 操作栏是否⾃动吸顶,
/
/ Colors list.
colorsBackground: [
'#15E67F',
'#E3DE8C',
'#D8A076',
'#D83762',
'#76B6D8',
'REMOVE',
'#1C7A90',
'#249CB8',
'#4ABED9',
'#FBD75B',
'#FBE571',
'#FFFFFF'
],
colorsStep: 6,
colorsText: [
'#15E67F',
'#E3DE8C',
'#D8A076',
'REMOVE',
'#1C7A90',
'#249CB8',
'#4ABED9',
'#FBD75B',
'#FBE571',
'#FFFFFF'
],
zIndex: 2501,
height: this.height || '250',
// autofocus: true,
events: {
initialized: function () {
that.editor = this
that.body.innerHTML = that.value
that.editorChange()
},
blur: () => {
that.$emit('blur')
},
contentChanged: () => {
that.editorChange()
},
'image.beforeUpload': function (images) {
/
/ ⾃定义上传图⽚
that.beforeUpload(images[0])
return false
},
'file.beforeUpload': function () {
// Image was uploaded to the server.
return true
},
'video.beforeUpload': function () {
// Image was uploaded to the server.
return true
}
}
}
}
},
watch: {
value: {
handler: function (news, old) {
this.body.innerHTML = news
},
deep: true
},
'body.innerHTML': function (newVal, old) {
if (old !== newVal) {
let val = SimpleText(this.(true))
this.editor.html.set(newVal)
}
},
label: function (newVal, old) {
if (old !== newVal) {
this.editor.html.set(newVal)
}
}
},
mounted () {
// ⾃定义按钮***********************************************************************    // 清理
FroalaEditor.DefineIcon('clear', {NAME: 'remove', SVG_KEY: 'remove'})
title: '清空',
focus: false,
undo: true,
refreshAfterCallback: true,
callback: function () {
this.html.set(null)
this.events.focus()
}
})
// 保存
FroalaEditor.DefineIconTemplate('material_design', '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="floppy-disk" class="svg-inline--fa fa-    FroalaEditor.DefineIcon('saveIcon', {NAME: 'save', template: 'material_design'})
FroalaEditor.RegisterCommand('save', {
title: '保存',
icon: 'saveIcon',
callback: () => {
this.$emit('save', this.body.innerHTML)
}
})
// **********************************************************************************
setTimeout(() => {
this.setIndex(this.index)
}, 200)
},
methods: {
saveHtml () {
this.$emit('save', this.body.innerHTML)
},
/
/ 更改富⽂本层级
setIndex (val) {
this.$nextTick(() => {
let dv = ElementsByClassName('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 = place(re1, '') // 执⾏替换成空字符
return msg
},
editorChange () {
if (this.editor == null) return
this.$emit('change', this.body.innerHTML)
},
beforeUpload (file) {
this.uploadImage.loading = true
const formData = new FormData()
formData.append('formFile', file)
// this.$store
//  .dispatch('UploadImg', formData)
//  .then(res => {
//    this.uploadImage.loading = false
//    if (de === 200) {网页模板编辑器
//      this.uploadImage.imgFile = JSON.parse(res.data)
//      const url = this.uploadImage.imgFile.data
/
/      // 插⼊图⽚
//      this.editor.html.insert(
//        '<img src=' + this.uploadImage.imgFile.data + '>', // HTML

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。