Skip to content

Instantly share code, notes, and snippets.

@katipogluMustafa

katipogluMustafa/edit_story_page.html

Created December 16, 2021 17:02
Show Gist options
  • Save katipogluMustafa/feef9bc83964fd9dc4f1872f5b3bfd9c to your computer and use it in GitHub Desktop.
Save katipogluMustafa/feef9bc83964fd9dc4f1872f5b3bfd9c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
edit_story_page.html
<!DOCTYPE html>
<html>
<head>
{% load static %}
<script src="{% static 'tinymce/tinymce.min.js' %}" referrerpolicy="origin"></script>
<style>
.demo-dfree {
position: relative;
width: 690px;
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.2);
text-align: left;
color: #626262;
font-size: 14px;
padding: 20px;
}
.demo-dfree *[contentEditable="true"]:hover {
outline: 1px solid #1976D2;
}
.demo-dfree h1 {
color: #1976D2;
font-size: 2em;
}
.demo-dfree h2 {
color: #1976D2;
font-size: 2em;
}
.demo-dfree h3 {
font-size: 1.5em;
color: #403f42;
color: inherit;
}
.demo-dfree h2,
.demo-dfree h3 {
margin-bottom: 0px;
margin-top: 0px;
line-height: 40px;
}
.demo-dfree h4 {
font-weight: bold;
}
.demo-dfree ul,
.demo-dfree ol {
padding-left: 20px;
}
.demo-dfree ul {
list-style: disc;
}
.demo-dfree ol {
list-style: decimal;
}
.demo-dfree a {
text-decoration: underline;
}
.demo-dfree textarea {
display: none;
}
.demo-dfree .dfree-header {
font-size: 2.4em;
text-align: center;
margin: 10px;
}
.demo-dfree .dfree-body {
padding: 20px;
padding-top: 0px;
}
.demo-dfree .dfree-body p {
margin-bottom: 10px;
}
.demo-dfree .dfree-body blockquote {
margin-left: 30px;
padding-left: 10px;
margin-right: 40px;
font-style: italic;
border-left: 1px solid #696969;
}
.demo-dfree .dfree-body a {
text-decoration: underline;
}
.demo-dfree .dfree-body td,
.demo-dfree .dfree-body tr {
border: 1px solid #696969;
}
</style>
</head>
<body>
<form class='demo-dfree' method="post">
{% csrf_token %}
<header>
<h1 class="dfree-header mce-content-body" contenteditable="true" style="position: relative;" spellcheck="false">
{{ story.title }}
</h1>
<br/>
<p class="dfree-description mce-content-body" contenteditable="true" style="position: relative;" spellcheck="false">
{{ story.description }}
</p>
<br/>
</header>
<div class="dfree-body mce-content-body" contenteditable="true" style="position: relative;" spellcheck="false">
{{ story.content | safe }}
</div>
<input class="button" type="submit" value="Save">
</form>
<script referrerpolicy="origin">
var dfreeHeaderConfig = {
selector: '.dfree-header',
menubar: false,
inline: true,
toolbar: false,
plugins: [ 'quickbars' ],
quickbars_insert_toolbar: 'undo redo',
quickbars_selection_toolbar: 'italic underline',
};
var dfreeDescriptionConfig = {
selector: '.dfree-description',
menubar: false,
inline: true,
toolbar: false,
plugins: [ 'quickbars' ],
quickbars_insert_toolbar: 'undo redo',
quickbars_selection_toolbar: 'italic underline',
};
var dfreeBodyConfig = {
selector: '.dfree-body',
menubar: false,
inline: true,
plugins: [
'autolink',
'codesample',
'link',
'lists',
'media',
'table',
'image',
'quickbars',
'codesample',
'help',
'textpattern',
'image'
],
toolbar: false,
quickbars_insert_toolbar: 'quicktable image media codesample',
quickbars_selection_toolbar: 'bold italic quicklink | formatselect | blockquote',
contextmenu: 'undo redo | inserttable | cell row column deletetable | help',
powerpaste_word_import: 'clean',
powerpaste_html_import: 'clean',
images_upload_url: '/upload_image/'
};
tinymce.init(dfreeHeaderConfig);
tinymce.init(dfreeDescriptionConfig);
tinymce.init(dfreeBodyConfig);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment