From 5420ba37c5d5037617d6daab03272a5146af263c Mon Sep 17 00:00:00 2001
From: Jonas Kohl
Date: Sat, 12 Oct 2024 19:56:49 +0200
Subject: Add rich text editor to New topic page
---
src/application/views/form_addpost.php | 57 ---------------------------------
src/application/views/form_newtopic.php | 24 +++++++++++++-
src/application/views/template_end.php | 57 +++++++++++++++++++++++++++++++++
3 files changed, 80 insertions(+), 58 deletions(-)
(limited to 'src/application')
diff --git a/src/application/views/form_addpost.php b/src/application/views/form_addpost.php
index 9e617d9..b2fb2f2 100644
--- a/src/application/views/form_addpost.php
+++ b/src/application/views/form_addpost.php
@@ -51,60 +51,3 @@ if (($_formError = RequestUtils::getAndClearFormError("addpost")) !== null) {
</div>
<button type="submit" class="btn btn-success"><?= __("Post reply") ?> <span class="fa fa-send" aria-hidden="true"></span></button>
</form>
-
-<script type="text/javascript">
- $(function() {
- function insertAroundSelection(textarea, before, after) {
- var start = textarea.selectionStart;
- var end = textarea.selectionEnd;
- var text = textarea.value;
- var pre = text.substring(0, start);
- var inner = text.substring(start, end);
- var post = text.substring(end);
- start += before.length;
- end += before.length;
- text = pre + before + inner + after + post;
- textarea.value = text;
- textarea.focus();
- textarea.selectionStart = start;
- textarea.selectionEnd = end;
- }
-
- function getTextarea(btn) {
- return $($(btn).attr("data-area"))[0];
- }
-
- var commands = {
- bold: function(textarea) {
- insertAroundSelection(textarea, "[b]", "[/b]");
- },
- italic: function(textarea) {
- insertAroundSelection(textarea, "[i]", "[/i]");
- },
- underline: function(textarea) {
- insertAroundSelection(textarea, "[u]", "[/u]");
- },
- strikethrough: function(textarea) {
- insertAroundSelection(textarea, "[s]", "[/s]");
- },
- sup: function(textarea) {
- insertAroundSelection(textarea, "[^]", "[/^]");
- },
- sub: function(textarea) {
- insertAroundSelection(textarea, "[_]", "[/_]");
- },
- quote: function(textarea) {
- insertAroundSelection(textarea, "> ", "");
- },
- spoiler: function(textarea) {
- insertAroundSelection(textarea, "[spoiler]", "[/spoiler]");
- }
- }
-
- $("button[data-editor-command]").attr("data-toggle", "tooltip").attr("data-placement", "bottom").click(function() {
- var command = $(this).attr("data-editor-command");
- var textarea = getTextarea(this);
- commands[command](textarea);
- }).tooltip();
- });
-</script>
diff --git a/src/application/views/form_newtopic.php b/src/application/views/form_newtopic.php
index d1d7e44..e7050c7 100644
--- a/src/application/views/form_newtopic.php
+++ b/src/application/views/form_newtopic.php
@@ -25,7 +25,29 @@ if (($_formError = RequestUtils::getAndClearFormError("newtopic")) !== null) {
</div>
<div class="form-group">
<label for="i_message"><?= __("Message:") ?></label>
- <textarea class="form-control" id="i_message" name="message" required rows="12" cols="60" style="resize:vertical;max-height:499px"><?= htmlentities($lastForm["message"] ?? "") ?></textarea>
+ <div class="panel panel-default">
+ <div class="panel-heading" style="padding:4px">
+ <div class="btn-toolbar" role="toolbar">
+ <div class="btn-group" role="group">
+ <button data-area="#i_message" title="<?= __("Bold") ?>" data-editor-command="bold" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-bold"></i></button>
+ <button data-area="#i_message" title="<?= __("Italic") ?>" data-editor-command="italic" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-italic"></i></button>
+ <button data-area="#i_message" title="<?= __("Underlined") ?>" data-editor-command="underline" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-underline"></i></button>
+ <button data-area="#i_message" title="<?= __("Strikethrough") ?>" data-editor-command="strikethrough" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-strikethrough"></i></button>
+ </div>
+ <div class="btn-group" role="group">
+ <button data-area="#i_message" title="<?= __("Superscript") ?>" data-editor-command="sup" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-superscript"></i></button>
+ <button data-area="#i_message" title="<?= __("Subscript") ?>" data-editor-command="sub" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-subscript"></i></button>
+ </div>
+ <div class="btn-group" role="group">
+ <button data-area="#i_message" title="<?= __("Quote") ?>" data-editor-command="quote" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-quote-left"></i></button>
+ <button data-area="#i_message" title="<?= __("Spoiler") ?>" data-editor-command="spoiler" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-eye"></i></button>
+ </div>
+ </div>
+ </div>
+ <div class="panel-body" style="padding:0">
+ <textarea class="form-control" id="i_message" name="message" required rows="12" cols="60" style="resize:vertical;max-height:499px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;margin:-1px;width:calc(100% + 2px)"><?= htmlentities($lastForm["message"] ?? "") ?></textarea>
+ </div>
+ </div>
</div>
<div class="form-group">
<label for="i_files"><?= __("Attachments: <small>(max. %max_attachment_count% files, max. %max_attachment_size% MiB each)</small>", [
diff --git a/src/application/views/template_end.php b/src/application/views/template_end.php
index 9207170..b162def 100644
--- a/src/application/views/template_end.php
+++ b/src/application/views/template_end.php
@@ -43,6 +43,63 @@
</div>
</footer>
+<script type="text/javascript">
+ $(function() {
+ function insertAroundSelection(textarea, before, after) {
+ var start = textarea.selectionStart;
+ var end = textarea.selectionEnd;
+ var text = textarea.value;
+ var pre = text.substring(0, start);
+ var inner = text.substring(start, end);
+ var post = text.substring(end);
+ start += before.length;
+ end += before.length;
+ text = pre + before + inner + after + post;
+ textarea.value = text;
+ textarea.focus();
+ textarea.selectionStart = start;
+ textarea.selectionEnd = end;
+ }
+
+ function getTextarea(btn) {
+ return $($(btn).attr("data-area"))[0];
+ }
+
+ var commands = {
+ bold: function(textarea) {
+ insertAroundSelection(textarea, "[b]", "[/b]");
+ },
+ italic: function(textarea) {
+ insertAroundSelection(textarea, "[i]", "[/i]");
+ },
+ underline: function(textarea) {
+ insertAroundSelection(textarea, "[u]", "[/u]");
+ },
+ strikethrough: function(textarea) {
+ insertAroundSelection(textarea, "[s]", "[/s]");
+ },
+ sup: function(textarea) {
+ insertAroundSelection(textarea, "[^]", "[/^]");
+ },
+ sub: function(textarea) {
+ insertAroundSelection(textarea, "[_]", "[/_]");
+ },
+ quote: function(textarea) {
+ insertAroundSelection(textarea, "> ", "");
+ },
+ spoiler: function(textarea) {
+ insertAroundSelection(textarea, "[spoiler]", "[/spoiler]");
+ }
+ }
+
+ $("button[data-editor-command]").attr("data-toggle", "tooltip").attr("data-placement", "bottom").click(function() {
+ var command = $(this).attr("data-editor-command");
+ var textarea = getTextarea(this);
+ commands[command](textarea);
+ }).tooltip();
+ });
+</script>
+
<script>
$(function() {
var _messages = <?= json_encode([
--
cgit v1.2.3