vueadmin/src/components/scEditor/index.vue

<template>
	<div :style="{ '--editor-height': editorHeight }">
		<ckeditor :editor="editor" v-model="editorData" :config="editorConfig" :disabled="disabled" @blur="onBlur" @focus="onFocus"></ckeditor>
	</div>
</template>

<script setup>
import {
	ClassicEditor,
	Alignment,
	AutoImage,
	Autoformat,
	BlockQuote,
	Bold,
	CodeBlock,
	DataFilter,
	DataSchema,
	Essentials,
	FindAndReplace,
	FontBackgroundColor,
	FontColor,
	FontFamily,
	FontSize,
	GeneralHtmlSupport,
	Heading,
	Highlight,
	HorizontalLine,
	Image,
	ImageCaption,
	ImageInsert,
	ImageResize,
	ImageStyle,
	ImageToolbar,
	ImageUpload,
	Indent,
	IndentBlock,
	Italic,
	Link,
	LinkImage,
	List,
	MediaEmbed,
	MediaEmbedToolbar,
	Mention,
	Paragraph,
	PasteFromOffice,
	RemoveFormat,
	SelectAll,
	ShowBlocks,
	SourceEditing,
	SpecialCharacters,
	SpecialCharactersArrows,
	SpecialCharactersCurrency,
	SpecialCharactersEssentials,
	SpecialCharactersLatin,
	SpecialCharactersMathematical,
	SpecialCharactersText,
	Style,
	Subscript,
	Superscript,
	Table,
	TableCaption,
	TableCellProperties,
	TableColumnResize,
	TableProperties,
	TableToolbar,
	TextTransformation,
	TodoList,
	Underline,
	Undo,
	WordCount,
} from 'ckeditor5'
import { Ckeditor } from '@ckeditor/ckeditor5-vue'
import { UploadAdapterPlugin } from './UploadAdapter.js'

import { ref, computed, watch } from 'vue'
import { useCurrentInstance } from '@/utils/tool'

import coreTranslations from 'ckeditor5/translations/zh-cn.js'
import 'ckeditor5/ckeditor5.css'

const { proxy } = useCurrentInstance()

// 组件名称
defineOptions({
	name: 'scCkeditor',
})

// Props 定义
const props = defineProps({
	modelValue: {
		type: String,
		default: '',
	},
	placeholder: {
		type: String,
		default: '请输入内容……',
	},
	toolbar: {
		type: String,
		default: 'basic',
	},
	height: {
		type: String,
		default: '400px',
	},
	disabled: {
		type: Boolean,
		default: false,
	},
})

// Emits 定义
const emit = defineEmits(['update:modelValue'])

// 工具栏配置常量
const TOOLBARS = {
	full: [
		'sourceEditing',
		'undo',
		'redo',
		'heading',
		'style',
		'|',
		'superscript',
		'subscript',
		'removeFormat',
		'bold',
		'italic',
		'underline',
		'link',
		'fontBackgroundColor',
		'fontFamily',
		'fontSize',
		'fontColor',
		'|',
		'outdent',
		'indent',
		'alignment',
		'bulletedList',
		'numberedList',
		'todoList',
		'|',
		'blockQuote',
		'insertTable',
		'imageInsert',
		'mediaEmbed',
		'highlight',
		'horizontalLine',
		'selectAll',
		'showBlocks',
		'specialCharacters',
		'codeBlock',
		'findAndReplace',
	],
	basic: [
		'sourceEditing',
		'undo',
		'redo',
		'heading',
		'|',
		'removeFormat',
		'bold',
		'italic',
		'underline',
		'link',
		'fontBackgroundColor',
		'fontFamily',
		'fontSize',
		'fontColor',
		'|',
		'outdent',
		'indent',
		'alignment',
		'bulletedList',
		'numberedList',
		'todoList',
		'|',
		'insertTable',
		'imageInsert',
		'mediaEmbed',
	],
	simple: ['undo', 'redo', 'heading', '|', 'removeFormat', 'bold', 'italic', 'underline', 'link', 'fontBackgroundColor', 'fontFamily', 'fontSize', 'fontColor', '|', 'insertTable', 'imageInsert', 'mediaEmbed'],
}

