forked from github/dataease
Merge pull request #8560 from dataease/pr@dev-v2@feat_rich-text
feat(图表): 富文本视图增加点击字段既可选中设置样式效果
This commit is contained in:
王嘉豪
GitHub
commit
c354ddefb7
@ -5,6 +5,7 @@
|
|||||||
@keydown.stop
|
@keydown.stop
|
||||||
@keyup.stop
|
@keyup.stop
|
||||||
@dblclick="setEdit"
|
@dblclick="setEdit"
|
||||||
|
@click="onClick"
|
||||||
>
|
>
|
||||||
<chart-error v-if="isError" :err-msg="errMsg" />
|
<chart-error v-if="isError" :err-msg="errMsg" />
|
||||||
<Editor
|
<Editor
|
||||||
@ -14,7 +15,6 @@
|
|||||||
class="custom-text-content"
|
class="custom-text-content"
|
||||||
:init="init"
|
:init="init"
|
||||||
:disabled="!canEdit || disabled"
|
:disabled="!canEdit || disabled"
|
||||||
@onClick="onClick"
|
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="rich-placeholder"
|
class="rich-placeholder"
|
||||||
@ -232,8 +232,10 @@ const fieldSelect = field => {
|
|||||||
snapshotStore.resetStyleChangeTimes()
|
snapshotStore.resetStyleChangeTimes()
|
||||||
}
|
}
|
||||||
const onClick = () => {
|
const onClick = () => {
|
||||||
const node = tinymce.activeEditor.selection.getNode()
|
if (canEdit.value) {
|
||||||
resetSelect(node)
|
const node = tinymce.activeEditor.selection.getNode()
|
||||||
|
resetSelect(node)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
const resetSelect = (node?) => {
|
const resetSelect = (node?) => {
|
||||||
const edInner = tinymce.get(tinymceId)
|
const edInner = tinymce.get(tinymceId)
|
||||||
|
|||||||
@ -1,198 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
class="rich-main-class dark-theme"
|
|
||||||
:class="{ 'edit-model': canEdit, 'dark-theme': themes === 'dark' }"
|
|
||||||
@dblclick="setEdit"
|
|
||||||
>
|
|
||||||
<Editor
|
|
||||||
v-if="editShow"
|
|
||||||
:id="tinymceId"
|
|
||||||
v-model="myValue"
|
|
||||||
style="width: 100%; height: 100%"
|
|
||||||
:init="init"
|
|
||||||
:disabled="!canEdit"
|
|
||||||
@onClick="onClick"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { formatDataEaseBi } from '@/utils/url'
|
|
||||||
import tinymce from 'tinymce/tinymce' // tinymce默认hidden，不引入不显示
|
|
||||||
import Editor from '@tinymce/tinymce-vue' // 编辑器引入
|
|
||||||
import 'tinymce/themes/silver/theme' // 编辑器主题
|
|
||||||
import 'tinymce/icons/default' // 引入编辑器图标icon，不引入则不显示对应图标
|
|
||||||
// 引入编辑器插件（基本免费插件都在这儿了）
|
|
||||||
import 'tinymce/plugins/advlist' // 高级列表
|
|
||||||
import 'tinymce/plugins/autolink' // 自动链接
|
|
||||||
import 'tinymce/plugins/link' // 超链接
|
|
||||||
import 'tinymce/plugins/image' // 插入编辑图片
|
|
||||||
import 'tinymce/plugins/lists' // 列表插件
|
|
||||||
import 'tinymce/plugins/charmap' // 特殊字符
|
|
||||||
import 'tinymce/plugins/media' // 插入编辑媒体
|
|
||||||
import 'tinymce/plugins/wordcount' // 字数统计
|
|
||||||
import 'tinymce/plugins/table' // 表格
|
|
||||||
import 'tinymce/plugins/contextmenu' // contextmenu
|
|
||||||
import 'tinymce/plugins/directionality'
|
|
||||||
import 'tinymce/plugins/nonbreaking'
|
|
||||||
import 'tinymce/plugins/pagebreak'
|
|
||||||
import { computed, nextTick, PropType, ref, toRefs, watch } from 'vue'
|
|
||||||
const props = defineProps({
|
|
||||||
terminal: {
|
|
||||||
type: String,
|
|
||||||
default: 'pc'
|
|
||||||
},
|
|
||||||
propValue: {
|
|
||||||
type: String,
|
|
||||||
require: true
|
|
||||||
},
|
|
||||||
element: {
|
|
||||||
type: Object
|
|
||||||
},
|
|
||||||
editMode: {
|
|
||||||
type: String,
|
|
||||||
require: false,
|
|
||||||
default: 'edit'
|
|
||||||
},
|
|
||||||
active: {
|
|
||||||
type: Boolean,
|
|
||||||
require: false,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
// 是否禁用
|
|
||||||
disabled: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
themes: {
|
|
||||||
type: String as PropType<EditorTheme>,
|
|
||||||
default: 'dark'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const { element, editMode, active } = toRefs(props)
|
|
||||||
const emits = defineEmits(['onClick'])
|
|
||||||
|
|
||||||
const editShow = ref(true)
|
|
||||||
const canEdit = ref(false)
|
|
||||||
// 初始化配置
|
|
||||||
const tinymceId = 'tinymce-view-' + element.value['id']
|
|
||||||
const myValue = ref(element.value.propValue.textValue)
|
|
||||||
const init = ref({
|
|
||||||
selector: '#' + tinymceId,
|
|
||||||
toolbar_items_size: 'small',
|
|
||||||
language_url: formatDataEaseBi('/tinymce-dataease-private/langs/zh_CN.js'), // 汉化路径是自定义的，一般放在public或static里面
|
|
||||||
language: 'zh_CN',
|
|
||||||
skin_url: formatDataEaseBi('/tinymce-dataease-private/skins/ui/oxide'), // 皮肤
|
|
||||||
content_css: formatDataEaseBi('/tinymce-dataease-private/skins/content/default/content.css'),
|
|
||||||
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| alignleft aligncenter alignright |' +
|
|
||||||
'formatselect | 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', // 字体大小
|
|
||||||
menubar: false,
|
|
||||||
placeholder: '双击锁定富文本',
|
|
||||||
inline: true, // 开启内联模式
|
|
||||||
branding: false
|
|
||||||
})
|
|
||||||
|
|
||||||
const editStatus = computed(() => editMode.value === 'edit')
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => active.value,
|
|
||||||
val => {
|
|
||||||
if (!val) {
|
|
||||||
element.value['editing'] = false
|
|
||||||
canEdit.value = false
|
|
||||||
reShow()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => element.value.propValue.textValue,
|
|
||||||
newValue => {
|
|
||||||
myValue.value = newValue == null ? '' : newValue
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => myValue.value,
|
|
||||||
newValue => {
|
|
||||||
element.value.propValue.textValue = newValue
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
const onClick = e => {
|
|
||||||
emits('onClick', e, tinymce)
|
|
||||||
}
|
|
||||||
const setEdit = () => {
|
|
||||||
if (editStatus.value) {
|
|
||||||
canEdit.value = true
|
|
||||||
element.value['editing'] = true
|
|
||||||
reShow()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const reShow = () => {
|
|
||||||
editShow.value = false
|
|
||||||
nextTick(() => {
|
|
||||||
editShow.value = true
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.edit-model {
|
|
||||||
cursor: text;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rich-main-class {
|
|
||||||
color: #00feff;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow-y: auto !important;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 0px !important;
|
|
||||||
height: 0px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
: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;
|
|
||||||
}
|
|
||||||
|
|
||||||
: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;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(li) {
|
|
||||||
display: list-item !important;
|
|
||||||
text-align: -webkit-match-parent !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(p) {
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue
Block a user