Skip to content

Commit

Permalink
Merge pull request #123 from netyum/main
Browse files Browse the repository at this point in the history 
fix: tinymce style fontfamily fontsize
  • Loading branch information
@kanyxmo
kanyxmo authored Mar 8, 2024
2 parents 9358e87 + 0a06f09 commit becd753
Showing 1 changed file with 95 additions and 93 deletions.
188 changes: 95 additions & 93 deletions src/components/ma-editor/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,116 +11,118 @@
<div>
<editor :key="editorKey" v-model="content" :init="initConfig" :id="props.id"></editor>

<a-modal v-model:visible="resourceVisible" :width="1080" :footer="false" draggable>
<a-modal v-model:visible="resourceVisible" :width="1080" :footer="false" draggable>
<template #title>资源选择器</template>
<ma-resource v-model="list" multiple ref="resource" returnType="url" />
<ma-resource v-model="list" multiple ref="resource" returnType="url"/>
</a-modal>
</div>
</template>

<script setup>
import { reactive, ref, watch, computed } from 'vue'
import MaResource from '@cps/ma-resource/index.vue'
import { useAppStore } from '@/store'
import {reactive, ref, watch, computed} from 'vue'
import MaResource from '@cps/ma-resource/index.vue'
import {useAppStore} from '@/store'

import Editor from '@tinymce/tinymce-vue'
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import tinymce from 'tinymce/tinymce'

import 'tinymce/icons/default'
import 'tinymce/models/dom'
import 'tinymce/themes/silver'
import 'tinymce/icons/default'
import 'tinymce/models/dom'
import 'tinymce/themes/silver'

import 'tinymce/plugins/advlist' //高级列表
import 'tinymce/plugins/anchor' //锚点
import 'tinymce/plugins/autolink' //自动链接
import 'tinymce/plugins/autosave' //自动存稿
import 'tinymce/plugins/charmap' //特殊字符
import 'tinymce/plugins/code' //编辑源码
import 'tinymce/plugins/codesample' //代码示例
import 'tinymce/plugins/directionality' //文字方向
import 'tinymce/plugins/emoticons' //表情
import 'tinymce/plugins/fullscreen' //全屏
import 'tinymce/plugins/help' //帮助
import 'tinymce/plugins/image' //插入编辑图片
import 'tinymce/plugins/importcss' //引入css
import 'tinymce/plugins/insertdatetime' //插入日期时间
import 'tinymce/plugins/link' //超链接
import 'tinymce/plugins/lists' //列表插件
import 'tinymce/plugins/media' //插入编辑媒体
import 'tinymce/plugins/nonbreaking' //插入不间断空格
import 'tinymce/plugins/pagebreak' //插入分页符
import 'tinymce/plugins/preview' //预览
import 'tinymce/plugins/quickbars' //快速工具栏
import 'tinymce/plugins/save' //保存
import 'tinymce/plugins/searchreplace' //查找替换
import 'tinymce/plugins/table' //表格
import 'tinymce/plugins/template' //内容模板
import 'tinymce/plugins/visualblocks' //显示元素范围
import 'tinymce/plugins/visualchars' //显示不可见字符
import 'tinymce/plugins/wordcount' //字数统计
import 'tinymce/plugins/advlist' //高级列表
import 'tinymce/plugins/anchor' //锚点
import 'tinymce/plugins/autolink' //自动链接
import 'tinymce/plugins/autosave' //自动存稿
import 'tinymce/plugins/charmap' //特殊字符
import 'tinymce/plugins/code' //编辑源码
import 'tinymce/plugins/codesample' //代码示例
import 'tinymce/plugins/directionality' //文字方向
import 'tinymce/plugins/emoticons' //表情
import 'tinymce/plugins/fullscreen' //全屏
import 'tinymce/plugins/help' //帮助
import 'tinymce/plugins/image' //插入编辑图片
import 'tinymce/plugins/importcss' //引入css
import 'tinymce/plugins/insertdatetime' //插入日期时间
import 'tinymce/plugins/link' //超链接
import 'tinymce/plugins/lists' //列表插件
import 'tinymce/plugins/media' //插入编辑媒体
import 'tinymce/plugins/nonbreaking' //插入不间断空格
import 'tinymce/plugins/pagebreak' //插入分页符
import 'tinymce/plugins/preview' //预览
import 'tinymce/plugins/quickbars' //快速工具栏
import 'tinymce/plugins/save' //保存
import 'tinymce/plugins/searchreplace' //查找替换
import 'tinymce/plugins/table' //表格
import 'tinymce/plugins/template' //内容模板
import 'tinymce/plugins/visualblocks' //显示元素范围
import 'tinymce/plugins/visualchars' //显示不可见字符
import 'tinymce/plugins/wordcount' //字数统计


