/**
* @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日


还没有任何评论!