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 :
Copy the complete contents from TinyMce-4 development package have it in your assets or public folder, it includes tinymce’s classes, langs, plugins and other files, scripts and everything you need.
Name a button, here I will name as R.design, on click drop down menu with a single item named “menu1” appears, onclick, the content is appended in the editor, don’t forget to include tinymce.min.js
tinymce.init({ selector: “textarea”, configuration : fonction (éditeur) { editor.addButton(‘report_design’, { type: ‘menubutton’, text: ‘R.Design’, icône : faux, menu: [ {text: ‘menu1 ‘, onclick: function() {editor.insertContent(‘menu1’);}} ] }); },
plugins : [ “advlist autolink lists link image charmap print preview anchor”, “searchreplace visualblocks code fullscreen”, “insertdatetime media table contextmenu paste moxiemanager”, “emoticons print textcolor” ], toolbar: “insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | emoticons | forecolor backcolor | print | menu “ }); selector: “textarea”
indique que l'éditeur sera placé pour la zone de texte de type d'entrée.
Utilisation avec Rails :
menu: [
<% @array.each fait |value| %> {text: ‘<%= value %>’, onclick: function() {editor.insertContent(‘<%= value %>’);} <% fin %> ]
Réorganisez les icônes de la barre d'outils, coloriez le texte et l'arrière-plan. barre d'outils : “insertfile undo redo” barre d'outils : “undo insertfile redo”
If the text color icon and background coloring is missing, all you need is to add the textcolor into your plugins;[…] first, then use the forecolor and backcolor in the toolbar, so the icon does appear in the editor toolbar.
All of the things you include/defined in tinymce/plugins/* folder can be used in the tinymce editor. toolbar: “forecolor backcolor”
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:’Menu item’, menu:[ {text:’sub1′,value:’val1′},{text:’sub2′,value:’val2′}], onclick: function() {editor.insertContent(‘<%= “submenu” %>’);} } ]
Using along with rails, onclick of a submenu item, item insertion into editor’s textarea space. menu: [ { text:’Student Basic Data’, menu:[<% @object.each do |data| %>{text:'<%= data %>’, onclick: function() {editor.insertContent(‘<%= data %>’);}},<% end %>] } ] Gestionnaire de fenêtres { text:’Name’, onclick: function() { éditeur.windowManager.open({ title: ‘Paper Margins’, corps: [ {type: ‘textbox’, name: ‘first’, label: ‘first name’,value: ”}, {type: ‘textbox’, name: ‘last’, label: ‘last name’, value: ”} ], onsubmit : fonction(e) { // Insère du contenu lorsque le formulaire de fenêtre est soumis editor.insertContent(‘First Name’ + e.data.first); editor.insertContent(‘Last Name’ + e.data.last); } }); } } Utilisation le long des rails {text:’Margins’, onclick: function() { éditeur.windowManager.open({ title: ‘Paper Margins’, corps: [ { type: ‘textbox’, name: ‘top’, label: ‘Margin top (cm)’, value: ‘<%=@report.top if @custom_report.top.present? %>’ } ], onsubmit : fonction(e) {
<%= fonction_distante( :url => {:controller=>”controller”,: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
-
Qu'est-ce que l'API REST ?
Abonnez-vous pour les dernières mises à jour
À propos de l'auteur du message
