web-dev-qa-db-fra.com

Quelles sont les dépendances JS de l'éditeur de frontend Joomla?

Le problème

J'essaie d'implémenter un éditeur de frontend fonctionnel dans mon modèle Joomla, qui a été développé en interne par ma société. Dans la plupart des cas, cela fonctionne: un utilisateur peut modifier le texte de base des articles et enregistrer son travail. Cependant, aucun des boutons editor-xtd ne fonctionne correctement (article, image, saut de page, insertion supplémentaire). Plus précisément, ils accéderont à une nouvelle fenêtre du navigateur au lieu de s’ouvrir en tant que fenêtre contextuelle modale, ce qui signifie qu’ils ne pourront rien insérer dans le contenu en cours de modification, car ils recherchent une fenêtre parente qui n’existe plus.

La question

Je dois déterminer quelles parties des fichiers Joomla principaux sont manquantes dans notre modèle afin que nous puissions les réintégrer et permettre aux utilisateurs d'ajouter des images de l'éditeur frontend. En d'autres termes, quelles sont les dépendances de l'éditeur frontal?

Arrière-plan du modèle

Le modèle utilise Joomla version 3.4.6; nous utilisons l’éditeur frontend TinyMCE (tous les autres éditeurs ont été désactivés dans le gestionnaire de plug-in). Le modèle a été développé en interne et une grande partie des fonctionnalités de base de Joomla ont été délibérément supprimées. Par exemple, cette ligne:

<jdoc:include type="head" />

est omis en faveur de l'écriture de notre propre contenu tête et paramètres. C'est loin d'être idéal, mais ce n'est pas quelque chose que je suis libre de changer. J'ai vérifié que si je modifiais notre modèle pour utiliser Protostar ou Beez3, l'éditeur frontal fonctionnait parfaitement, y compris les boutons editor-xtd, ainsi qu'un menu contextuel modal permettant d'ajouter avec succès des images à des articles. Ma théorie principale sur le problème est que nous avons retiré quelque chose du noyau de Joomla dont l’éditeur de front-end a besoin.

Ce que j'ai essayé jusqu'à présent

