HTML-Editor - simple Methode

Wenn Sie Hubzilla einfach nur als CMS benutzen möchten, Sie es aber bequemer haben möchten und HTML-Inhalte einfach “runterschreiben” wollen, sind die Bordmittel von Hubzilla im Webseiten- und Blockeditor nicht optimal.

Wählen Sie HTML als Inhaltstyp, verschwinden sogar die Icons unten am Editor, die ja speziell für BBcode gedacht sind. Den gesamten HTML-Content müssen Sie “zu Fuß” codieren.

Solange Sie nur ein wenig Textformatierung nutzen möchten, also z.B. fette oder kursive Schrift und ab und an einmal einen Link einfügen, dann ist es zwar unbequem, aber trotzdem noch machbar. Sie müssen ja nur ein paar Tags hinzufügen.

Allerdings könnten Sie dann auch den Inhaltstyp BBcode oder Markdown verwenden, wobei bei BBcode immerhin noch die Helfer aus der unteren Toolbar zur Verfügung stehen und der Editor selbst nach dem Tippen einer öffnenden Tag-Klammer (“[”) Ergänzungsvorschläge direkt im Editor angezeigt werden.

Für den Inhaltstyp HTML haben Sie solche Hilfen nicht. Es lässt sich aber, anstatt nun einen externen HTML-Editor zu nutzen (die auch nicht immer optimal sind), einfach ein Editor mit auf die App-Seite platzieren, wo Sie Ihre Inhalte schreiben und anschließend den Quelltext in das eigentliche Editorfeld kopieren.

Dafür bietet sich z.B. TinyMCE in der GPL-Version an. Die Distribution kann man auf der TinyMCE-Seite herunterladen: Get TinyMCE’s WYSIWYG editor (die Free-Version herunterladen).

Die Zip-Datei entpacken Sie auf Ihrem Rechner. Es wird ein Verzeichnis “tinymce” erzeugt, welcher die Datei CHANGELOG.md und ein Unterverzeichnis “js” enthält. In diesem finden Sie wiederum ein Unterverzeichnis, welches wiederum “tinymce” heißt. Und genau dieses Verzeichnis kopieren Sie in das Wurzelverzeichnis der Cloud Ihres Hubzilla-Kanals. (Sie können auch das entpackte Archiv einfach so dort hin kopieren, das macht aber einen fehleranfälligen längeren Pfad im Editor-Block erforderlich, den Sie sich auf diese Weise ersparen können.)

Jetzt müssen Sie nur noch einen Editor-Block “tmce-block” erzeugen:

<!--  In der folgenden Zeile die URL der Cloud eintragen!  -->

<script src="<URL_DES_HUB>/cloud/<KANALNAME>>/tinymce/tinymce.min.js" referrerpolicy="origin" crossorigin="anonymous"></script>

<script>
  const useDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
  const isSmallScreen = window.matchMedia('(max-width: 1023.5px)').matches;

  tinymce.init({
  selector: '#mytextarea',
  license_key: 'gpl',
  plugins: 'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap quickbars emoticons accordion',
  editimage_cors_hosts: ['picsum.photos'],
  menubar: 'file edit view insert format tools table help',
  toolbar: "undo redo | accordion accordionremove | blocks fontfamily fontsize | bold italic underline strikethrough | align numlist bullist | link image | table media | lineheight outdent indent| forecolor backcolor removeformat | charmap emoticons | code fullscreen preview | save print | pagebreak anchor codesample | ltr rtl",
  autosave_ask_before_unload: true,
  autosave_interval: '30s',
  autosave_prefix: '{path}{query}-{id}-',
  autosave_restore_when_empty: false,
  autosave_retention: '2m',
  image_advtab: true,
  link_list: [
    { title: 'My page 1', value: 'https://www.tiny.cloud' },
    { title: 'My page 2', value: 'http://www.moxiecode.com' }
  ],
  image_list: [
    { title: 'My page 1', value: 'https://www.tiny.cloud' },
    { title: 'My page 2', value: 'http://www.moxiecode.com' }
  ],
  image_class_list: [
    { title: 'None', value: '' },
    { title: 'Some class', value: 'class-name' }
  ],
  importcss_append: true,
  file_picker_callback: (callback, value, meta) => {
    /* Provide file and text for the link dialog */
    if (meta.filetype === 'file') {
      callback('hhttps://hubzilla.org/cloud/info/website_images_small/hubzilla-logo-roland-1.png', { text: 'My text' });
    }

    /* Provide image and alt text for the image dialog */
    if (meta.filetype === 'image') {
      callback('https://hubzilla.org/cloud/info/website_images_small/hubzilla-logo-roland-1.png', { alt: 'My alt text' });
    }

    /* Provide alternative source and posted for the media dialog */
    if (meta.filetype === 'media') {
      callback('movie.mp4', { source2: 'alt.ogg', poster: 'https://hubzilla.org/cloud/info/website_images_small/S%20Hubzilla%20Connect.png' });
    }
  },
  height: 600,
  image_caption: true,
  quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
  noneditable_class: 'mceNonEditable',
  toolbar_mode: 'sliding',
  contextmenu: 'link image table',
  skin: useDarkMode ? 'oxide-dark' : 'oxide',
  content_css: useDarkMode ? 'dark' : 'default',
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});
</script>

<style>
/* For other boilerplate styles, see: https://www.tiny.cloud/docs/tinymce/8/editor-content-css/ */
/*
* For rendering images inserted using the image plugin.
* Includes image captions using the HTML5 figure element.
*/

figure.image {
  display: inline-block;
  border: 1px solid gray;
  margin: 0 2px 0 1px;
  background: #f5f2f0;
}

figure.align-left {
  float: left;
}

figure.align-right {
  float: right;
}

figure.image img {
  margin: 8px 8px 0 8px;
}

figure.image figcaption {
  margin: 6px 8px 6px 8px;
  text-align: center;
}

/*
 Alignment using classes rather than inline styles
 check out the "formats" option
*/

img.align-left {
  float: left;
}

img.align-right {
  float: right;
}

/* Basic styles for Table of Contents plugin (tableofcontents) */
.mce-toc {
  border: 1px solid gray;
}

.mce-toc h2 {
  margin: 4px;
}

.mce-toc li {
  list-style-type: none;
}
</style>

<form method="post">
  <textarea id="mytextarea" style="visibility: hidden;"></textarea>
</form>

Ist der Block gespeichert, öffnen Sie den PDL-Editor, wählen das Modul “editwebpage” und fügen Sie den Block unterhalb des Inhaltsbereichs ein. Dann mit “APPLY” fixieren. Ebenso fügen Sie diesen Block im Modul “editblock” ein, und künftig erscheint bei Nutzung des Webpage- und Block-Editors unterhalb des hubzilla-eigenen Editors zusätzlich der TinyMCE.

Sie können nun Im TinyMCE Ihren Inhalt im WYSIWYG-Modus gestalten. Dann schalten Sie auf die Code-Ansicht kopieren den nun angezeigten HTML-Code und fügen diesen in den Hubzilla Editorblock ein.