Pārlūkot izejas kodu

refactor(editor): 优化富文本编辑器相关组件和配置

- 将模态框宽度从固定值改为百分比布局
- 移除学科和学级字段的显示
- 优化公式编辑器插件代码,移除调试日志
- 修改填空按钮文本为更准确的描述
- 添加工具栏换行模式配置
tanshanming 7 mēneši atpakaļ
vecāks
revīzija
68f0a3ec0a

+ 0 - 3
public/tinymce/plugins/kityformula-editor/kityFormula.html

@@ -54,7 +54,6 @@
 <script>
 //获取url地址栏传参
 function getQueryVariable(variable){
-    console.log('window.location=', window.location)
     var query = window.location.search.substring(1);
     var vars = query.split("&");
     for (var i=0;i<vars.length;i++) {
@@ -66,7 +65,6 @@ function getQueryVariable(variable){
 //处理TinyMCE编辑器的事件
 window.addEventListener('message', function (event) {
   var data = event.data;
-  console.log('调试回显-message:', data)
   kfe.execCommand('get.image.data', function(data){
         var latex = kfe.execCommand('get.source');
         window.parent.postMessage({
@@ -91,7 +89,6 @@ jQuery( function ($) {
             }
         } );
         factory.ready( function ( KFEditor ) {
-            console.log('调试回显:', KFEditor)
             $( "#tips").remove();
             //处理地址栏的参数并加载到编辑器中
             var c=getQueryVariable("c")

+ 66 - 68
public/tinymce/plugins/kityformula-editor/plugin.js

@@ -1,72 +1,70 @@
-tinymce.PluginManager.add('kityformula-editor', function(editor, url) {
+tinymce.PluginManager.add('kityformula-editor', function (editor, url) {
+	var baseURL = tinymce.baseURL + '/plugins/kityformula-editor/kityFormula.html'
 
-    var baseURL = tinymce.baseURL+'/plugins/kityformula-editor/kityFormula.html';
+	editor.on('dblclick', function () {
+		var sel = editor.selection.getContent()
+		var path = /\<img(.*?)src="data:image\/png;base64,[A-Za-z0-9+/=]*"(.*?)data-latex="(.*?)" \/>/g
+		var path2 = /data-latex="(.*?)"/g
 
-    editor.on('dblclick',function(){
-        var sel=editor.selection.getContent();
-        var path=/\<img(.*?)src="data:image\/png;base64,[A-Za-z0-9+/=]*"(.*?)data-latex="(.*?)" \/>/g;
-        var path2=/data-latex="(.*?)"/g;
+		if (sel.search(path) == 0) {
+			sel.replace(path2, function ($0, $1) {
+				var param = encodeURIComponent($1)
+				openDialog(param)
+				return $0
+			})
+		}
+	})
 
-        if(sel.search(path)==0){
-            sel.replace(path2,function($0,$1){
-                var param=encodeURIComponent($1);
-                openDialog(param);
-                return $0;
-            });
-        };
-    });
+	var openDialog = function (param) {
+		return editor.windowManager.openUrl({
+			title: '插入公式',
+			size: 'large',
+			width: 785,
+			height: 475,
+			url: param ? baseURL + '?c=' + param : baseURL,
+			buttons: [
+				{
+					type: 'cancel',
+					text: 'Close'
+				},
+				{
+					type: 'custom',
+					text: 'Save',
+					name: 'save',
+					primary: true
+				}
+			],
+			onAction: function (api, details) {
+				switch (details.name) {
+					case 'save':
+						api.sendMessage('save')
+						break
+					default:
+						break
+				}
+			}
+		})
+	}
 
-    var openDialog = function(param) {
-        return editor.windowManager.openUrl({
-            title: '插入公式',
-            size: 'large',
-            width: 785,
-            height: 475,
-            url:param?baseURL+"?c="+param:baseURL,
-            buttons: [
-                {
-                    type: 'cancel',
-                    text: 'Close'
-                },
-                {
-                    type: 'custom',
-                    text: 'Save',
-                    name: 'save',
-                    primary: true
-                },
-            ],
-            onAction: function (api, details) {
-                switch (details.name) {
-                    case 'save':
-                        api.sendMessage("save");
-                        break;
-                    default:
-                        break;
-                };
-            }
-        });
-    };
-
-    
-    editor.ui.registry.addButton('kityformula-editor', {
-        text: '公式',
-        tooltip: '插入公式',
-        onAction: function() {
-            openDialog();
-        }
-    });
-    editor.ui.registry.addMenuItem('kityformula-editor', {
-        text: '公式',
-        onAction: function() {
-            openDialog();
-        }
-    });
-    return {
-        getMetadata: function() {
-            return  {
-                name: "公式",
-                url: "http://hgcserver.gitee.io",
-            };
-        }
-    };
-});
+	editor.ui.registry.addButton('kityformula-editor', {
+		text: '公式',
+		tooltip: '插入公式',
+		onAction: function () {
+			openDialog()
+		}
+	})
+	editor.ui.registry.addMenuItem('kityformula-editor', {
+		text: '公式',
+		onAction: function () {
+			openDialog()
+		}
+	})
+	return {
+		getMetadata: function () {
+			return {
+				name: '公式',
+				url: ''
+			}
+		}
+	}
+})

+ 66 - 69
public/tinymce/plugins/kityformula-editor/plugin.min.js

@@ -1,73 +1,70 @@
-tinymce.PluginManager.add('kityformula-editor', function(editor, url) {
+tinymce.PluginManager.add('kityformula-editor', function (editor, url) {
+	var baseURL = '/tinymce/plugins/kityformula-editor/kityFormula.html'
 
-    var baseURL = '/tinymce/plugins/kityformula-editor/kityFormula.html';
+	editor.on('dblclick', function () {
+		var sel = editor.selection.getContent()
+		var path = /^<img\s+[^>]*src="data:image\/png;base64,[A-Za-z0-9+\/=]*"[^>]*data-latex="([^"]+)"[^>]*>$/
+		var path2 = /data-latex="(.*?)"/g
 
-    editor.on('dblclick',function(){
-        var sel=editor.selection.getContent();
-        console.log('双击sel=', sel)
-        var path=/\<img(.*?)src="data:image\/png;base64,[A-Za-z0-9+/=]*"(.*?)data-latex="(.*?)" \/>/g;
-        var path2=/data-latex="(.*?)"/g;
+		if (sel.search(path) == 0) {
+			sel.replace(path2, function ($0, $1) {
+				var param = encodeURIComponent($1)
+				openDialog(param)
+				return $0
+			})
+		}
+	})
 
-        if(sel.search(path)==0){
-            sel.replace(path2,function($0,$1){
-                var param=encodeURIComponent($1);
-                openDialog(param);
-                return $0;
-            });
-        };
-    });
+	var openDialog = function (param) {
+		return editor.windowManager.openUrl({
+			title: '插入公式',
+			size: 'large',
+			width: 785,
+			height: 475,
+			url: param ? baseURL + '?c=' + param : baseURL,
+			buttons: [
+				{
+					type: 'cancel',
+					text: 'Close'
+				},
+				{
+					type: 'custom',
+					text: 'Save',
+					name: 'save',
+					primary: true
+				}
+			],
+			onAction: function (api, details) {
+				switch (details.name) {
+					case 'save':
+						api.sendMessage('save')
+						break
+					default:
+						break
+				}
+			}
+		})
+	}
 
-    var openDialog = function(param) {
-        return editor.windowManager.openUrl({
-            title: '插入公式',
-            size: 'large',
-            width: 785,
-            height: 475,
-            url:param?baseURL+"?c="+param:baseURL,
-            buttons: [
-                {
-                    type: 'cancel',
-                    text: 'Close'
-                },
-                {
-                    type: 'custom',
-                    text: 'Save',
-                    name: 'save',
-                    primary: true
-                },
-            ],
-            onAction: function (api, details) {
-                switch (details.name) {
-                    case 'save':
-                        api.sendMessage("save");
-                        break;
-                    default:
-                        break;
-                };
-            }
-        });
-    };
-
-    
-    editor.ui.registry.addButton('kityformula-editor', {
-        text: '公式',
-        tooltip: '插入公式',
-        onAction: function() {
-            openDialog();
-        }
-    });
-    editor.ui.registry.addMenuItem('kityformula-editor', {
-        text: '公式',
-        onAction: function() {
-            openDialog();
-        }
-    });
-    return {
-        getMetadata: function() {
-            return  {
-                name: "公式",
-                url: "http://hgcserver.gitee.io",
-            };
-        }
-    };
-});
+	editor.ui.registry.addButton('kityformula-editor', {
+		text: '公式',
+		tooltip: '插入公式',
+		onAction: function () {
+			openDialog()
+		}
+	})
+	editor.ui.registry.addMenuItem('kityformula-editor', {
+		text: '公式',
+		onAction: function () {
+			openDialog()
+		}
+	})
+	return {
+		getMetadata: function () {
+			return {
+				name: '公式',
+				url: ''
+			}
+		}
+	}
+})

+ 4 - 3
src/components/Editor/index.vue

@@ -67,13 +67,14 @@
 		resize: true,
 		elementpath: true,
 		content_style: '',
+		toolbar_mode: 'wrap',
 		external_plugins: {
-			'kityformula-editor': '/public/tinymce/plugins/kityformula-editor/plugin.min.js',
+			'kityformula-editor': '/public/tinymce/plugins/kityformula-editor/plugin.min.js'
 		},
-		draggable: true,
 		automatic_uploads: false,
 		images_upload_handler(blobInfo, progress) {
 			return new Promise((resolve, reject) => {
+				console.log('调用上传文件回显:', blobInfo.blob)
 				const param = new FormData()
 				param.append('file', blobInfo.blob(), blobInfo.filename())
 				props
@@ -91,7 +92,7 @@
 				// getBody().style.fontSize = '14px'
 			})
 			editor.ui.registry.addButton('numberedline', {
-				text: '横杠数字',
+				text: '填空',
 				onAction: function () {
 					const count = editor.getBody().querySelectorAll('.gapfilling-span').length
 					const lineNumber = count + 1

+ 7 - 7
src/views/exm/exampaper/index.vue

@@ -134,13 +134,13 @@
 			key: 'id',
 			width: 90
 		},
-		{
-			title: '学科',
-			dataIndex: 'subjectId',
-			key: 'subjectId',
-			width: 200,
-			customRender: ({ text }) => examStore.subjectEnumFormat(text)
-		},
+		// {
+		// 	title: '学科',
+		// 	dataIndex: 'subjectId',
+		// 	key: 'subjectId',
+		// 	width: 200,
+		// 	customRender: ({ text }) => examStore.subjectEnumFormat(text)
+		// },
 		{
 			title: '名称',
 			dataIndex: 'name',

+ 1 - 1
src/views/exm/question/edit/gap-filling.vue

@@ -55,7 +55,7 @@
 		</a-form>
 		<a-modal
 			v-model:visible="richEditor.dialogVisible"
-			width="800px"
+			width="70%"
 			:footer="null"
 			:closable="false"
 			centered

+ 1 - 1
src/views/exm/question/edit/multiple-choice.vue

@@ -61,7 +61,7 @@
 		</a-form>
 		<a-modal
 			v-model:visible="richEditor.dialogVisible"
-			width="800px"
+			width="70%"
 			:footer="null"
 			:closable="false"
 			centered

+ 1 - 1
src/views/exm/question/edit/short-answer.vue

@@ -45,7 +45,7 @@
 		</a-form>
 		<a-modal
 			v-model:visible="richEditor.dialogVisible"
-			width="800px"
+			width="70%"
 			:footer="null"
 			:closable="false"
 			centered

+ 1 - 1
src/views/exm/question/edit/single-choice.vue

@@ -61,7 +61,7 @@
 		</a-form>
 		<a-modal
 			v-model:visible="richEditor.dialogVisible"
-			width="800px"
+			width="70%"
 			:footer="null"
 			:closable="false"
 			centered

+ 1 - 1
src/views/exm/question/edit/true-false.vue

@@ -59,7 +59,7 @@
 		</a-form>
 		<a-modal
 			v-model:visible="richEditor.dialogVisible"
-			width="800px"
+			width="70%"
 			:footer="null"
 			:closable="false"
 			centered

+ 1 - 1
src/views/exm/task/index.vue

@@ -24,7 +24,7 @@
 		>
 			<a-table-column title="Id" dataIndex="id" key="id" width="100" />
 			<a-table-column title="标题" dataIndex="title" key="title" />
-			<a-table-column title="学级" dataIndex="gradeLevel" key="gradeLevel" :customRender="levelFormatter" />
+			<!-- <a-table-column title="学级" dataIndex="gradeLevel" key="gradeLevel" :customRender="levelFormatter" /> -->
 			<a-table-column title="发送人" dataIndex="createUserName" key="createUserName" width="100" />
 			<a-table-column title="创建时间" dataIndex="createTime" key="createTime" width="160">
 				<template #default="{ record }">