Nous avons commencé avec l'éditeur frontal ne fonctionnant pas du tout. L'ajout de ces scripts à mon fichier d'index modèle a amélioré les fonctionnalités de l'éditeur :

  • media/system/js/core.js (active les boutons de sauvegarde/annulation de l'éditeur)
  • media/editors/tinymce/tinymce.min.js (active le bouton "Basculer l'éditeur")

L’ajout de ces scripts à mon modèle n’a apparemment aucun impact sur la fonctionnalité cassée de l’éditeur-xtd (c’est-à-dire que je ne peux toujours pas ajouter une image à un article dans l'éditeur de frontend):

  • media/system/js/mootools-core.js
  • media/system/js/mootools-more.js
  • media/system/js/mootree.js
  • media/system/js/frontediting.js
  • media/system/js/modal.js

Autres recherches

n problème similaire à ce que j'ai est décrit ici, mais date de 2010 et n'a pas de solution spécifiée.

Cette question suggère que l'erreur provient de 'l'éditeur' et non de mootools, mais j'utilise TinyMCE, et donc la 'solution' présentée ici n'est d'aucune aide.

Cette question explique un peu plus le fonctionnement de la méthode jInsertEditorText mais ne me permet pas de savoir plus quels fichiers me manquent.

A quoi ressemble le mode de téléchargement des images à l'aide d'un modèle protostar

Working image upload modal, using protostar

À quoi ressemble le mode de téléchargement des images à l'aide de notre modèle

Broken image upload modal, loads as new window

joomla-3.4javascriptfront-endeditortinymce
5
Candlejack

Quelles sont les dépendances JS de l'éditeur de frontend Joomla?

Réponse courte:

L'éditeur frontal dépend des fichiers JS chargés par le fichier principal Joomla.

Explication:

Ce code:

<jdoc:include type="head" />

utilise ce fichier:

[root]/libraries/joomla/document/html/renderer/head.php

Environ à peu près la ligne 171 est la suivante:

// Generate script file links
        foreach ($document->_scripts as $strSrc => $strAttr)
        {
            $buffer .= $tab . '<script src="' . $strSrc . '"';
            $defaultMimes = array(
                'text/javascript', 'application/javascript', 'text/x-javascript', 'application/x-javascript'
            );

            /// more code ...

Cette boucle foreach récupère et charge divers fichiers JavaScript dans le <head> De votre document. L'ajout d'une instruction echo produira les noms de tous ces fichiers JS à titre de référence:

// Generate script file links
        foreach ($document->_scripts as $strSrc => $strAttr)
        {
            echo($strSrc . '<br/>'); // ADD THIS LINE
            $buffer .= $tab . '<script src="' . $strSrc . '"';
            // etc

Cela vous donne une assez bonne idée de ce que JS pourrait manquer à votre propre modèle, s'il en est un qui omet le contenu principal de Joomla <head>. Voici un exemple de ce que ma configuration spécifique de Joomla 3.4 a généré (votre configuration peut varier):

Screenshot of echo statement from joomla head.php, showing imported scripts

Comment cela m'a aidé à résoudre le problème de conflit JavaScript

J'ai constaté que l'éditeur frontal ne fonctionnait tout simplement pas comme je le voulais si le noyau Joomla <head> N'était pas présent, peu importe ce que j'ai essayé (par exemple, importer manuellement les fichiers que je croyais manquants). Si j'ai inclus le Joomla <head> En utilisant <jdoc:include type="head" />, Cela a causé des conflits sans fin avec notre propre modèle JS (que nous chargeons d'ailleurs au bas du <body> Et non dans le <head>).

Solution: vérifiez si l'utilisateur est en mode 'édition' et chargez-le dans la tête de Joomla ou notre modèle JS en fonction du résultat.

J'ai ajouté ceci PHP à mon code personnalisé, quelque part vers le haut:

$app = JFactory::getApplication();
$layout = $app->input->getCmd('layout', '');

$layout Renverra la chaîne "edit" si l'utilisateur est actuellement dans la vue de l'éditeur frontal.

Vers le bas de mon code <head>, J'ai ajouté ceci:

<?php
        if($layout == "edit" ){
            echo('<jdoc:include type="head" />');
        }
?>

Vers le bas de mon <body> HTML, j'ai ajouté ceci:

<?php
    if($layout != "edit" ) {
        echo('<script src="templates/myTemplate/myScript.js"></script>');
    }
?>

Cette solution donne exactement ce dont j'avais besoin, à savoir que l'éditeur de front-end autorise désormais toutes les éditions standard, sans entrer en conflit avec le code d'un modèle personnalisé. (Chaque fois que vous entrez/sortez du mode 'édition', la page est actualisée, ce qui permet à la logique PHP du fichier index.php de s'exécuter à nouveau.)

0
Candlejack

Si vous souhaitez ajouter à l'éditeur des fonctionnalités supplémentaires, telles que des images, etc., il ne suffit pas d'ajouter les fichiers js.

Personnellement, je recommanderais d'utiliser la méthode native d'affichage de l'éditeur de Joomla, cela vous donnera les meilleurs résultats et toutes les fonctionnalités que vous souhaitez. Il devrait également fonctionner avec votre éditeur actuel par défaut.

Alors:

1) vous avez besoin d'une mise en page pour l'édition que je suppose que vous avez.

2) vous devez charger l'éditeur dans votre mise en page, en utilisant le code suivant.

`<?php`
$editor =& JFactory::getEditor();
$params = array(
    'smilies'=> '0' ,
    'style'  => '1' ,  
    'layer'  => '0' , 
    'table'  => '0' ,
    'clear_entities'=>'0'
);
echo $editor->display('field_name','$field_content','600', '400', '20', '20', true, null, null, null, $params );

?>

$ field_content devrait être le contenu de votre article, vous devrez l'interroger à partir de la base de données. Si vous utilisez une présentation pour la modifier, il est assez facile d'interroger les données de votre modèle et de définir une variable accessible à partir de la présentation, comme $ this-> content.

Enveloppez-le dans un formulaire Nice avec une tâche définie dans la fonction de votre contrôleur pour la sauvegarde des données et le boom ... faites une danse joyeuse.

2
Terry Carter