const appStore = useAppStore()
const appStore = useAppStore()

const props = defineProps({
modelValue: { type: String },
height: { type: Number, default: 400 },
id: { type: String, default: () => 'tinymce' + new Date().getTime().toString() },
plugins: {
type: [String, Array],
default:
const props = defineProps({
modelValue: {type: String},
height: {type: Number, default: 400},
id: {type: String, default: () => 'tinymce' + new Date().getTime().toString()},
plugins: {
type: [String, Array],
default:
"preview searchreplace autolink directionality visualblocks visualchars fullscreen link media code codesample table charmap nonbreaking insertdatetime advlist lists wordcount autosave"
},
toolbar: {
type: [String, Array],
default:
},
toolbar: {
type: [String, Array],
default:
"code undo redo restoredraft | paste pastetext | forecolor backcolor bold italic underline strikethrough link codesample | fullscreen preview | alignleft aligncenter alignright alignjustify outdent indent formatpainter | \
styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | table media \
charmap pagebreak insertdatetime | resource"
}
})
styles codeformat fontfamily fontsize | bullist numlist | blockquote subscript superscript removeformat | table tablecellborderstyle media \
charmap pagebreak insertdatetime | resource"
}
})

const emit = defineEmits(['update:modelValue', 'change'])
const emit = defineEmits(['update:modelValue', 'change'])

let content = computed({
get() {
return props.modelValue
},
set(value) {
emit('update:modelValue', value)
},
});
let content = computed({
get() {
return props.modelValue
},
set(value) {
emit('update:modelValue', value)
},
});

const list = ref([])
const resource = ref()
const resourceVisible = ref(false)
const appBaseUrl = import.meta.env.VITE_APP_BASE
const list = ref([])
const resource = ref()
const resourceVisible = ref(false)
const appBaseUrl = import.meta.env.VITE_APP_BASE

const initConfig = reactive({
menubar: false, // 菜单栏显隐
language_url: `${appBaseUrl}tinymce/i18n/zh_CN.js`,
language: 'zh_CN',
skin_url: appBaseUrl + (appStore.mode === 'light' ? 'tinymce/skins/ui/tinymce-5' : 'tinymce/skins/ui/tinymce-5-dark'),
height: props.height,
toolbar_mode: 'wrap',
plugins: props.plugins,
toolbar: props.toolbar,
branding: false,
content_css: `${appBaseUrl}tinymce/skins/content/default/content.css`,
setup: (editor) => {
editor.on('init', () => {
editor.getBody().style.fontSize = '14px';
})
editor.ui.registry.addButton('resource', {
text:'资源选择器',
onAction: () => resourceVisible.value = true
})
}
})
const initConfig = reactive({
menubar: false, // 菜单栏显隐
language_url: `${appBaseUrl}tinymce/i18n/zh_CN.js`,
language: 'zh_CN',
skin_url: appBaseUrl + (appStore.mode === 'light' ? 'tinymce/skins/ui/tinymce-5' : 'tinymce/skins/ui/tinymce-5-dark'),
height: props.height,
toolbar_mode: 'wrap',
plugins: props.plugins,
toolbar: props.toolbar,
branding: false,
content_css: `${appBaseUrl}tinymce/skins/content/default/content.css`,
font_size_formats: '12px 14px 16px 18px 20px 22px 24px 26px 28px 30px 32px 34px 36px 38px 40px',
font_size_input_default_unit: 'px',
setup: (editor) => {
editor.on('init', () => {
editor.getBody().style.fontSize = '14px';
})
editor.ui.registry.addButton('resource', {
text: '资源选择器',
onAction: () => resourceVisible.value = true
})
}
})

const editorKey = ref(new Date().getTime())
const editorKey = ref(new Date().getTime())

watch(
watch(
() => list.value,
imgs => {
let tmp = ''
Expand All @@ -133,9 +135,9 @@
resource.value.clearSelecteds()
resourceVisible.value = false
}
)
watch(
)
watch(
() => content.value,
vl => emit('change', vl)
)
)
</script>

0 comments on commit becd753

Please sign in to comment.