HTML:
<app-dynamic-form-row>
<elma-form-row class="elma-form-row ng-untouched ng-pristine ng-valid">
<elma-form-label class="elma-form-label">
<span class="labelName"><%- Context.data.property_name %></span>
</elma-form-label>
<elma-form-control class="elma-form-control text-base">
<div id="<%- Context.data.editor_id %>" class="multiline-container ng-star-inserted"></div>
</elma-form-control>
</elma-form-row>
</app-dynamic-form-row>
<%
function toastuiLoadScript()
{
var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = 'https://uicdn.toast.com/editor/latest/toastui-editor.min.css';
document.head.appendChild(link);
var script = document.createElement('script');
script.src = 'https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js';
script.onload = function () {
var selectorString = '#' + Context.data.editor_id;
var markdownEditors = document.querySelectorAll(selectorString);
markdownEditors.forEach(function(divItem) {
var markdownEditor = new toastui.Editor({
el: divItem,
initialEditType: 'wysiwyg',
initialValue: Context.data.property_value,
events: {
change: function(e1) {
Scripts.getChangedMarkdownText(markdownEditor.getMarkdown());
}
}
});
});
};
document.head.appendChild(script);
}
$(document).ready(function() {
toastuiLoadScript();
});
%>
