forked from github/dataease
refactor(仪表板): 富文本组件和富文本视图支持自适应缩放
This commit is contained in:
wangjiahao
parent
e96fd41768
commit
5510b1d732
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="rich-main-class" @dblclick="setEdit">
|
||||
<div class="rich-main-class" :style="autoStyle" @dblclick="setEdit">
|
||||
<Editor
|
||||
v-if="editShow"
|
||||
:id="tinymceId"
|
||||
@ -39,6 +39,10 @@ export default {
|
||||
Editor
|
||||
},
|
||||
props: {
|
||||
terminal: {
|
||||
type: String,
|
||||
default: 'pc'
|
||||
},
|
||||
propValue: {
|
||||
type: String,
|
||||
require: true
|
||||
@ -93,11 +97,31 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
scale(){
|
||||
return Math.min(this.previewCanvasScale.scalePointWidth, this.previewCanvasScale.scalePointHeight) * this.scaleCoefficient
|
||||
},
|
||||
editStatus() {
|
||||
return this.editMode === 'edit' && !this.mobileLayoutStatus
|
||||
},
|
||||
autoStyle() {
|
||||
return {
|
||||
height: (100 / this.scale) + '%!important',
|
||||
width: (100 / this.scale) + '%!important',
|
||||
left: 50 * (1 - 1 / this.scale) + '%', //放大余量 除以 2
|
||||
top: 50 * (1 - 1 / this.scale) + '%',
|
||||
transform: 'scale(' + this.scale + ')'
|
||||
}
|
||||
},
|
||||
scaleCoefficient() {
|
||||
if (this.terminal === 'pc' && !this.mobileLayoutStatus) {
|
||||
return 1.1
|
||||
} else {
|
||||
return 4.5
|
||||
}
|
||||
},
|
||||
...mapState([
|
||||
'mobileLayoutStatus'
|
||||
'mobileLayoutStatus',
|
||||
'previewCanvasScale'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
@ -146,6 +170,7 @@ export default {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto!important;
|
||||
position: relative;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 0px!important;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="rich-main-class" @dblclick="setEdit">
|
||||
<div class="rich-main-class" :style="autoStyle" @dblclick="setEdit">
|
||||
<Editor
|
||||
v-if="editShow"
|
||||
:id="tinymceId"
|
||||
@ -41,6 +41,11 @@ export default {
|
||||
Editor
|
||||
},
|
||||
props: {
|
||||
scale: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 1
|
||||
},
|
||||
element: {
|
||||
type: Object
|
||||
},
|
||||
@ -85,9 +90,9 @@ export default {
|
||||
plugins: 'advlist autolink link image lists charmap media wordcount table contextmenu directionality pagebreak', // 插件
|
||||
// 工具栏
|
||||
toolbar: 'undo redo |fontselect fontsizeselect |forecolor backcolor bold italic |underline strikethrough link| formatselect |' +
|
||||
'alignleft aligncenter alignright | bullist numlist |' +
|
||||
' blockquote subscript superscript removeformat | table image media | fullscreen ' +
|
||||
'| bdmap indent2em lineheight formatpainter axupimgs',
|
||||
'alignleft aligncenter alignright | bullist numlist |' +
|
||||
' blockquote subscript superscript removeformat | table image media | fullscreen ' +
|
||||
'| bdmap indent2em lineheight formatpainter axupimgs',
|
||||
toolbar_location: '/',
|
||||
font_formats: '微软雅黑=Microsoft YaHei;宋体=SimSun;黑体=SimHei;仿宋=FangSong;华文黑体=STHeiti;华文楷体=STKaiti;华文宋体=STSong;华文仿宋=STFangsong;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings',
|
||||
fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px', // 字体大小
|
||||
@ -102,6 +107,15 @@ export default {
|
||||
editStatus() {
|
||||
return this.editMode === 'edit' && !this.mobileLayoutStatus
|
||||
},
|
||||
autoStyle() {
|
||||
return {
|
||||
height: (100 / this.scale) + '%!important',
|
||||
width: (100 / this.scale) + '%!important',
|
||||
left: 50 * (1 - 1 / this.scale) + '%', //放大余量 除以 2
|
||||
top: 50 * (1 - 1 / this.scale) + '%',
|
||||
transform: 'scale(' + this.scale + ')'
|
||||
}
|
||||
},
|
||||
...mapState([
|
||||
'mobileLayoutStatus'
|
||||
])
|
||||
@ -121,23 +135,23 @@ export default {
|
||||
}
|
||||
},
|
||||
myValue(newValue) {
|
||||
this.initReady&&this.$store.commit('canvasChange')
|
||||
this.initReady && this.$store.commit('canvasChange')
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.viewInit()
|
||||
this.viewInit()
|
||||
},
|
||||
beforeDestroy() {
|
||||
bus.$off('fieldSelect-' + this.element.propValue.viewId)
|
||||
},
|
||||
methods: {
|
||||
viewInit(){
|
||||
viewInit() {
|
||||
bus.$on('fieldSelect-' + this.element.propValue.viewId, this.fieldSelect)
|
||||
tinymce.init({})
|
||||
this.myValue = this.assignment(this.element.propValue.textValue)
|
||||
bus.$on('initCurFields-' + this.element.id, this.initCurFieldsChange)
|
||||
this.$nextTick(()=>{
|
||||
this.initReady=true
|
||||
this.$nextTick(() => {
|
||||
this.initReady = true
|
||||
})
|
||||
},
|
||||
initCurFieldsChange() {
|
||||
@ -154,45 +168,45 @@ export default {
|
||||
content = content.replace(itm, _this.dataRowNameSelect[ele] !== undefined ? _this.dataRowNameSelect[ele] : '[无法获取字段值]')
|
||||
})
|
||||
}
|
||||
content = content.replace('class="base-selected"','')
|
||||
content = content.replace('class="base-selected"', '')
|
||||
this.resetSelect()
|
||||
return content
|
||||
},
|
||||
fieldSelect(field) {
|
||||
const ed = tinymce.editors[this.tinymceId]
|
||||
const fieldId = 'changeText-'+uuid.v1()
|
||||
const value = '<span id="'+fieldId+'"><span class="mceNonEditable" contenteditable="false" data-mce-content="['+field.name +']">[' + field.name + ']</span></span>'
|
||||
const fieldId = 'changeText-' + uuid.v1()
|
||||
const value = '<span id="' + fieldId + '"><span class="mceNonEditable" contenteditable="false" data-mce-content="[' + field.name + ']">[' + field.name + ']</span></span>'
|
||||
const attachValue = '<span id="attachValue"> </span>'
|
||||
ed.insertContent(value)
|
||||
ed.insertContent(attachValue)
|
||||
},
|
||||
onClick(e) {
|
||||
const edInner = tinymce.get(this.tinymceId);
|
||||
const edInner = tinymce.get(this.tinymceId)
|
||||
const node = tinymce.activeEditor.selection.getNode()
|
||||
this.resetSelect(node)
|
||||
},
|
||||
resetSelect(node){
|
||||
const edInner = tinymce.get(this.tinymceId);
|
||||
if(edInner.dom){
|
||||
const nodeArray = edInner.dom.select(".base-selected")
|
||||
if(nodeArray){
|
||||
nodeArray.forEach(nodeInner=>{
|
||||
resetSelect(node) {
|
||||
const edInner = tinymce.get(this.tinymceId)
|
||||
if (edInner.dom) {
|
||||
const nodeArray = edInner.dom.select('.base-selected')
|
||||
if (nodeArray) {
|
||||
nodeArray.forEach(nodeInner => {
|
||||
nodeInner.removeAttribute('class')
|
||||
})
|
||||
}
|
||||
if(node){
|
||||
if (node) {
|
||||
const pNode = node.parentElement
|
||||
if(pNode && pNode.id&& pNode.id.indexOf('changeText')>-1){
|
||||
const innerId = '#'+pNode.id
|
||||
if (pNode && pNode.id && pNode.id.indexOf('changeText') > -1) {
|
||||
const innerId = '#' + pNode.id
|
||||
const domTest = edInner.dom.select(innerId)[0]
|
||||
domTest.setAttribute("class",'base-selected')
|
||||
domTest.setAttribute('class', 'base-selected')
|
||||
edInner.selection.select(domTest)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
setEdit() {
|
||||
if (this.editStatus&&this.canEdit===false) {
|
||||
if (this.editStatus && this.canEdit === false) {
|
||||
this.canEdit = true
|
||||
this.element['editing'] = true
|
||||
this.myValue = this.element.propValue.textValue
|
||||
@ -215,40 +229,45 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.rich-main-class {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto!important;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 0px!important;
|
||||
height: 0px!important;
|
||||
}
|
||||
::v-deep ol {
|
||||
display: block!important;
|
||||
list-style-type: decimal;
|
||||
margin-block-start: 1em!important;
|
||||
margin-block-end: 1em!important;
|
||||
margin-inline-start: 0px!important;
|
||||
margin-inline-end: 0px!important;
|
||||
padding-inline-start: 40px!important;
|
||||
}
|
||||
::v-deep ul {
|
||||
display: block!important;
|
||||
list-style-type: disc;
|
||||
margin-block-start: 1em!important;
|
||||
margin-block-end: 1em!important;
|
||||
margin-inline-start: 0px!important;
|
||||
margin-inline-end: 0px!important;
|
||||
padding-inline-start: 40px!important;
|
||||
}
|
||||
::v-deep li {
|
||||
display: list-item!important;
|
||||
text-align: -webkit-match-parent!important;
|
||||
}
|
||||
.rich-main-class {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
::v-deep .base-selected{
|
||||
background-color: #b4d7ff
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 0px !important;
|
||||
height: 0px !important;
|
||||
}
|
||||
|
||||
::v-deep ol {
|
||||
display: block !important;
|
||||
list-style-type: decimal;
|
||||
margin-block-start: 1em !important;
|
||||
margin-block-end: 1em !important;
|
||||
margin-inline-start: 0px !important;
|
||||
margin-inline-end: 0px !important;
|
||||
padding-inline-start: 40px !important;
|
||||
}
|
||||
|
||||
::v-deep ul {
|
||||
display: block !important;
|
||||
list-style-type: disc;
|
||||
margin-block-start: 1em !important;
|
||||
margin-block-end: 1em !important;
|
||||
margin-inline-start: 0px !important;
|
||||
margin-inline-end: 0px !important;
|
||||
padding-inline-start: 40px !important;
|
||||
}
|
||||
|
||||
::v-deep li {
|
||||
display: list-item !important;
|
||||
text-align: -webkit-match-parent !important;
|
||||
}
|
||||
|
||||
::v-deep .base-selected {
|
||||
background-color: #b4d7ff
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -45,6 +45,7 @@
|
||||
<de-rich-text-view
|
||||
v-else-if="richTextViewShowFlag"
|
||||
:ref="element.propValue.id"
|
||||
:scale="scale"
|
||||
:element="element"
|
||||
:prop-value="element.propValue.textValue"
|
||||
:active="active"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user