Truc et astuce

1. Pour ne pas copier la mise en page. Sélection d'un texte et CTRL-C pour copier. Pour coller dans l'éditeur TinyMCE: CTRL-Shift-V.

2. Pour faire un changement de paragraphe: <ENTER> (entrée)
Pour faire un changement de ligne (break-line): Shift-<ENTER>

Problème d'insertion d'image

2011-06-07 11:00

J'ai trouvé un problème avec tinymce 3.4.2 et l'ajout des images. L'ajout des images dans Iceweasel/Firefox/Chrome se fait seulement si la balise img peut ajouter un attribut id. valid_elements: "img[src|alt|id]". Si on enlève le id, l'insertion ajoute une image vide <img /> dans ces navigateurs. L'insertion fonctionne dans tous les cas avec IE8 (avec ou sans id). Bien attendu, on peut aussi mettre valid_elements: "img[*]" mais c'est moins élégants. Il s'agit d'un problème avec le bouton image de base. Je n'ai pas essayé avec le plugiciel advimage.

Ajouter une icône/bouton

2012-02-08

Éditer le fichier "../tiny_mce/themes/advanced/skins/default/ui.css" et ajouter la ligne:
.defaultSkin span.mce_nomicone {background-position:-380px 0}

Remplacer nomicone par le nom de votre icône

Version 4.1.7

Téléchargement: http://download.moxiecode.com/tinymce/tinymce_4.1.7.zip

unzip tinymce_4.1.7.zip # crée le répertoire tinymce

# on peut enlever:
mkdir tinymce_4.1.7-stuff
mv tinymce/changelog.txt tinymce/LICENSE.TXT tinymce/js/tinymce/license.txt tinymce/js/tinymce/langs/readme.md tinymce_4.1.7-stuff/

# utilisation du répertoire
mv tinymce tinymce_4.1.7
ln -s tinymce_4.1.7 tinymce

# français:
cd tinymce/js/tinymce/
wget http://www.tinymce.com/i18n/download.php?download=fr_FR -O tinymce-lang-fr.zip
unzip tinymce-lang-fr.zip
mv langs/fr_FR.js langs/fr.js

# php compressor
wget https://moxiecdn.blob.core.windows.net/compressors/tinymce_compressor_4.0.2_php.zip
unzip tinymce_compressor_4.0.2_php.zip tinymce_compressor/tinymce.gzip.js  tinymce_compressor/tinymce.gzip.php
mv tinymce_compressor/* .
rmdir tinymce_compressor

Configuration TinyMCE 3 et 4

apply_source_formattingtrue-
cleanuptrue-
cleanup_on_startuptrue-
cleanup_serializer'xml'-
content_css"style.css""style.css"
document_base_url"/""/"
docs_language"fr""fr"j'ai renommé le fichier fr_FR.js en fr.js
entity_encoding"numeric""numeric"
entities""""
elements"id1,id2""id1,id2"non défini dans la documentation?
external_image_list_url"file.js"-voir image_list
external_link_list_url"file.js"-voir link_list
image_list-file.js
language""
link_list-file.js
onchange_callback"function_callback"-voir setup
mode"exact""exact"non défini dans la documentation?
plugins"""table,code,image,contextmenu,hr,link"
relative_urlsfalsefalse
remove_script_hosttruetrue
setup-
function(ed) { ed.on('change', function(e) { function_callback(this); }); }
style_formats[{title:, selector: , classes:},][{title:, selector: , classes:},]
table_cell_class_list-[{title:"Header1",value:"header1"}]
table_cell_styles"Header1=header1"-Voir table_cell_class_list
table_cell_limit300-?
table_class_list-[{title:"Header1",value:"header1"}]
table_row_class_list-[{title:"Header1",value:"header1"}]
table_row_styles"Header1=header1"-Voir table_row_class_list
table_styles"Header1=header1"-Voir table_class_list
theme"advanced"
theme_advanced_buttons2_add"image2,link2"-
theme_advanced_buttons3_add"tablecontrols"""
theme_advanced_blockformats"p,div,h2,h3,h4,h5,h6,blockquote,pre"-
theme_advanced_statusbar_location"bottom"-
theme_advanced_styles""-
theme_advanced_toolbar_location"top"-
theme_advanced_toolbar_align"left"-
valid_elements"...""..."

style_formats: 

style_formats: [
    {title: "Entête", items: [
        {title: "Entête 2", format: "h2"},
        {title: "Entête 3", format: "h3"},
        {title: "Entête 4", format: "h4"},
        {title: "Entête 5", format: "h5"},
        {title: "Entête 6", format: "h6"}
    ]},
    {title: "Bloc", items: [
        {title: "Paragraphe", format: "p"},
        {title: "Citation", format: "blockquote"},
        {title: "Div", format: "div"},
        {title: "Préformatté", format: "pre"}
    ]},
    {title: "Image", items: [
       {title : 'Image droite', selector: 'img', classes : 'alignright'},
        {title : 'Image gauche', selector: 'img', classes : 'alignleft'}
    ]}
]

Plugins v3 vers v4

Voir: Creating a plugin

1. editor_plugins.js est maintenant plugin.js
$ cp editor_plugin.js plugin.js

2. il faut plugin.min.js (peut etre un lien symbolique de plugin.js) ou utiliser un outil pour minimiser.
$ ln -s plugin.js plugin.min.js

3. le chargement est le même tinymce.init({ plugins: 'repertoireduplugin' });

4. code dans plugin.js vs editor_plugin.js
version 3:

(function () {
 tinymce.create("tinymce.plugins.genlist2ImagePlugin", {
  init: function(ed, url) {
  },
  getInfo: function() {
  }
 });
 tinymce.PluginManager.add("genlist2image", tinymce.plugins.genlist2ImagePlugin)
})();

version 4:
tinymce.PluginManager.add('genlist2image', function(ed, url) {
});

// ajouter un bouton
version 3:
ed.addCommand("bla", function() {
   // code commande
})
ed.addButton("button_image2", {
 title: "bla bla",
 cmd: "bla",
 image: url + '/img/icon.png'
})

version 4:
ed.addButton("button_image2", {
  text: "bla bla",
  image: url + "/img/bla.png",
  onclick: function() {
   // code commande
  }
})


// configuration
 toolbar: "button_image2",
 toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustified | bullist numlist outdent indent | link image | button_image2"

Lire les commentaires | Laisser un commentaire