TinyMCE Installation

r23 · Beitrag von **r23** » 06.11.2023, 03:31

Hallo,

seit ein paar Tagen ärgere ich mich mit der TinyMCE Installation herum. Bei der Produkterfassung funktioniert die Tabnavigation nicht. Alle gefundene Anleitungen im Web helfen nicht weiter.

Ergo ich stelle um auf TinyMCE mit jQuery

Hier darf man basalen *freu* https://www.tiny.cloud/docs/tinymce/6/jquery-pm/

8<--
Gerne helfe ich Ihnen bei der Installation von TinyMCE mit jQuery.

Um TinyMCE mit jQuery zu verwenden, müssen Sie einige Schritte befolgen, die auf der Webseite [TinyMCE jQuery integration quick start guide](^4^) beschrieben sind. Hier ist eine kurze Zusammenfassung:

- Sie müssen jQuery, TinyMCE, die TinyMCE jQuery Integration und die Bibliothek fs-extra von NPM installieren. Dazu können Sie den folgenden Befehl in Ihrem Terminal ausführen:

Code: Alles auswählen

npm install --save jquery tinymce @tinymce/tinymce-jquery fs-extra

- Sie müssen ein postinstall-Skript einrichten, um die Pakete in ein öffentliches Verzeichnis zu kopieren, wann immer eine neue Abhängigkeit installiert wird. Dazu können Sie die folgenden Dateien erstellen oder bearbeiten:

Code: Alles auswählen

// postinstall.js
const fse = require('fs-extra');
const path = require('path');

const nodeModulesDir = path.join(__dirname, 'node_modules');
const publicDir = path.join(__dirname, 'public');

fse.emptyDirSync(path.join(publicDir, 'jquery'));
fse.emptyDirSync(path.join(publicDir, 'tinymce'));
fse.emptyDirSync(path.join(publicDir, 'tinymce-jquery'));

fse.copySync(path.join(nodeModulesDir, 'jquery', 'dist'), path.join(publicDir, 'jquery'), { overwrite: true });
fse.copySync(path.join(nodeModulesDir, 'tinymce'), path.join(publicDir, 'tinymce'), { overwrite: true });
fse.copySync(path.join(nodeModulesDir, '@tinymce', 'tinymce-jquery', 'dist'), path.join(publicDir, 'tinymce-jquery'), { overwrite: true });

Code: Alles auswählen

