Questo sito utilizza i cookie tecnici di Joomla per la gestione della sessione dell'utente.

Il proseguimento nella navigazione implica un tacito assenso all'utilizzo dei cookies.

Se non sei d'accordo sull'utilizzo, ti invito ad allontanarti da questo sito. 

 

Direttiva Europea per la regolamentazione della Privacy.

JCE Editor WYSIWYG in Mass Mail

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 

Sample ImageMi è stata richiesta la possibilità di mandare newsletter da Joomla 1.0.x. Siccome l'amministrazione è per un utente non proprio esperto ho preferito fargli usare il componente Mass Mail equipaggiato di default da Joomla. Stranamente questo componente non usa l'editor WYSIWYG. Ho cercato in internet e non ho trovato nulla in merito, tutti glissano il problema adottando mailer alternativi. Francamente di "ammaestrare" l'utente al concetto di newletter, sottoscrizioni, mailing e quant'altro non mi attira proprio, meglio inserire un bel editor WYSIWYG come JCE nel componente di default, ecco come ho fatto. 

 

I file del componente Mass Mail risiedono nella directory /administrator/components/com_massmail. Il "principale", ovvero quello che ci mostra il form da compilare per spedire la mail, è il file admin.massmail.html.php.

Se stiamo lavorando il locale apriamolo con un qualsiasi editor di testo, se stiamo lavorando onine occorre usare gli strumenti messi a disposizione dal proprio fornitore del servizio di hosting o, in alternativa, di un qualche componente di joomla che faccia modificare i file online.

Dalla riga 33 cambiamo il testo:

