{"id":6514,"date":"2015-07-13T03:18:44","date_gmt":"2015-07-13T03:18:44","guid":{"rendered":"https:\/\/dev.railscarma.com\/implementing-tinymce-in-ruby-on-rails\/"},"modified":"2021-06-06T14:46:45","modified_gmt":"2021-06-06T14:46:45","slug":"implementation-de-tinymce-en-ruby-sur-rails","status":"publish","type":"post","link":"https:\/\/www.railscarma.com\/fr\/blog\/articles-techniques\/implementation-de-tinymce-en-ruby-sur-rails\/","title":{"rendered":"Impl\u00e9mentation de TinyMCE dans Ruby on Rails"},"content":{"rendered":"
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\tMinusculeMCE<\/strong> est un excellent contr\u00f4le d'\u00e9diteur Javascript\/HTML bas\u00e9 sur le Web, ind\u00e9pendant de la plate-forme, tr\u00e8s utile pour ceux qui souhaitent permettre \u00e0 leurs utilisateurs de modifier des documents HTML en ligne. Il est principalement con\u00e7u pour s\u2019int\u00e9grer facilement aux syst\u00e8mes de gestion de contenu, notamment WordPress, Drupal, etc. Il s'agit d'un \u00e9diteur de texte riche qui g\u00e9n\u00e8re du HTML, ce qui facilite grandement l'ajout de contenu riche \u00e0 l'aide de l'application Rails.\n

TinyMCE a la capacit\u00e9 de convertir les champs de zone de texte HTML ou tout autre \u00e9l\u00e9ment HTML en instances d'\u00e9diteur. Il propose divers outils de formatage HTML pour le texte ainsi que pour les images\/vid\u00e9os (en termes d'alignement). Des configurations peuvent survenir lors de l'int\u00e9gration avec un projet, ce qui se traduit par une flexibilit\u00e9 du projet.<\/p>\n\n

Personnalisation de TinyMce Editor 4, \u00e9galement utilis\u00e9 avec Ruby on Rails\u00a0:<\/h4>\n

<\/h5>\n
Ajout du bouton Menu\u00a0:\u00a0<\/span><\/strong><\/h5>\n

Copiez le contenu complet du package de d\u00e9veloppement TinyMce-4, placez-le dans vos actifs ou votre dossier public, il comprend les classes, les langues, les plugins et autres fichiers, scripts et tout ce dont vous avez besoin.<\/p>\n

Nommez un bouton, ici je nommerai R.design, au clic un menu d\u00e9roulant avec un seul \u00e9l\u00e9ment nomm\u00e9 \u00ab menu1 \u00bb appara\u00eet, au clic, le contenu est ajout\u00e9 dans l'\u00e9diteur, n'oubliez pas d'inclure tinymce.min.js<\/p>\n\n

\n

tinymce.init({<\/em>\n s\u00e9lecteur : \u00ab zone de texte \u00bb,<\/em>\n configuration\u00a0: fonction (\u00e9diteur) {<\/em>\n editor.addButton('report_design', {<\/em>\n tapez : 'boutonmenu',<\/em>\n texte : 'R.Design',<\/em>\n ic\u00f4ne : faux,<\/em>\n menu: [<\/em>\n {texte\u00a0: 'menu1', onclick\u00a0: function() {editor.insertContent('menu1');}}<\/em>\n ]<\/em>\n });<\/em>\n },<\/em><\/p>\n

plugins\u00a0: [<\/em>\n "advlist autolink listes lien image charmap aper\u00e7u avant impression ancre",<\/em>\n "rechercher le code des blocs visuels en plein \u00e9cran",<\/em>\n "ins\u00e9rer le menu contextuel de la table multim\u00e9dia datetime coller moxiemanager",<\/em>\n "les \u00e9motic\u00f4nes impriment la couleur du texte"<\/em>\n ],<\/em>\n barre d'outils\u00a0: \u00ab ins\u00e9rer un fichier, annuler, refaire | styleselect | gras italique | alignleft aligncenter alignright alignjustify | bullist numlist retrait retrait | image du lien | \u00e9motic\u00f4nes | couleur de fond de premi\u00e8re couleur | imprimer | menu "<\/em>\n });<\/em>\n s\u00e9lecteur\u00a0:\u00a0\u00ab\u00a0zone de texte\u00a0\u00bb<\/em><\/p>\n<\/blockquote>\n

indique que l'\u00e9diteur sera plac\u00e9 pour la zone de texte de type d'entr\u00e9e.<\/p>\n\n

Utilisation avec Rails\u00a0:<\/span><\/strong><\/h5>\n
\n

menu: [<\/em><\/p>\n\n

<% @array.each fait |value| %><\/em>\n {texte\u00a0: '<%= valeur %>', onclick\u00a0: function() {editor.insertContent('<%= valeur %>');}<\/em>\n <% fin %><\/em>\n ]<\/em><\/h5>\n<\/blockquote>\n

R\u00e9organisez les ic\u00f4nes de la barre d'outils, coloriez le texte et l'arri\u00e8re-plan. barre d'outils\u00a0: "ins\u00e9rer le fichier, annuler, refaire"<\/em>\nbarre d'outils\u00a0: "Annuler la restauration du fichier d'insertion"<\/em><\/p>\n

Si l'ic\u00f4ne de couleur du texte et la coloration d'arri\u00e8re-plan sont manquantes, tout ce dont vous avez besoin est d'ajouter la couleur du texte dans vos plugins\u00a0;[\u2026] d'abord, puis utilisez la couleur de l'avant et de l'arri\u00e8re-plan dans la barre d'outils, pour que l'ic\u00f4ne apparaisse dans la barre d'outils de l'\u00e9diteur.<\/p>\n

Toutes les choses que vous incluez\/d\u00e9finissez dans le dossier tinymce\/plugins\/* peuvent \u00eatre utilis\u00e9es dans l'\u00e9diteur tinymce. barre d'outils\u00a0: "couleur du fond"<\/p>\n\n

Bordure table \u00e0 langer :\u00a0<\/span><\/strong><\/h5>\n
\n

Fichier : tinymce\/skins\/lightgray\/content.min.css<\/em>\n Le style est appliqu\u00e9 au tableau.<\/em>\n bordure\u00a0: 1px en pointill\u00e9s #BBBBBB\u00a0;<\/em>\n Remplacez le style par d\u00e9faut, simple et comparativement meilleur que celui par d\u00e9faut.<\/em>\n .mce-item-table, .mce-item-table td, .mce-item-table th, .mce-item-table l\u00e9gende {<\/em>\n bordure\u00a0: 1px noir uni\u00a0;<\/em>\n border-collapse\u00a0:\u00a0effondrement\u00a0;<\/em>\n taille de police\u00a0: 14\u00a0px\u00a0;<\/em>\n }<\/em><\/p>\n

<\/p>\n<\/blockquote>\n

\u00c9l\u00e9ments du sous-menu\u00a0:\u00a0<\/span><\/strong><\/h5>\n
\n

menu: [<\/em>\n {<\/em>\n text:'\u00c9l\u00e9ment de menu', menu:[ {text:'sub1\u2032,value:'val1\u2032},{text:'sub2\u2032,value:'val2\u2032}],<\/em>\n onclick\u00a0: function() {editor.insertContent('<%= \u201csous-menu\u201d %>');}<\/em>\n }<\/em>\n ]<\/em><\/p>\n

Utilisation avec des rails, en cliquant sur un \u00e9l\u00e9ment de sous-menu, insertion d'un \u00e9l\u00e9ment dans l'espace de zone de texte de l'\u00e9diteur.<\/em>\n menu: [<\/em>\n {<\/em>\n text:'Donn\u00e9es de base de l'\u00e9tudiant', menu:[<% @object.each do |data| %>{texte\u00a0:'<%= donn\u00e9es %>',<\/em>\n onclick\u00a0: function() {editor.insertContent('<%= data %>');}},<% end %>]<\/em>\n }<\/em>\n ]<\/em>\n Gestionnaire de fen\u00eatres<\/em>\n {<\/em>\n texte : 'Nom', onclick : fonction()<\/em>\n {<\/em>\n \u00e9diteur.windowManager.open({<\/em>\n titre\u00a0: 'Marges du papier',<\/em>\n corps: [<\/em>\n {type\u00a0: 'textbox', nom\u00a0: 'pr\u00e9nom', \u00e9tiquette\u00a0: 'pr\u00e9nom', valeur\u00a0: \u201d},<\/em>\n {type\u00a0: 'textbox', nom\u00a0: 'dernier', \u00e9tiquette\u00a0: 'nom de famille', valeur\u00a0: \u201d}<\/em>\n ],<\/em>\n onsubmit\u00a0: fonction(e) {<\/em>\n \/\/ Ins\u00e8re du contenu lorsque le formulaire de fen\u00eatre est soumis<\/em>\n editor.insertContent('Pr\u00e9nom' + e.data.first);<\/em>\n editor.insertContent('Last Name' + e.data.last);<\/em>\n }<\/em>\n });<\/em>\n }<\/em>\n }<\/em>\n Utilisation le long des rails<\/em>\n {texte\u00a0:\u00a0'Marges', onclick\u00a0: fonction()<\/em>\n {<\/em>\n \u00e9diteur.windowManager.open({<\/em>\n titre\u00a0: 'Marges du papier',<\/em>\n corps: [<\/em>\n {<\/em>\n tapez\u00a0: 'textbox', nom : 'top', \u00e9tiquette : 'Marge sup\u00e9rieure (cm)',<\/em>\n valeur : '<%=@report.top si @custom_report.top.present ? %>'<\/em>\n }<\/em>\n ],<\/em>\n onsubmit\u00a0: fonction(e) {<\/em><\/p>\n

<%= fonction_distante(<\/em>\n :url => {:controller=>\u201dcontr\u00f4leur\u201d,:action => \u201caction\u201d},<\/em>\n :with => \u00ab 'margin_top=' + e.data.top \u00bb )<\/em>\n %><\/em><\/p>\n

}<\/em>\n });<\/em>\n }<\/em>\n }<\/em><\/p>\n

<\/p>\n<\/blockquote>\n

Ayant acquis l'expertise en fournissant des solutions RoR partout dans le monde en mati\u00e8re de d\u00e9veloppement, de d\u00e9ploiement, de gestion, de surveillance et de prise en charge de vos applications, RailsCarma vous propose des solutions commerciales efficaces et simplifi\u00e9es.<\/p>\n

En savoir plus :\u00a0<\/em><\/p>\n\n