London Dev Meetup Rescheduled! Due to unavoidable reasons, the event has been moved to 21st May. Speakers remain the same—any changes will be communicated. Seats are limited—register here to secure your spot!
AI OnAI Off
Notify Episerver about change after selecting content in a content selector dialog
Seems like wrapping the code in setTimeout makes the content change happen, this but it feels a bit hackish and it would problably not work every time due to timing issues... and I don't get why it works when it's wrapped in a setTimout?
_imageSelected: function () {
setTimeout(lang.hitch(this, function() {
var codeMirror = this.editor.codemirror,
output = '';
codeMirror.replaceSelection(output);
var value = this.editor.value();
this._set("value", value);
this.onChange(value);
}), 500);
},
Edited,
Nov 14, 2017 14:52
Hi.
I'm working on image support within a markdown editor based on SimpleMDE. The editor works great but I can't figure out how I should inform Episerver about change after the editor has selected an image in a content selector dialog.
If I just append an image-markdown-tag without going through the content selector dialog Episerver picks up the change, an tells the editor that there are changes to be published.
Note that the _imageSelected-function is called directly within the _openImageSelector-function (The code is simplified to point out the issue):
But if I hook up the _imageSelected-function to the "execute"-event of the dialog, Episerver doesn't pick up the change:
define([ "dojo/_base/declare", "dojo/_base/config", "dojo/_base/lang", "dojo/_base/Deferred", "dojo/ready", "dojo/aspect", "dojo/dom", "dojo/dom-class", "dojo/request/script", "dojo/when", "dijit/form/Textarea", "epi/epi", "epi/dependency", "epi-cms/widget/ContentSelectorDialog", "epi/shell/widget/dialog/Dialog", "xxx/editors/markdowneditor/simplemde/simplemde.min", "xstyle/css!./simplemde/simplemde.min.css", "xstyle/css!./template.css" ], function ( declare, config, lang, Deferred, ready, aspect, dom, domClass, script, when, Textarea, epi, dependency, ContentSelectorDialog, Dialog, SimpleMDE ) { return declare([Textarea], { editor: null, resize: function () { this.inherited(arguments); this._refreshEditor(); }, buildRendering: function () { // Create container to simplify styling this.templateString = '' + this.templateString + ' ';
this.inherited(arguments);
},
startup: function () {
this._refreshEditor();
this.inherited(arguments);
},
_openImageSelector: function () {
var contentRepositoryDescriptors = dependency.resolve("epi.cms.contentRepositoryDescriptors"),
roots = contentRepositoryDescriptors["media"].roots,
imageSelectorDialog = new ContentSelectorDialog({
canSelectOwnerContent: false,
showButtons: false,
roots: roots,
allowedTypes: ["episerver.core.icontentimage"],
showAllLanguages: true
}),
dialog = new Dialog({
title: "Select a image",
dialogClass: "epi-dialog-portrait",
content: imageSelectorDialog
});
dialog.show();
dialog.on("execute", lang.hitch(this, this._imageSelected));
},
_imageSelected: function () {
var codeMirror = this.editor.codemirror,
output = '';
codeMirror.replaceSelection(output);
var value = this.editor.value();
this._set("value", value);
this.onChange(value);
},
_refreshEditor: function () {
if (!this.editor) {
this.editor = new SimpleMDE({
element: this.textbox,
placeholder: this.tooltip,
spellChecker: false,
initialValue: this.value,
forceSync: true,
status: ["lines", "words"],
toolbar: [
"bold",
"italic",
"heading",
"unordered-list",
"ordered-list",
"link",
{
name: "Image",
action: lang.hitch(this, this._openImageSelector),
className: "fa fa-image",
title: "Insert image"
},
"preview"]
});
}
if (typeof this.value !== 'object' && !epi.areEqual(this.editor.value(), this.value)) {
this.editor.value(this.value);
}
this.editor.codemirror.refresh();
}
});
});Clearly I'm missing something?
Thanks,
Anton