```json
// package.json
{
  // ... snip ...
  "scripts": {
    "postinstall": "node ./postinstall.js"
  }
}

- Sie müssen das postinstall-Skript ausführen, um die Pakete in Ihr öffentliches Verzeichnis zu kopieren. Dazu können Sie den folgenden Befehl in Ihrem Terminal ausführen:

Code: Alles auswählen

npm run postinstall

- Sie müssen eine HTML-Datei öffnen und die Quellskripte hinzufügen, die auf Ihr öffentliches Verzeichnis verweisen, zum Beispiel:

Code: Alles auswählen

<script src="/public/jquery/jquery.min.js"></script>
<script src="/public/tinymce/tinymce.min.js"></script>
<script src="/public/tinymce-jquery/tinymce-jquery.min.js"></script>

- Sie müssen einen Initialisierungspunkt für TinyMCE hinzufügen, zum Beispiel:

Code: Alles auswählen

<div>
  <textarea id="tiny"></textarea>
</div>

- Sie müssen das TinyMCE jQuery init-Skript hinzufügen. Der TinyMCE-Selektor wird im jQuery-Präfix definiert, und alle anderen Einstellungen werden im Objekt angegeben, das an die tinymce-Methode übergeben wird, zum Beispiel:

Code: Alles auswählen

<script>
  $('textarea#tiny').tinymce({
    height: 500,
    /* other settings... */
  });
</script>

Ich hoffe, dass diese Anleitung Ihnen hilft, TinyMCE mit jQuery zu installieren und zu verwenden. Wenn Sie weitere Fragen haben oder Hilfe benötigen, können Sie sich gerne wieder an mich wenden.

Quelle: Unterhaltung mit Bing, 6.11.2023
(1) TinyMCE jQuery integration quick start guide. https://www.tiny.cloud/docs/tinymce/6/jquery-pm/.
(2) TinyMCE | 04. Advanced Install. https://www.tiny.cloud/docs-4x/general- ... d-install/.
(3) . https://bing.com/search?q=tinymce+jquery+installation.
(4) jQuery integration | Docs | TinyMCE. https://www.tiny.cloud/docs/integrations/jquery/.
(5) django-tinymce · PyPI. https://pypi.org/project/django-tinymce/.
(6) undefined. https://github.com/tinymce/tinymce-jquery.
(7) undefined. https://www.tiny.cloud/docs-3x/referenc ... ry_Plugin/.
(8) undefined. https://code.jquery.com/.
(9) undefined. https://cdn.tiny.cloud/1/no-api-key/tin ... mce.min.js.
(10) undefined. https://cdn.tiny.cloud/1/no-api-key/tin ... mce.min.js.
(11) undefined. https://code.jquery.com/jquery-3.4.1.min.js.

r23 · Beitrag von **r23** » 06.11.2023, 03:38

Hallo, das ist Bing. Ich kann Ihnen helfen, Ihre Frage zu beantworten.

Es ist möglich, dass Sie einen Konflikt zwischen TinyMCE und jQuery haben, der Ihre Navigation beeinträchtigt. Dies kann passieren, wenn Sie mehrere Versionen von jQuery oder TinyMCE laden oder wenn Sie die Skripte in der falschen Reihenfolge laden. Um dieses Problem zu vermeiden, können Sie einige Schritte befolgen:

- Verwenden Sie den Modus "none" für TinyMCE, damit TinyMCE nicht automatisch die Textbereiche übernimmt. Verwenden Sie den Modus "textareas" kann zu Problemen für alle versteckten Textbereiche führen, da sie nicht richtig initialisiert werden. (Zum Beispiel ist der Textbereich auf dem Tab 2 zunächst versteckt.)¹
- Laden Sie das TinyMCE-Skript vor dem Aufruf von tinymce.init. Sie können das Skript entweder im <head> oder am Anfang des <body> einfügen, aber nicht am Ende. Zum Beispiel:

Code: Alles auswählen

<head>
  <script nonce="<?php echo NONCE; ?>" src="js/tinymce/tinymce.min.js"></script>
</head>
<body>
  <!-- Ihre Navigation hier -->
  <textarea id="description<?php echo $aLanguages[$i]['id']; ?>"></textarea>
  <script nonce="<?php echo NONCE; ?>">
    tinymce.init({
      mode: "none",
      selector: 'textarea#description<?php echo $aLanguages[$i]['id']; ?>',
      language: '<?php echo LANG; ?>',
      promotion: false
    });
  </script>
</body>

- Laden Sie das jQuery-Skript nach dem TinyMCE-Skript, aber vor dem Aufruf von jQuery-Code. Sie können auch jQuery.noConflict() verwenden, um einen Alias für jQuery zu erstellen, der nicht mit dem $-Symbol kollidiert. Zum Beispiel:

Code: Alles auswählen

<head>
  <script nonce="<?php echo NONCE; ?>" src="js/tinymce/tinymce.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    var $j = jQuery.noConflict();
  </script>
</head>
<body>
  <!-- Ihre Navigation hier -->
  <textarea id="description<?php echo $aLanguages[$i]['id']; ?>"></textarea>
  <script nonce="<?php echo NONCE; ?>">
    tinymce.init({
      mode: "none",
      selector: 'textarea#description<?php echo $aLanguages[$i]['id']; ?>',
      language: '<?php echo LANG; ?>',
      promotion: false
    });
  </script>
  <script>
    $j(document).ready(function() {
      // Ihr jQuery-Code hier
    });
  </script>
</body>

- Wenn Sie die jQuery-Version von TinyMCE verwenden möchten, müssen Sie sowohl das TinyMCE-Hauptskript (tinymce.min.js) als auch das jQuery-Plugin (jquery.tinymce.min.js) laden, um es zu verwenden. Außerdem müssen Sie die jQuery-Syntax verwenden, um den Editor zu initialisieren. Zum Beispiel:

Code: Alles auswählen

<head>
  <script nonce="<?php echo NONCE; ?>" src="js/tinymce/tinymce.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script nonce="<?php echo NONCE; ?>" src="js/tinymce/jquery.tinymce.min.js"></script>
  <script>
    var $j = jQuery.noConflict();
  </script>
</head>
<body>
  <!-- Ihre Navigation hier -->
  <textarea id="description<?php echo $aLanguages[$i]['id']; ?>"></textarea>
  <script nonce="<?php echo NONCE; ?>">
    $j(document).ready(function() {
      $j('textarea#description<?php echo $aLanguages[$i]['id']; ?>').tinymce({
        mode: "none",
        language: '<?php echo LANG; ?>',
        promotion: false
      });
    });
  </script>
</body>

Ich hoffe, dass diese Schritte Ihnen helfen, den Konflikt zwischen TinyMCE und jQuery zu lösen und Ihre Navigation zu reparieren. Wenn Sie weitere Informationen oder Hilfe benötigen, können Sie sich die folgenden Webseiten ansehen, die sich mit ähnlichen Fragen befassen:

- [Problem with tinymce editor when navigating through tabs](^1^)
- [Implementing jquery.noconflict() in MVC4 with TinyMCE](^2^)
- [TinyMCE jQuery integration quick start guide](^3^)

Ich wünsche Ihnen viel Erfolg bei Ihrem Projekt!

Quelle: Unterhaltung mit Bing, 6.11.2023
(1) problem with tinymce editor when navigating through tabs. https://stackoverflow.com/questions/692 ... rough-tabs.
(2) problem with tinymce editor when navigating through tabs. https://stackoverflow.com/questions/692 ... rough-tabs.
(3) Implementing jquery.noconflict () in MVC4 with TinyMCE. https://stackoverflow.com/questions/214 ... th-tinymce.
(4) TinyMCE | tinymce.ui.TabPanel. https://www.tiny.cloud/docs-4x/api/tiny ... .tabpanel/.

TinyMCE Installation

TinyMCE Installation

Re: TinyMCE Installation