Implémentation de TinyMCE dans Ruby on Rails

MinusculeMCE est un excellent contrôle d'éditeur Javascript/HTML basé sur le Web, indépendant de la plate-forme, très utile pour ceux qui souhaitent permettre à leurs utilisateurs de modifier des documents HTML en ligne. Il est principalement conçu pour s’intégrer facilement aux systèmes de gestion de contenu, notamment WordPress, Drupal, etc. Il s'agit d'un éditeur de texte riche qui génère du HTML, ce qui facilite grandement l'ajout de contenu riche à l'aide de l'application Rails.

TinyMCE a la capacité de convertir les champs de zone de texte HTML ou tout autre élément HTML en instances d'éditeur. Il propose divers outils de formatage HTML pour le texte ainsi que pour les images/vidéos (en termes d'alignement). Des configurations peuvent survenir lors de l'intégration avec un projet, ce qui se traduit par une flexibilité du projet.

Personnalisation de TinyMce Editor 4, également utilisé avec Ruby on Rails :

Ajout du bouton Menu : 

Copiez le contenu complet du package de développement 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.

Nommez un bouton, ici je nommerai R.design, au clic un menu déroulant avec un seul élément nommé « menu1 » apparaît, au clic, le contenu est ajouté dans l'éditeur, n'oubliez pas d'inclure tinymce.min.js

tinymce.init({ sélecteur : « zone de texte », configuration : fonction (éditeur) { editor.addButton('report_design', { tapez : 'boutonmenu', texte : 'R.Design', icône : faux, menu: [ {texte : 'menu1', onclick : function() {editor.insertContent('menu1');}} ] }); },

plugins : [ "advlist autolink listes lien image charmap aperçu avant impression ancre", "rechercher le code des blocs visuels en plein écran", "insérer le menu contextuel de la table multimédia datetime coller moxiemanager", "les émoticônes impriment la couleur du texte" ], barre d'outils : « insérer un fichier, annuler, refaire | styleselect | gras italique | alignleft aligncenter alignright alignjustify | bullist numlist retrait retrait | image du lien | émoticônes | couleur de fond de première couleur | imprimer | menu " }); sélecteur : « zone de texte »

indique que l'éditeur sera placé pour la zone de texte de type d'entrée.

Utilisation avec Rails :

menu: [

<% @array.each fait |value| %> {texte : '<%= valeur %>', onclick : function() {editor.insertContent('<%= valeur %>');} <% fin %> ]

Réorganisez les icônes de la barre d'outils, coloriez le texte et l'arrière-plan. barre d'outils : "insérer le fichier, annuler, refaire" barre d'outils : "Annuler la restauration du fichier d'insertion"

Si l'icône de couleur du texte et la coloration d'arrière-plan sont manquantes, tout ce dont vous avez besoin est d'ajouter la couleur du texte dans vos plugins ;[…] d'abord, puis utilisez la couleur de l'avant et de l'arrière-plan dans la barre d'outils, pour que l'icône apparaisse dans la barre d'outils de l'éditeur.

Toutes les choses que vous incluez/définissez dans le dossier tinymce/plugins/* peuvent être utilisées dans l'éditeur tinymce. barre d'outils : "couleur du fond"

Bordure table à langer : 

Fichier : tinymce/skins/lightgray/content.min.css Le style est appliqué au tableau. bordure : 1px en pointillés #BBBBBB ; Remplacez le style par défaut, simple et comparativement meilleur que celui par défaut. .mce-item-table, .mce-item-table td, .mce-item-table th, .mce-item-table légende { bordure : 1px noir uni ; border-collapse : effondrement ; taille de police : 14 px ; }

Éléments du sous-menu : 

menu: [ { text:'Élément de menu', menu:[ {text:'sub1′,value:'val1′},{text:'sub2′,value:'val2′}], onclick : function() {editor.insertContent('<%= “sous-menu” %>');} } ]

Utilisation avec des rails, en cliquant sur un élément de sous-menu, insertion d'un élément dans l'espace de zone de texte de l'éditeur. menu: [ { text:'Données de base de l'étudiant', menu:[<% @object.each do |data| %>{texte :'<%= données %>', onclick : function() {editor.insertContent('<%= data %>');}},<% end %>] } ] Gestionnaire de fenêtres { texte : 'Nom', onclick : fonction() { éditeur.windowManager.open({ titre : 'Marges du papier', corps: [ {type : 'textbox', nom : 'prénom', étiquette : 'prénom', valeur : ”}, {type : 'textbox', nom : 'dernier', étiquette : 'nom de famille', valeur : ”} ], onsubmit : fonction(e) { // Insère du contenu lorsque le formulaire de fenêtre est soumis editor.insertContent('Prénom' + e.data.first); editor.insertContent('Last Name' + e.data.last); } }); } } Utilisation le long des rails {texte : 'Marges', onclick : fonction() { éditeur.windowManager.open({ titre : 'Marges du papier', corps: [ { tapez : 'textbox', nom : 'top', étiquette : 'Marge supérieure (cm)', valeur : '<%[email protected] si @custom_report.top.present ? %>' } ], onsubmit : fonction(e) {

<%= fonction_distante( :url => {:controller=>”contrôleur”,:action => “action”}, :with => « 'margin_top=' + e.data.top » ) %>

} }); } }

Ayant acquis l'expertise en fournissant des solutions RoR partout dans le monde en matière de développement, de déploiement, de gestion, de surveillance et de prise en charge de vos applications, RailsCarma vous propose des solutions commerciales efficaces et simplifiées.

En savoir plus : 

• Un moyen simple d'augmenter les performances de votre application Rails

• Les bases de la création et de l'utilisation de modules dans Rails

• Cadre en temps réel

• Implémentation de Tinymce dans Ruby on Rails

• Qu'est-ce que l'API REST ?

Prenez contact avec nous.