70 lines
2.9 KiB
HTML
70 lines
2.9 KiB
HTML
|
{% extends "layouts/default.html" %}
|
||
|
|
{% block title %}TinyMCE{% endblock %}
|
||
|
|
{% block content %}
|
||
|
|
<div class="container">
|
||
|
|
<form id="tinymce-form" name="tinymce-form" method="post" action="/tinymce">
|
||
|
|
<input type="hidden" name="mode" value="create">
|
||
|
|
{{ token | safe }}
|
||
|
|
<div class="columns">
|
||
|
|
<div class="column is-half">
|
||
|
|
<h1 class="title">TinyMCE</h1>
|
||
|
|
</div>
|
||
|
|
<div class="column is-half">
|
||
|
|
<div class="field is-horizontal">
|
||
|
|
<div class="field-label">
|
||
|
|
<label for="filename" class="label">File Name</label>
|
||
|
|
</div>
|
||
|
|
<div class="field-body">
|
||
|
|
<div class="field is-grouped">
|
||
|
|
<div class="control is-expanded">
|
||
|
|
<input class="input" id="filename" name="filename" type="text" value="{% if file.name %}{{ file.name }}{% endif %}" required>
|
||
|
|
</div>
|
||
|
|
<div class="control">
|
||
|
|
<button class="button is-primary" type="submit">Process</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<div class="field">
|
||
|
|
<div class="control">
|
||
|
|
<textarea class="textarea" id="default" name="default">{{ file.body | default:"Next, use our Get Started docs to setup Tiny!" }}</textarea>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
<script id="script" src="/js/tinymce/tinymce.min.js" referrerpolicy="origin"></script>
|
||
|
|
<script>
|
||
|
|
var tinymce_init = (() => {
|
||
|
|
var only_once = false;
|
||
|
|
return function () {
|
||
|
|
if (!only_once) {
|
||
|
|
only_once = true;
|
||
|
|
setTimeout(tinymce.init({
|
||
|
|
selector: 'textarea#default',
|
||
|
|
auto_focus: 'default',
|
||
|
|
highlight_on_focus: true,
|
||
|
|
skin: 'oxide-dark',
|
||
|
|
content_css: 'dark',
|
||
|
|
min_height: 500,
|
||
|
|
plugins: 'accordion lists advlist anchor autolink autoresize autosave charmap code codesample directionality emoticons fullscreen help image insertdatetime link media nonbreaking pagebreak preview quickbars save searchreplace table template visualblocks visualchars wordcount',
|
||
|
|
toolbar1: 'bold italic underline strikethrough | alignleft aligncenter alignright alignjustify alignnone | styles | emoticons',
|
||
|
|
toolbar2: 'cut copy paste pastetext | bullist numlist | outdent indent | redo undo blockquote | link unlink openlink anchor image',
|
||
|
|
toolbar3: 'table | hr removeformat visualblocks | subscript superscript | charmap media insertdatetime | visualchars nonbreaking pagebreak fullscreen | searchreplace | help code',
|
||
|
|
promotion: false,
|
||
|
|
}), 1000);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})();
|
||
|
|
['DOMContentLoaded', 'htmx:afterRequest'].forEach(function(_) {
|
||
|
|
tinymce_init();
|
||
|
|
});
|
||
|
|
htmx.onLoad(function (_) {
|
||
|
|
tinymce_init();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
{% endblock %}
|