• 用户中心
    • 登录 / 注册
  • 快速搜索
  • 技术支持
    • 提交问题
    • 查看全部问题
  • 快捷操作
    • 上个内容
    • 下个内容
    • 页面顶部
    • 用户评论
    • 页面底部
  • 目录1
  • 目录2
  • 未分类
    • 通知公告中心
    • 2026年6月1日 的身高和然后发动反攻的
    • 2026年6月1日 得瑟得瑟的士大夫士大夫
    • 2026年6月1日 山豆根山豆根但如果
    • 2026年6月1日 都是淡淡的粉色
    • 技术支持中心
    • 没有提问或工单
    • 打开购物车
    • 您的购物车为空
    • 图文模式
    • 文本模式
    • 精简模式
  • 登录 / 注册
    • 用户登录
  • 测试
  • 未分类
0

2026年6月8日18

/**
 * @package ZMLPaint\Assets\Js
 *
 * TINYMCE 编辑器
 *
 * @since 1.0.0
 */
 
(function ($) {
	
    tinymce.create('tinymce.plugins.ZMLPaint', {
		
        init : function (editor, url) {
			
			//* 对象和标记
			const node_editor = $('#zml-paint');
			const node_ovly   = node_editor.find('#editor-overlay');
			const node_wrap   = node_editor.find('#editor-wrap');
			const node_submit = node_editor.find('#editor-submit');
			const node_cancel = node_editor.find('#editor-cancel');
			let	  pick_pretag = false;
			let	  pick_button = false;
			let	  node_button = null;
			let	  node_pretag = null;

			//* 注册光标检查
			editor.onKeyUp.add(function () {
				checkCursor();
			});
			
			//* 注册按钮
            editor.addButton('zmlpaint', {
                title: '代码高亮',
				classes: 'editor-button',
                cmd: 'zmlpaint',
                image: url.replace('/js','/images/') + 'button.webp',
				onClick: function (e) {
					node_button = $(e.target).parent().parent();
				}
            });
			
			//* 插入代码按钮
			editor.addCommand('zmlpaint', function () {
				
				//* 获取选项设置
				const options = zml_paint_editor.options;
				
				//* 设置默认值
				const edit_cursor = editor.selection.getNode();
				const edit_pretag = edit_cursor.nodeName.toLowerCase();
				let   edit_lang = options['paint-lang'];
				let   edit_mixed = 'false'; //文本型
				let   edit_first = '';
				let   edit_mark = '';
				let   edit_gutter = options['paint-gutter'];
				let   edit_toolbar = options['paint-toolbar'];
				let   edit_fold = options['paint-fold'];
				let   edit_wrap = options['paint-wrap'];
				let   edit_title = '';
				let   edit_code = editor.selection.getContent({format:'text'});
					
				//* 选择 PRE 标记时更新设置和内容
				if (edit_pretag === 'pre') {
					node_pretag = $(edit_cursor);
					let edit_class = node_pretag.attr('class');
					if (edit_class.match(/\bpaint\s*:/)) {
						//* 清除:前后空格
						edit_class = edit_class.replace(/\s*:\s*/, ':');
						//* 按空格分解设置
						edit_class = edit_class.split(' ');
						//* 更新设置
						for (let item in edit_class) {
							let parts = edit_class[item].split(':'),
								param = parts[0] ? parts[0].trim() : '';
								value = parts[1] ? parts[1].trim() : '';
							switch (param) {
								case 'paint':
									edit_lang = value;
									break;
								case 'mixed':
									edit_mixed = value;
									break;
								case 'first':
									edit_first = value;
									break;
								case 'mark':
									edit_mark = value.replace(/[\[\]]/g, '');
									break;
								case 'gutter':
									edit_gutter = (value == 'true');
									break;
								case 'toolbar':
									edit_toolbar = (value == 'true');
									break;
								case 'fold':
									edit_fold = (value == 'true');
									break;
								case 'wrap':
									edit_wrap = (value == 'true');
									break;
							}
						}
						//* 更新标题和内容
						edit_title = node_pretag.attr('title');
						edit_code  = node_pretag.text();
					}
				}
				
				//* 根据设置更新编辑器
				$('#zml-paint-lang').val(edit_lang);
				$('#zml-paint-first').val(edit_first);
				$('#zml-paint-mark').val(edit_mark);
				$('#zml-paint-mixed').val(edit_mixed);
				$('#zml-paint-gutter').prop('checked', edit_gutter);
				$('#zml-paint-toolbar').prop('checked', edit_toolbar);
				$('#zml-paint-fold').prop('checked', edit_fold);
				$('#zml-paint-wrap').prop('checked', edit_wrap);
				$('#zml-paint-title').val(edit_title);
				$('#zml-paint-code').val(edit_code);
				
				//* 显示编辑器
				node_ovly.show();
				node_wrap.show();
				
				//* 提交按钮动作
				node_submit.off('click').on('click', function () {
					//* 获取编辑器设置和内容
					const save_lang = $('#zml-paint-lang').val();
					const save_mixed = $('#zml-paint-mixed').val(); //文本型
					const save_first = $('#zml-paint-first').val();
					const save_mark = $('#zml-paint-mark').val();
					const save_gutter = $('#zml-paint-gutter').prop('checked');
					const save_toolbar = $('#zml-paint-toolbar').prop('checked');
					const save_fold = $('#zml-paint-fold').prop('checked');
					const save_wrap = $('#zml-paint-wrap').prop('checked');
					const save_title = $('#zml-paint-title').val().trim();
					const save_code = $('#zml-paint-code').val().trim();
					const attr_lang = 'paint:' + save_lang;
					const attr_mixed = save_mixed == 'true' ? ' mixed:true' : ''; //文本型
					const attr_first = save_first == '' ? '' : ' first:' + save_first;
					const attr_mark = save_mark == '' ? '' : ' mark:[' + save_mark + ']';
					const attr_gutter = save_gutter == options['paint-gutter'] ? '' : ' gutter:' + save_gutter;
					const attr_toolbar = save_toolbar == options['paint-toolbar'] ? '' : ' toolbar:' + save_toolbar;
					const attr_fold = save_fold == options['paint-fold'] ? '' : ' fold:' + save_fold;
					const attr_wrap = save_wrap == options['paint-wrap'] ? '' : ' wrap:' + save_wrap;
					const save_class = attr_lang + attr_mixed + attr_first + attr_mark + attr_gutter + attr_toolbar + attr_fold + attr_wrap;
					//* 插入内容
					if (node_pretag && node_pretag.length) { //* 修改
						if (save_code) {
							if (save_title) {
								node_pretag.attr('title', save_title);
							} else {
								node_pretag.removeAttr('title');
							}
							node_pretag.attr('class', save_class);
							node_pretag.text(save_code);
						} else {
							node_pretag.remove();
						}
					} else { //* 新增
						if (save_code) {
							node_pretag = $('<pre>');
							node_pretag.attr('class', save_class);
							node_pretag.text(save_code);
							if (save_title) {
								node_pretag.attr('title', save_title);
							}
							editor.insertContent(node_pretag[0].outerHTML + '<br/>');
							node_pretag.remove();
						} else {
							zmlAlert({
								text: '请输入代码内容!',
								icon: 'error',
								confirm: true,
								cancel: false
							});
							return;
						}
					}
					//* 关闭窗口
					node_cancel.trigger('click');
				});

				//* 取消按钮动作
				node_cancel.off('click').on('click', function () {
					node_pretag = null;
					node_ovly.hide();
					node_wrap.hide();
				});
				
            });
			
			//* 按钮和代码块动作
			function lookupButton() {
				if (!node_button) {
					node_button = $(editor.editorContainer).find('div[class*="editor-button"]');
				}
			}
			
			function activeButton() {
				lookupButton();
				node_button.addClass('mce-active');
				pick_button = true;
				pick_pretag = true;
			}
			
			function deactiveButton() {
				if (pick_button) {
					lookupButton();
					node_button.removeClass('mce-active');
					pick_button = false;
				}
			}
			
			function deactivePretag() {
				if (pick_pretag) {
					$(editor.getBody()).find('pre').removeClass('');
					pick_pretag = false;
				}
			}
			
			//* 检查光标,设置按钮和代码区。
			function checkCursor() {
				const edit_cursor = editor.selection.getNode();
				const node_cursor = $(edit_cursor);
				if (edit_cursor.nodeName.toLowerCase() == 'pre') {
					let classes = node_cursor.attr('class');
					if (classes.match(/paint\s*:/)) {
						deactivePretag();
						activeButton();
						node_cursor.addClass('');
					} else {
						deactivePretag();
						deactiveButton();
					}
				} else {
						deactivePretag();
						deactiveButton();
				}
			}
			
			editor.on('click', function (e) {
				checkCursor();
			});

			//* 关闭按钮
			node_editor.on('click', '#editor-close', function () {
				node_cancel.trigger('click');
			});
			
        }
		
    });
	
    //* 注册插件
    tinymce.PluginManager.add( 'zmlpaint_button', tinymce.plugins.ZMLPaint );
	
})(jQuery);


初始发布:2026年6月8日

TAGS:无标签
上个内容
下个内容
共 0 条评论

还没有任何评论!

发表评论 取消回复

您的邮箱地址不会被公开。 必填项已用 * 标注

快速搜索

最新内容

缩略图
下载调试
40
缩略图
190
缩略图
十分士大夫
210
缩略图
是顶顶顶顶顶地方大师傅似的
130
缩略图
而鬼地方鬼地方鬼地方
130

标签列表