Dear All,
In my project I have already customized Rich Text Plugin for Content Fragment , as shown below.
Now my requirement is to migrate this CF Customized Richtext to the Component called pagehub-text, as shown below. and I have done below.
But in pagehub-text component this upload asset button is not coming.
I have update my package zip file inside below.
https://github.com/SubMasanikani/aem-65-code
Please let me know if I need to change whole JavaScript file ?
(function ($, $document) {
var EAEM_PLUGIN_ID = "assetuploadButton",
EAEM_ASSETUPLOAD_FEATURE = "assetUploadButton",
EAEM_ASSETUPLOAD_ICON = EAEM_PLUGIN_ID + "#" + EAEM_ASSETUPLOAD_FEATURE,
BUTTON_FORM_URL = "/apps/cfm-rte-plugins-asset-upload/rte-assetUpload-form.html",
SENDER = "experience-aem-button", REQUESTER = "requester", $eaemButtonFormModal;
var url = document.location.pathname;
var assetUploadPath;
var SUPPORTED_TYPES = [
{
"type": "image",
"mimeTypeDetector": function (mimeType) {
if (CUI.rte.Common.strStartsWith(mimeType, "image/")) {
return true;
}
return false;
},
createHTML: function (path) {
return "<img src=\"" + encodeURI(path) + "\">";
}
}, {
"type": "video",
"mimeTypeDetector": function (mimeType) {
if (CUI.rte.Common.strStartsWith(mimeType, "video/")) {
return true;
}
return false;
},
createHTML: function (path) {
return "<video src=\"" + path + "\" controls=\"controls\"></video>";
}
}
];
if (url.indexOf("/editor.html") == 0) {
extendButtonPlugin();
registerPlugin();
} else if (url.indexOf(BUTTON_FORM_URL) == 0) {
handleForm();
}
function handleForm() {
$document.on("foundation-contentloaded", fillDefaultValues);
setTimeout(function () {
$('a[data-foundation-wizard-control-action="cancel"]').click(sendCancelMessage);
$('button[data-foundation-wizard-control-action="next"]').hide();
validateForm();
}, 100);
}
function replaceLastString(str) {
var myArr = str.split("/");
var lastIndex = str.lastIndexOf("/");
str = str.slice(0, lastIndex);
return str;
}
function initSelectBehavior($form) {
$(window.document).unbind("foundation-validation-valid");
$(window.document).unbind("foundation-validation");
var $form = $("coral-panel");
$form.addClass("coral-Form coral-Form--vertical foundation-layout-util-maximized-container");
$form.find('button[data-foundation-wizard-control-action="next"]').prop('disabled', true);
var $buttonSelect = $form.find('coral-select[name="button_select"]');
$buttonSelect[0].addEventListener('change', function (event) {
validateForm();
});
assetUploadPath = getParent().location.pathname.replace("/editor.html", "").replace(getcontentFragmentType(), "assets/images");
assetUploadPath = replaceLastString(assetUploadPath);
var $altTextInput = $form.find('input[name="altText"]');
$altTextInput.on('change', validateForm);
var $assetNameInput = $form.find('input[name="assetName"]');
$assetNameInput.on("change", function (event) {
if (validateAssetName(this.value)) {
addOrReplaceInCustomPatameter(document.querySelector('coral-fileupload[name="file"]')._uploadQueue[0], "fileName", this.value);
}
validateForm();
});
var $rteAssetUpload = $('coral-fileupload[name="file"]');
$rteAssetUpload.attr('action', assetUploadPath + '.createasset.html');
$assetNameInput.parent().appendTo($rteAssetUpload);
$altTextInput.parent().appendTo($rteAssetUpload);
var uploadButton = new Coral.Button().set({
label: {
innerHTML: "Upload Asset"
},
icon: "upload",
iconSize: "S",
id: 'uploadButton',
class: 'coral3-Button coral3-Button--secondary',
size: 'S',
variant: 'secondary',
title: 'Upload Asset',
type: 'button'
});
$(uploadButton).attr('coral-fileupload-submit', '');
$(uploadButton).appendTo($rteAssetUpload);
uploadButton.on('click', function (event){
var loadingDialog = FORM.createLoadingModal();
loadingDialog.show();
});
$rteAssetUpload.width('100%');
$rteAssetUpload.on('coral-fileupload:fileadded', function (event) {
//validate/change filename
var item = event.detail.item;
var isAssetNameValid = validateAssetName(item.file.name);
var $assetName = $('input[name="assetName"]');
if (!isAssetNameValid) {
$assetName.addClass('is-invalid');
$(uploadButton).prop('disabled', true);
} else {
$assetName.removeClass('is-invalid');
$(uploadButton).prop('disabled', false);
addOrReplaceInCustomPatameter(item, "fileName", item.file.name);
}
$assetName.val(item.file.name);
});
$rteAssetUpload.on('coral-fileupload:load', function (event) {
var item = event.detail.item;
var altText = $('input[name="altText"]').val();
//alert("altText is : " + altText);
if (item.status === 200) {
var assetPath = assetUploadPath + '/' + item.name;
$.ajax({
type: 'GET',
url: '/bin/updateproperty',
data: {
assetpath: assetPath,
AltText: altText
},
dataType: 'json',
success: function (data) {
console.log("success");
}
});
var message = {
sender: SENDER,
action: "submit",
data: {}
};
message.assetPath = assetPath;
parent.postMessage(JSON.stringify(message), "*");
}
if (item._xhr.statusText !== "OK") {
var errorDialog = document.querySelector('#uploadErrorDialog');
loadingDialog.hide();
errorDialog.show();
}
});
$rteAssetUpload.parent().hide();
function addOrReplaceInCustomPatameter(item, name, value) {
item.parameters = item.parameters ? item.parameters : [];
var isPresent = false;
item.parameters.forEach(function (itm) {
isPresent = true;
if (itm.name === name) {
itm.value = value;
}
});
if (!isPresent) {
item.parameters.push({
name: name,
value: value
});
}
// Specific handling for file name. As file object also contains name
if (name === "fileName") {
item.name = value;
}
};
}
function getcontentFragmentType() {
return getParent().location.pathname.split("/")[6];
}
function validateForm() {
$assetName = $('input[name="assetName"]');
var isAssetNameValid = validateAssetName($assetName.val());
$rteAssetUpload = $('coral-fileupload[name="file"]');
if (!isAssetNameValid) {
$assetName.addClass('is-invalid');
$('#uploadButton').prop('disabled', true);
} else {
$assetName.removeClass('is-invalid');
$('#uploadButton').prop('disabled', false);
addOrReplaceInCustomPatameter($rteAssetUpload, "fileName", $assetName.val());
}
$buttonSelect = $('coral-select[name="button_select"]');
if ($buttonSelect[0].selectedItem.value !== '') {
$buttonSelect.prop('invalid', false);
$rteAssetUpload.parent().show();
setTimeout(function () { $buttonSelect.prop('invalid', false); });
if ($buttonSelect[0].selectedItem.value === 'Image') {
$('input[name="altText"]').parent().show();
$rteAssetUpload.attr('accept', 'image/*');
assetUploadPath = getParent().location.pathname.replace("/editor.html", "").replace(getcontentFragmentType(), "assets/images");
assetUploadPath = replaceLastString(assetUploadPath);
$rteAssetUpload.attr('action', assetUploadPath + '.createasset.html');
}
else {
$rteAssetUpload.attr('accept', 'video/*');
$('input[name="altText"]').val('');
$('input[name="altText"]').parent().hide();
assetUploadPath = getParent().location.pathname.replace("/editor.html", "").replace(getcontentFragmentType(), "assets/videos");
assetUploadPath = replaceLastString(assetUploadPath);
$rteAssetUpload.attr('action', assetUploadPath + '.createasset.html');
}
} else {
setTimeout(function () { $buttonSelect.prop('invalid', true); });
$rteAssetUpload.parent().hide();
$buttonSelect.prop('invalid', true);
$('#uploadButton').prop('disabled', true);
}
}
function addOrReplaceInCustomPatameter(item, name, value) {
item.parameters = item.parameters ? item.parameters : [];
var isPresent = false;
item.parameters.forEach(function (itm) {
isPresent = true;
if (itm.name === name) {
itm.value = value;
}
});
if (!isPresent) {
item.parameters.push({
name: name,
value: value
});
}
// Specific handling for file name. As file object also contains name
if (name === "fileName") {
item.name = value;
}
}
function validateAssetName(assetName) {
var illegalCharacters = ["*", "/", ":", "[", "\\", "]", "|", "#", "%", "{", "}", "?", "`", "‘", "’", "'", "!", "$", "<", ">", "~", "@", "&", "^", "+", "=", ",", "é", "à", "è", "ù", "â", "ê", "î", "ô", "û", "ä", "ë", "ü", "ç", "ó", "ï", "Ç", "œ", "«", "»", ";", "æ", "€", "—", "–", "À", "Â",
"Ä", "Æ", "Ç", "È", "É", "Ê", "Ë", "Î", "Ï", "Ô", "Œ", "Ù", "Û", "Ü", " "];
var pattern = /\.[0-9a-z]{3,4}$/i;
if (typeof assetName === "string") {
if (contains(assetName, illegalCharacters) || !assetName.match(pattern)) {
return false;
} else {
return true;
}
}
}
function contains(str, chars) {
for (var i = 0; i < chars.length; i++) {
if (str.indexOf(chars[i]) > -1) {
return true;
}
}
return false;
}
function fillDefaultValues() {
var $form = $("coral-panel"),
form = $("form")[0];
initSelectBehavior($form);
}
function sendCancelMessage() {
var message = {
sender: SENDER,
action: "cancel"
};
getParent().postMessage(JSON.stringify(message), "*");
}
function getParent() {
if (window.opener) {
return window.opener;
}
return parent;
}
function closePicker(event) {
event = event.originalEvent || {};
if (_.isEmpty(event.data)) {
return;
}
var message, action;
try {
message = JSON.parse(event.data);
} catch (err) {
return;
}
if (!message || message.sender !== SENDER) {
return;
}
action = message.action;
if (action === "submit") {
if (message.assetPath !== undefined) {
getData(message.assetPath, function (assetToInsert) {
// create HTML and insert it
if (assetToInsert) {
var assetPath = assetToInsert.path;
var type = assetToInsert.type;
var html = type.createHTML(assetPath);
$eaemButtonFormModal.eaemButtonPlugin.editorKernel.execCmd("insertprocessed", html);
} else {
// TODO error handling?
}
if ($eaemButtonFormModal) {
var modal = $eaemButtonFormModal.data('modal');
modal.hide();
modal.$element.remove();
}
var uploadAssetSuccessDialog = new Coral.Dialog().set({
id: "uploadAssetSuccessDialog",
header: {
innerHTML: Granite.I18n.get('Asset Uploaded')
},
backdrop: Coral.Dialog.backdrop.STATIC,
content: {
innerHTML:
`Your asset is saved at ${assetPath || message.assetPath}`
},
footer: {
innerHTML: "<button is=\"coral-button\" variant=\"primary\" coral-close=\"\" class=\"coral3-Button coral3-Button--primary\" size=\"M\"><coral-button-label>Ok</coral-button-label></button>"
},
variant: "success"
});
var loadingDialog = FORM.createLoadingModal();
loadingDialog.hide();
uploadAssetSuccessDialog.show();
});
}
}
if (action === "cancel") {
if ($eaemButtonFormModal) {
var modal = $eaemButtonFormModal.data('modal');
modal.hide();
modal.$element.remove();
}
}
}
function getMetaData(data) {
var metaData = undefined;
if (data.hasOwnProperty("jcr:content")) {
metaData = data["jcr:content"]["metadata"];
}
return metaData;
}
function getAssetTypeFromMimeType(mimeType) {
if (!mimeType) {
return undefined;
}
for (var t = 0; t < SUPPORTED_TYPES.length; t++) {
var type = SUPPORTED_TYPES[t];
if (type.mimeTypeDetector(mimeType)) {
return type;
}
}
return undefined;
}
function getData(path, callback) {
$.ajax(path + ".2.json", {
success: function (data) {
var assetData = undefined;
if (data) {
if (data["jcr:primaryType"] === "dam:Asset") {
var metaData = getMetaData(data);
if (metaData) {
var mimeType = metaData["dam:MIMEtype"]
|| metaData["dc:format"];
var assetType = getAssetTypeFromMimeType(mimeType);
if (assetType) {
assetData = {
"type": assetType,
"path": path,
"metaData": metaData
};
}
}
}
}
if (callback) {
callback(assetData);
}
},
error: function () {
if (callback) {
callback(undefined);
}
}
});
}
function extendButtonPlugin() {
var origFn = Dam.CFM.StyledTextEditor.prototype._start;
Dam.CFM.StyledTextEditor.prototype._start = function () {
addRTEPluginSettings(this);
origFn.call(this);
}
}
function addRTEPluginSettings(editor) {
var config = editor.$editable.data("config");
config.rtePlugins[EAEM_PLUGIN_ID] = {
features: "*"
};
config.uiSettings.cui.multieditorFullscreen.toolbar.push(EAEM_ASSETUPLOAD_ICON);
}
function registerPlugin() {
var EAEM_CFM_ASSETUPLOAD_PLUGIN = new Class({
toString: "eaemCFMUploadPlugin",
extend: CUI.rte.plugins.Plugin,
buttonFormUI: null,
getFeatures: function () {
return [EAEM_ASSETUPLOAD_FEATURE];
},
notifyPluginConfig: function (pluginConfig) {
var defaults = {
tooltips: {}
};
defaults.tooltips[EAEM_ASSETUPLOAD_FEATURE] = {
title: "Upload Asset from your desktop..."
};
CUI.rte.Utils.applyDefaults(pluginConfig, defaults);
this.config = pluginConfig;
},
initializeUI: function (tbGenerator) {
if (!this.isFeatureEnabled(EAEM_ASSETUPLOAD_FEATURE)) {
return;
}
this.buttonFormUI = new tbGenerator.createElement(EAEM_ASSETUPLOAD_FEATURE, this, false,
this.config.tooltips[EAEM_ASSETUPLOAD_FEATURE]);
tbGenerator.addElement(EAEM_ASSETUPLOAD_FEATURE, 999, this.buttonFormUI, 999);
if (tbGenerator.registerIcon) {
tbGenerator.registerIcon(EAEM_ASSETUPLOAD_ICON, "upload");
}
$(window).off('message', closePicker).on('message', closePicker);
},
isValidSelection: function () {
var winSel = window.getSelection();
return winSel && winSel.rangeCount == 1 && winSel.getRangeAt(0).toString().length > 0;
},
execute: function (pluginCommand, value, envOptions) {
var context = envOptions.editContext;
if (pluginCommand != EAEM_ASSETUPLOAD_FEATURE) {
return;
}
var selection = CUI.rte.Selection.createProcessingSelection(context),
ek = this.editorKernel, startNode = selection.startNode;
var winSel = window.getSelection();
if (winSel && winSel.rangeCount == 1 && winSel.getRangeAt(0).toString().length == 0 && ($(window.getSelection().baseNode).prop('tagName') !== 'A' && $(window.getSelection().baseNode).parent().prop("tagName") !== 'A')) {
if ((selection.startOffset === startNode.length) && (startNode != selection.endNode)) {
startNode = startNode.nextSibling;
}
this.showModal(this.getButtonFormFrameUrl());
}
},
showModal: function (url) {
var self = this, $iframe = $('<iframe id="rteAssetUploadFrame">'),
$modal = $('<div>').addClass('eaem-cfm-font-size-rte coral-Modal');
$iframe.attr('src', url).appendTo($modal);
$modal.appendTo('body').modal({
type: 'default',
buttons: [],
visible: true
});
$eaemButtonFormModal = $modal;
$eaemButtonFormModal.eaemButtonPlugin = self;
$modal.nextAll(".coral-Modal-backdrop").addClass("cfm-coral2-backdrop-rte");
},
getButtonFormFrameUrl: function () {
return Granite.HTTP.externalize(BUTTON_FORM_URL) + "?" + REQUESTER + "=" + SENDER;
},
updateState: function (selDef) {
var hasUC = this.editorKernel.queryState(EAEM_ASSETUPLOAD_FEATURE, selDef);
if (this.buttonFormUI != null && this.buttonFormUI.$ui != null) {
var winSel = window.getSelection(),
isTextSelected = winSel && winSel.rangeCount == 1 && winSel.getRangeAt(0).toString().length == 0 && ($(window.getSelection().baseNode).prop('tagName') !== 'A' && $(window.getSelection().baseNode).parent().prop("tagName") !== 'A');
isTextSelected ? this.buttonFormUI.$ui.removeClass('is-disabled') : this.buttonFormUI.$ui.addClass('is-disabled');
this.buttonFormUI.setSelected(isTextSelected);
}
}
});
CUI.rte.plugins.PluginRegistry.register(EAEM_PLUGIN_ID, EAEM_CFM_ASSETUPLOAD_PLUGIN);
}
}(jQuery, jQuery(document)));
Solved! Go to Solution.
Views
Replies
Total Likes
yes, You need to change the javascript for the component RTE plugin.
Hi,
You can check the below sample implementation for component RTE.
https://aemlab.blogspot.com/2019/07/aem-rte-custom-plugins-1.html
@arunpatidar , yes I am following the same blog https://aemlab.blogspot.com/2019/07/aem-rte-custom-plugins-1.html
and working. But my question is that can we we use the existing assetUpload-plugin.js which one is already developed for the customized RTE for Content Fragment for the component ?
But I think I need to change the existing javascript.
Please suggest.
yes, You need to change the javascript for the component RTE plugin.
Thanks Arun and let me change now.
Views
Likes
Replies
Views
Likes
Replies