Dotclear

Vous n'êtes pas identifié(e).

Annonce

13 février 2024 Sortie de Dotclear 2.29

#1 2019-01-15 10:35:10

JClaude
Membre
Lieu : Lille
Inscription : 2008-05-22
Site Web

Comment ajouter un bouton liste sur l’éditeur WIKI

Bonjour à tous,
J’ai pris l’habitude d’utiliser l'éditeur wiki en mode HTML (entre balises ///html…///) depuis que j’ai passé mes templates sur Bootstrap.

Les codes Bootstrap sont particuliers au niveau des class et de leur syntaxe. Marre de parcourir leur site afin de copier-coller les bonnes lignes de code (figure, tableau responsive, list-group,  embed…). Si j’en connais par coeur un certain nombre, c’est toujours perturbant et une perte de temps lors de l’écriture du post.

L’éditeur XHTML présente une superbe interface notamment la fonction plein écran en mode code source mais malheureusement ne propose pas la désactivation des corrections automatiques et le formatage du code. Aussi ne me convient-il pas et je l’utilise très peu. Mais de toute manière ma demande serait la même.

Je recherche à réaliser un plugin qui ajouterait un bouton liste pour insérer dans la zone de texte du code bootstrap (ou autre).
Je ne connais pas l’interface wiki au niveau fonctionnel et ne sais pas trop par où commencer ni même vers quel plugin existant je pourrais me rapprocher. Pourriez-vous m’aider?
Je vous remercie par avance et bonne année à tous.

Hors ligne

#2 2019-01-16 10:17:04

Philippe
Stagiaire
Lieu : Toulon
Inscription : 2004-06-13
Site Web

Re : Comment ajouter un bouton liste sur l’éditeur WIKI

Bonjour

Pas certain que ce soit tout à fait à jour, mais voici une première piste

N'hésite pas à revenir si quelque chose coince ;)

Hors ligne

#3 2019-01-17 15:15:13

JClaude
Membre
Lieu : Lille
Inscription : 2008-05-22
Site Web

Re : Comment ajouter un bouton liste sur l’éditeur WIKI

Bonjour Philippe,

Merci pour ton message et bien vu pour la solution.
J’ai un peu bricolé pour obtenir l’affichage du bouton et une fois réussi, le reste fut facile à terminer.

J’ai finalement abandonné l’idée d’une liste laquelle serait devenue une usine à gaz (je me connais) pour ne privilégier que les codes les plus importants (4 boutons) à savoir le tableau responsive, la list group et l’embed responsive pour bootstrap 3, enfin le code image html 5 idem à celui fourni via l’éditeur xhtml.

copie éditeur wiki avec les boutons sur https://nsa40.casimages.com/img/2019/01 … 932468.jpg

Je laisse ci-dessous le code du plugin pour ceux qui pourraient être intéressés.

Créer un dossier pour le plugin, dans mon cas je l’ai nommé MyWikiBootstrap, avec les fichiers _define.php et  _admin.php,
Créer un sous-dossier img pour les boutons au format png ou jpeg 16x16px,
Créer un sous-dossier js avec le fichier  post.js

Contenu du fichier _define.php

<?php
$this->registerModule(
	/* Name */        "MyWikiBootstrap",
	/* Description*/  "Insert code wiki Bootstrap",
	/* Author */			"JCB",
	/* Version */			'1.0',
	/* Permissions */	'contentadmin'
);
?>

Contenu du fichier _admin.php

$core->addBehavior('adminPostHeaders',array('MyWikiBootstrapBehaviors','postHeaders'));

class MyWikiBootstrapBehaviors
{
	public static function postHeaders()
	{
		return
		'<script type="text/javascript" src="index.php?pf=MyWikiBootstrap/js/post.js"></script>'.
		'<script type="text/javascript">'."\n".
		"//<![CDATA[\n".
		dcPage::jsVar('jsToolBar.prototype.elements.MyWikiBootstrap.title','MyWikiBootstrap').
		"\n//]]>\n".
		"</script>\n";
	}
}
?>

Contenu du fichier post.js

$(function() {
	$('#edit-entry').onetabload(function() {
	});
});

jsToolBar.prototype.elements.BootstrapTable = 
{
	type: 'button',
	title: 'BootstrapTable',
	context: 'post',
	icon: 'index.php?pf=MyWikiBootstrap/img/icon-tableau.png',
  fn: 
  {
    wiki: function() 
    {
    /* Edite le code bootstrap 3 tableau responsive*/
      this.encloseSelection('','',function(str) 
      {   
        if (str.indexOf(',') != -1) {
          return str;
        } else {
          var str ='<div class="table-responsive"><table class="table">\n...\n</table></div>';
          return str;
        }
      });
    }
  }
};

jsToolBar.prototype.elements.BootstrapList = 
{
	type: 'button',
	title: 'BootstrapList',
	context: 'post',
	icon: 'index.php?pf=MyWikiBootstrap/img/icon-list.png',
  fn: 
  {
    wiki: function() 
    {
      /* Edite le code list groups de bootstrap 3*/
      this.encloseSelection('','',function(str) 
      {
        if (str.indexOf(',') != -1) 
        {
          return str;
        } else {
          var str ='<ul class="list-group">\n<li class="list-group-item"></li>\n<li class="list-group-item"></li>\n<li class="list-group-item"></li>\n</ul>';
          return str;
        }
      });
    }
  }
};

jsToolBar.prototype.elements.BootstrapImage = 
{
	type: 'button',
	title: 'BootstrapImage',
	context: 'post',
	icon: 'index.php?pf=MyWikiBootstrap/img/icon-image.png',
  fn: 
  {
    wiki: function() 
    {
      /* Edite les code html 5 pour les images - idem editeur xhtml */
      this.encloseSelection('','',function(str) 
      {
        if (str.indexOf(',') != -1) 
        {
          return str;
        } else {
         var str ='<figure style="{figureStyle}"><img src="" alt="" class="media" />\n<figcaption></figcaption>\n</figure>';
         return str;
        }
      });
    }
  }
};


jsToolBar.prototype.elements.BootstrapYoutube = 
{
	type: 'button',
	title: 'BootstrapYoutube',
	context: 'post',
	icon: 'index.php?pf=MyWikiBootstrap/img/icon-youtube.png',
  fn: 
  {
    wiki: function() 
    {
    /* Edite le code bootstrap 3 media responsive*/
      this.encloseSelection('','',function(str) 
      {
        if (str.indexOf(',') != -1) 
        {
          return str;
        } else {
         var str ='<div class="embed-responsive embed-responsive-16by9 myyoutube">\n<iframe class="embed-responsive-item" src=""></iframe>\n</div>';
         return str;
        }
      });
    }
  }
};

Dernière modification par JClaude (2019-01-17 15:27:39)

Hors ligne

Vous n'êtes pas identifié(e).

Pied de page des forums

Sites map