// 插件配置常量
const PLUGINS = [
	Alignment,
	AutoImage,
	Autoformat,
	BlockQuote,
	Bold,
	CodeBlock,
	DataFilter,
	DataSchema,
	Essentials,
	FindAndReplace,
	FontBackgroundColor,
	FontColor,
	FontFamily,
	FontSize,
	GeneralHtmlSupport,
	Heading,
	Highlight,
	HorizontalLine,
	Image,
	ImageCaption,
	ImageInsert,
	ImageResize,
	ImageStyle,
	ImageToolbar,
	ImageUpload,
	Indent,
	IndentBlock,
	Italic,
	Link,
	LinkImage,
	List,
	MediaEmbed,
	MediaEmbedToolbar,
	Mention,
	Paragraph,
	PasteFromOffice,
	RemoveFormat,
	SelectAll,
	ShowBlocks,
	SourceEditing,
	SpecialCharacters,
	SpecialCharactersArrows,
	SpecialCharactersCurrency,
	SpecialCharactersEssentials,
	SpecialCharactersLatin,
	SpecialCharactersMathematical,
	SpecialCharactersText,
	Style,
	Subscript,
	Superscript,
	Table,
	TableCaption,
	TableCellProperties,
	TableColumnResize,
	TableProperties,
	TableToolbar,
	TextTransformation,
	TodoList,
	Underline,
	Undo,
	WordCount,
	UploadAdapterPlugin,
]

// 响应式数据
const editorData = ref('')
const editorHeight = ref(props.height)
const editor = ClassicEditor

// 编辑器配置
const editorConfig = computed(() => ({
	language: { ui: 'zh-cn', content: 'zh-cn' },
	translations: [coreTranslations],
	plugins: PLUGINS,
	toolbar: {
		shouldNotGroupWhenFull: true,
		items: TOOLBARS[props.toolbar] || TOOLBARS.basic,
	},
	placeholder: props.placeholder,
	image: {
		styles: ['alignLeft', 'alignCenter', 'alignRight'],
		toolbar: ['imageTextAlternative', 'toggleImageCaption', '|', 'imageStyle:alignLeft', 'imageStyle:alignCenter', 'imageStyle:alignRight', '|', 'linkImage'],
	},
	mediaEmbed: {
		previewsInData: true,
		providers: [
			{
				name: 'mp4',
				url: /\.(mp4|avi|mov|flv|wmv|mkv)$/i,
				html: (match) => {
					const url = match['input']
					return '<video controls width="100%" height="100%" src="' + url + '"></video>'
				},
			},
		],
	},
	fontSize: {
		options: [10, 12, 14, 16, 18, 20, 22, 24, 26, 30, 32, 36],
	},
	style: {
		definitions: [
			{
				name: 'Article category',
				element: 'h3',
				classes: ['category'],
			},
			{
				name: 'Info box',
				element: 'p',
				classes: ['info-box'],
			},
		],
	},
	upload: {
		uploadUrl: proxy?.$API?.common?.upload?.url || '',
		withCredentials: false,
		extendData: { type: 'images' },
		headers: {
			Authorization: 'Bearer ' + proxy?.$TOOL?.data?.get('TOKEN'),
		},
	},
}))

// 监听 modelValue 变化
watch(
	() => props.modelValue,
	(newVal) => {
		editorData.value = newVal ?? ''
	},
	{ immediate: true },
)

// 监听 height 变化
watch(
	() => props.height,
	(newVal) => {
		editorHeight.value = newVal
	},
)

// 移除图片宽高的正则替换函数
const stripImageDimensions = (html) => {
	return html.replace(/<img[^>]*>/gi, (match) => {
		return match.replace(/width="[^"]*"/gi, '').replace(/height="[^"]*"/gi, '')
	})
}

// 失去焦点事件 - 移除图片的固定宽高，避免响应式布局问题
const onBlur = () => {
	const cleanedData = stripImageDimensions(editorData.value)
	editorData.value = cleanedData
	emit('update:modelValue', cleanedData)
}
</script>

<style>
:root {
	--ck-z-panel: 9999;
}

.ck-content {
	height: var(--editor-height);
}

.ck-source-editing-area,
.ck-source-editing-area textarea {
	height: var(--editor-height);
}

.ck-source-editing-area textarea {
	overflow-y: scroll !important;
}
</style>