django_grapesjs/templates/django_grapesjs/change_form.html
{% extends "admin/change_form.html" %}
{% load static grapesjs_tags %}
{% block extrahead %}{{ block.super }}
<script>
var replaceTagsInit = [
{% get_settings_value "REPLACE_INIT_IGNORE_TAGS" safe=True %},
{% get_settings_value "REPLACE_INIT_HIDDEN_TAGS" safe=True %}
]
var replaceTagsSave = [
{% get_settings_value "REPLACE_SAVE_IGNORE_TAGS" safe=True %},
{% get_settings_value "REPLACE_SAVE_HIDDEN_TAGS" safe=True %}
]
function normalizeData(value, save) {
/**
* I add this tag because grapesjs works only with markup.
* If in your resource only a django tags or jinja this will help you avoid mistakes
*/
stringBegin = '<div temporary="">';
stringEnd = '</div label>';
if (save) {
return value.replace(stringBegin, '').replace(stringEnd, '')
}
else {
return stringBegin + value + stringEnd
}
}
function replaceTag(value, replaceTagsArray) {
for (var i=0; i<replaceTagsArray.length; i++) {
for (var tag in replaceTagsArray[i]) {
if (replaceTagsArray[i].hasOwnProperty(tag)) {
value = value.replace(new RegExp(tag, 'g'), replaceTagsArray[i][tag]);
}
}
}
return value;
}
</script>
{% endblock %}
{% block admin_change_form_document_ready %}{{ block.super }}
<script>
function getCssGrapesjs(value, css) {
regexStyle = /(<style grapesjs type=.+)((\s+)|(\S+)|(\r+)|(\n+))(.+)((\s+)|(\S+)|(\r+)|(\n+))(<\/style>)/g;
return value.replace(regexStyle, "") + "<style grapesjs type=\"text/css\">" + css + "</style>";
}
function setHtmlInTheField() {
all_id = document.getElementsByName("get-all-id");
for (i=0; i<all_id.length; i++){
field = document.getElementById(all_id[i].textContent);
htmlGrapesjs = replaceTag(
this["editor_" + all_id[i].textContent].getHtml(),
replaceTagsSave
);
if ({% get_settings_value "GRAPESJS_SAVE_CSS" %}) {
htmlGrapesjs = getCssGrapesjs(
htmlGrapesjs, this["editor_" + all_id[i].textContent].getCss()
)
}
field.value = normalizeData(htmlGrapesjs, true);
}
}
function getSource(t, applyDjangoTag, postfixId) {
elementBlock = document.getElementById("gjs-" + postfixId).children[0];
elementBlock.setAttribute(
"style",
"pointer-events: none; background:#0000; z-index:100; opacity:0.4; filter:alpha(opacity=50)"
);
editor = this["editor_"+ postfixId];
django.jQuery.ajax({
url: "{% url 'dgjs_get_template' %}",
data: {
"template_name": t.value,
"apply_django_tag": applyDjangoTag
},
success: function(data){
editor.setComponents(
replaceTag(
normalizeData(data),
replaceTagsInit
)
);
elementBlock.removeAttribute('style')
}
});
}
(function($) {
$('input[name="_save"]').on('click', function() {
setHtmlInTheField()
});
$('input[name="_continue"]').on('click', function() {
setHtmlInTheField()
});
$('input[name="_addanother"]').on('click', function() {
setHtmlInTheField()
});
})(django.jQuery);
</script>
{% endblock %}