Viewing File: /home/maglabs/it/lib/web/mage/adminhtml/wysiwyg/tiny_mce/plugins/magentovariable/editor_plugin.js
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
/* global tinymce, MagentovariablePlugin, varienGlobalEvents, Base64 */
/* eslint-disable strict */
define([
'Magento_Variable/js/config-directive-generator',
'Magento_Variable/js/custom-directive-generator',
'wysiwygAdapter',
'jquery',
'mage/adminhtml/tools'
], function (configDirectiveGenerator, customDirectiveGenerator, wysiwyg, jQuery) {
return function (config) {
tinymce.create('tinymce.plugins.magentovariable', {
/**
* Initialize editor plugin.
*
* @param {tinymce.editor} editor - Editor instance that the plugin is initialized in.
*/
init: function (editor) {
var self = this;
/**
* Add new command to open variables selector slideout.
*/
editor.addCommand('openVariablesSlideout', function (commandConfig) {
var selectedElement;
if (commandConfig) {
selectedElement = commandConfig.selectedElement;
} else {
selectedElement = tinymce.activeEditor.selection.getNode();
}
MagentovariablePlugin.setEditor(editor);
MagentovariablePlugin.loadChooser(
config.url,
wysiwyg.getId(),
selectedElement
);
});
/**
* Add button to the editor toolbar.
*/
editor.ui.registry.addIcon(
'magentovariable',
'<svg width="24" height="24" viewBox="0 0 32.000000 32.000000" ' +
'preserveAspectRatio="xMidYMid meet"><g transform="translate(0.000000,32.000000) ' +
'scale(0.100000,-0.100000)" fill="#000000" stroke="none"><path d="M68 250 c-56 -44 -75 -136 -37 ' +
'-184 27 -34 42 -33 23 2 -26 50 -9 129 38 179 26 28 10 30 -24 3z"/><path d="M266 253 c5 -10 9 ' +
'-41 9 -70 0 -42 -6 -60 -32 -97 -36 -51 -35 -56 7 -26 54 39 78 139 44 188 -18 26 -40 30 -28 5z"/>' +
'<path d="M128 223 c-15 -4 -15 -6 0 -33 16 -28 16 -30 -11 -58 -30 -31 -34 -42 -13 -42 8 0 17 11 ' +
'20 25 4 14 11 25 16 25 5 0 12 -11 16 -25 6 -25 37 -35 49 -15 3 5 2 10 -3 10 -23 0 -20 44 5 76 ' +
'25 34 25 34 4 34 -12 0 -20 -4 -17 -8 2 -4 0 -14 -5 -22 -7 -10 -12 -11 -15 -4 -10 25 -30 40 ' +
'-46 37z"/></g>' +
'</svg>'
);
editor.ui.registry.addToggleButton('magentovariable', {
icon: 'magentovariable',
tooltip: jQuery.mage.__('Insert Variable'),
/**
* execute openVariablesSlideout for onAction callback
*/
onAction: function () {
editor.execCommand('openVariablesSlideout');
},
/**
* Highlight or dismiss Insert Variable button when variable is selected or deselected.
*/
onSetup: function (api) {
/**
* Toggle active state of Insert Variable button.
*
* @param {Object} e
*/
var toggleVariableButton = function (e) {
api.setActive(false);
if (jQuery(e.target).hasClass('magento-variable')) {
api.setActive(true);
}
};
editor.on('click', toggleVariableButton);
editor.on('change', toggleVariableButton);
}
});
/**
* Double click handler on the editor to handle dbl click on variable placeholder.
*/
editor.on('dblclick', function (evt) {
if (jQuery(evt.target).hasClass('magento-variable')) {
editor.selection.collapse(false);
editor.execCommand('openVariablesSlideout', {
ui: true,
selectedElement: evt.target
});
}
});
/**
* Attach event handler for when wysiwyg editor is about to encode its content
*/
varienGlobalEvents.attachEventHandler('wysiwygEncodeContent', function (content) {
content = self.encodeVariables(content);
return content;
});
/**
* Attach event handler for when wysiwyg editor is about to decode its content
*/
varienGlobalEvents.attachEventHandler('wysiwygDecodeContent', function (content) {
content = self.decodeVariables(content);
return content;
});
},
/**
* Encode variables in content
*
* @param {String} content
* @returns {*}
*/
encodeVariables: function (content) {
content = content.gsub(/\{\{config path=\"([^\"]+)\"\}\}/i, function (match) {
var path = match[1],
magentoVariables,
imageHtml;
magentoVariables = JSON.parse(config.placeholders);
if (magentoVariables[match[1]] && magentoVariables[match[1]]['variable_type'] === 'default') {
imageHtml = '<span id="%id" class="magento-variable magento-placeholder mceNonEditable">' +
'%s</span>';
imageHtml = imageHtml.replace('%s', magentoVariables[match[1]]['variable_name']);
} else {
imageHtml = '<span id="%id" class="' +
'magento-variable magento-placeholder magento-placeholder-error ' +
'mceNonEditable' +
'">' +
'Not found' +
'</span>';
}
return imageHtml.replace('%id', Base64.idEncode(path));
});
content = content.gsub(/\{\{customVar code=([^\}\"]+)\}\}/i, function (match) {
var path = match[1],
magentoVariables,
imageHtml;
magentoVariables = JSON.parse(config.placeholders);
if (magentoVariables[match[1]] && magentoVariables[match[1]]['variable_type'] === 'custom') {
imageHtml = '<span id="%id" class="magento-variable magento-custom-var magento-placeholder ' +
'mceNonEditable">%s</span>';
imageHtml = imageHtml.replace('%s', magentoVariables[match[1]]['variable_name']);
} else {
imageHtml = '<span id="%id" class="' +
'magento-variable magento-custom-var magento-placeholder ' +
'magento-placeholder-error mceNonEditable' +
'">' +
match[1] +
'</span>';
}
return imageHtml.replace('%id', Base64.idEncode(path));
});
return content;
},
/**
* Decode variables in content.
*
* @param {String} content
* @returns {String}
*/
decodeVariables: function (content) {
var doc = new DOMParser().parseFromString(content.replace(/"/g, '&quot;'), 'text/html'),
returnval = '';
[].forEach.call(doc.querySelectorAll('span.magento-variable'), function (el) {
var $el = jQuery(el);
if ($el.hasClass('magento-custom-var')) {
$el.replaceWith(
customDirectiveGenerator.processConfig(
Base64.idDecode(
$el.attr('id')
)
)
);
} else {
$el.replaceWith(
configDirectiveGenerator.processConfig(
Base64.idDecode(
$el.attr('id')
)
)
);
}
});
returnval += doc.head ? doc.head.innerHTML.replace(/&quot;/g, '"') : '';
returnval += doc.body ? doc.body.innerHTML.replace(/&quot;/g, '"') : '';
return returnval ? returnval : content;
},
/**
* @return {Object}
*/
getInfo: function () {
return {
longname: 'Magento Variable Manager Plugin',
author: 'Magento Core Team',
authorurl: 'http://magentocommerce.com',
infourl: 'http://magentocommerce.com',
version: '1.0'
};
}
});
/**
* Register plugin
*/
tinymce.PluginManager.add('magentovariable', tinymce.plugins.magentovariable);
};
});
Back to Directory
File Manager