107 lines
4.5 KiB
HTML
107 lines
4.5 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% load static %}
|
|
|
|
{% block title %}WYSIWYG{% endblock %}
|
|
|
|
{% block css %}
|
|
<link href="{% static 'plugins/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.min.css' %}" rel="stylesheet" />
|
|
<link href="{% static 'plugins/quill/dist/quill.snow.css' %}" rel="stylesheet" />
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
<script src="{% static 'plugins/quill/dist/quill.js' %}"></script>
|
|
<script src="{% static 'plugins/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.all.min.js' %}"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js' %}"></script>
|
|
<script src="{% static 'js/demo/form-wysiwyg.demo.js' %}"></script>
|
|
<script src="{% static 'plugins/@highlightjs/cdn-assets/highlight.min.js' %}"></script>
|
|
<script src="{% static 'js/demo/render.highlight.js' %}"></script>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- BEGIN breadcrumb -->
|
|
<ol class="breadcrumb float-xl-end">
|
|
<li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
|
|
<li class="breadcrumb-item"><a href="javascript:;">Form Stuff</a></li>
|
|
<li class="breadcrumb-item active">Form WYSIWYG</li>
|
|
</ol>
|
|
<!-- END breadcrumb -->
|
|
<!-- BEGIN page-header -->
|
|
<h1 class="page-header">Form WYSIWYG <small>header small text goes here...</small></h1>
|
|
<!-- END page-header -->
|
|
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
Quill Editor
|
|
<b class="badge d-inline-flex align-items-center p-0 ms-1">
|
|
<i class="fa fa-circle fa-fw fs-6px text-teal me-1"></i>
|
|
<i class="fa fa-circle fa-fw fs-6px text-warning me-1"></i>
|
|
<i class="fa fa-circle fa-fw fs-6px text-danger"></i>
|
|
</b>
|
|
</h4>
|
|
<div class="panel-heading-btn">
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body p-0">
|
|
<form class="border-0" action="/" name="wysihtml5" method="POST">
|
|
<div id="editor1" class="h-200px">
|
|
<h3>Welcome to Quill Editor</h3>
|
|
|
|
<p>Quill is a powerful, lightweight, and customizable <strong>rich text editor</strong>.</p>
|
|
<ul>
|
|
<li><strong>Fast & Lightweight</strong></li>
|
|
<li>Supports <em>bold, italic, links, and more</em></li>
|
|
<li>Easy to integrate & extend</li>
|
|
</ul>
|
|
|
|
<blockquote>“Quill makes rich text editing simple and powerful.”</blockquote>
|
|
|
|
<p>Try editing this content right inside the Quill editor!</p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- BEGIN hljs-wrapper -->
|
|
<div class="hljs-wrapper">
|
|
<pre><code class="html" data-url="{% static 'data/form-wysiwyg/code-1.json' %}"></code></pre>
|
|
</div>
|
|
<!-- END hljs-wrapper -->
|
|
</div>
|
|
<!-- END panel -->
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
Bootstrap WYSIHTML5
|
|
|
|
<b class="badge d-inline-flex align-items-center p-0 ms-1">
|
|
<i class="fa fa-circle fa-fw fs-6px text-orange me-1"></i>
|
|
<i class="fa fa-circle fa-fw fs-6px text-red me-1"></i>
|
|
<i class="fa fa-circle fa-fw fs-6px text-pink"></i>
|
|
</b>
|
|
</h4>
|
|
<div class="panel-heading-btn">
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body p-0">
|
|
<form action="/" name="wysihtml5" method="POST">
|
|
<textarea class="textarea form-control" id="wysihtml5" placeholder="Enter text ..." rows="12"></textarea>
|
|
</form>
|
|
</div>
|
|
<!-- BEGIN hljs-wrapper -->
|
|
<div class="hljs-wrapper">
|
|
<pre><code class="html" data-url="{% static 'data/form-wysiwyg/code-2.json' %}"></code></pre>
|
|
</div>
|
|
<!-- END hljs-wrapper -->
|
|
</div>
|
|
<!-- END panel -->
|
|
{% endblock %} |