if (form.mm_subject.value == ""){
    alert( "Please fill in the subject" );
} else if (getSelectedValue('adminForm','mm_group') < 0){
    alert( "Please select a group" );
} else if (form.mm_message.value == ""){
    alert( "Please fillin the message" );


in

jceFunctions.toggleEditor('mm_message');
if (form.mm_subject.value == ""){
    alert( "Please fill in the subject" );
} else if (getSelectedValue('adminForm','mm_group') < 0){
    alert( "Please select a group" );
} else if (form.mm_message.value == ""){
    jceFunctions.toggleEditor('mm_message');
    alert( "Please fillin the message" );


questo server perchè JCE non valorizza il parametro value del texeditor quando premiamo "invia mail", onde evitare di addentrarmi troppo nel codice ho preferito mettere questa "pezza" :-)


Alla riga 83 troviamo il seguente codice:

<input type="checkbox" name="mm_mode" value="1">

Aggiungiamo un bel "checked" in calce per fare in modo che non ci dimenticheremo di specificare al componente che andremo a spedire una mail in html quando scriveremo newsletter.

Il codice modificato sarà:

<input type="checkbox" name="mm_mode" value="1" checked>

Continuando a scorrere il file arriviamo alla riga 99

<textarea cols="80" rows="25" name="mm_message" class="inputbox"></textarea>

Questa riga crea il componente area di testo che conterrà il testo della mail.
 

Commentiamola per poter tornare sui nostri passi qualora non dovessimo esser soddisfatti del risultato ottenuto:

<!-- <textarea cols="80" rows="25" name="mm_message" class="inputbox"></textarea>-->

E subito sotto inseriamo il seguante codice:

<!--//TinyMCE/JCE-->
<script
type="text/javascript" 
src="/URL.DEL.TUO.SITO/mambots/editors/jce/jscripts/tiny_mce/tiny_mce.js">
</script>
<script
type="text/javascript"
src="/URL.DEL.TUO.SITO/mambots/editors/jce/jscripts/tiny_mce/functions.js">
</script>
<script type="text/javascript">
    jceFunctions.relative = true;
    jceFunctions.mambotMode = false;
    jceFunctions.state = "mceEditor";
    jceFunctions.toggle = "[show/hide]";
    tinyMCE.init({
        site : "http://INDIRIZZO.DEL.TUO.SITO/administrator",
        document_base_url: "http://INDIRIZZO.DEL.TUO.SITO/",
        theme : "advanced",
        language : "en",
        lang_list : "en",
        width : "500",
        height : "600",
        mode : "specific_textareas",
        browsers : "msie,safari,gecko,opera",
        event_elements : "",
        entity_encoding : "named",
        verify_html : false,
        relative_urls : false,
        remove_script_host : false,
        remove_linebreaks : false,
        apply_source_formatting : true,
        convert_fonts_to_spans : true,
        inline_styles : true,
        cleanup_on_startup : true,
        fix_list_elements : true,
        fix_table_elements : true,
        save_callback : "jceSave",
        oninit: "jceOninit",
        content_css : "URL.DEL.TUO.SITO/templates/photodivas/css/template_css.css",
        template_colors : "",
        paste_create_paragraphs : false,
        paste_create_linebreaks : false,
        paste_use_dialog : false,
        paste_auto_cleanup_on_paste : false,
        paste_strip_class_attributes : "all",
        paste_remove_spans : false,
        paste_remove_styles : false,
        spellchecker_languages : "+English=en",
        font_size_style_values : "8pt,10pt,12pt,14pt,18pt,24pt,36pt",
        table_inline_editing : false,
        invalid_elements : "applet",
        force_br_newlines : false,
        force_p_newlines : true,
        directionality : "ltr",
        theme_advanced_layout_manager : "SimpleLayout",
        theme_advanced_resizing : true,
        theme_advanced_resizing_use_cookie : true,
        theme_advanced_toolbar_location : "top",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_disable : "",
theme_advanced_buttons1: "undo,redo,help,newdocument,
bold,italic,underline,bullist,numlist,outdent,indent,
strikethrough,code,removeformat,cut,copy,paste,
pasteword,pastetext,search,replace",
  theme_advanced_buttons2: "hr,sub,sup,justifyright,
justifycenter,justifyleft,justifyfull,tablecontrols,anchor,unlink",
        theme_advanced_buttons3 : "styleselect,fontselect,fontsizeselect,
forecolor,backcolor,charmap,
visualaid,ltr,rtl,formatselect",
        theme_advanced_buttons4 : "link,preview,image,print,fullscreen,
styleprops,nonbreaking,visualchars,
cite,abbr,acronym,del,ins,attribs,insertlayer,moveforward,
movebackward,absolute,emotions,spellchecker",
        theme_advanced_buttons5 : "",
        theme_advanced_blockformats : "p,div,h1,h2,h3,h4,h5
,h6,blockquote,dt,dd,code,samp",
        plugins : "directionality,emotions,fullscreen,
paste,preview,table,print,searchreplace,style,nonbreaking,
visualchars,xhtmlxtras,imgmanager,advlink,spellchecker,layer",
        extended_valid_elements : "script[*]"
    });
    function jceSave(element_id, html, body){
        return jceFunctions.save(html);
    };
</script>
<!--//End TinyMCE/JCE-->

Bene, ora abbiamo inserito il codice di JCE nella pagina, dobbiamo richiamarlo nel componente di testo

Aggiungiamo il pulsante "mostra/nascondi Editor" continuando ad iserire il testo in seguito a quello già inserito

<a id="editor_toggle" href="javascript:jceFunctions.toggleEditor('mm_message');">[show/hide]</a>

Ed ora aggiungiamo l'area di testo con il nostro editor WYSIWYG integrato:

<textarea id="mm_message" name="mm_message" cols="80" rows="25" style="width:100%;px; height:300px;" mce_editable="true" class="mceEditor"></textarea>
 
ed inizializiamo l'editor al caricamento della pagina 
  
    <script type="text/javascript">
        function jceOninit(){
            jceFunctions.initEditorMode('mm_message');
        }
    </script>


Bene, salviamo e proviamo a spedire una newsletter, come per magia, apparirà l'editor WYSIWYG!