Editor Rich Text in un browser

TIPS DEVELOPERS

  • 3 commenti
Sicuramente qualcuno di voi, come me si sarà imbattuto nella problematica di realizzare un sistema CMS in Lotus Domino nel quale vi è la necessità di inserire da WEB un articolo e di formattarlo a piacere come se avesse tra le mani editor testo.
La risposta di Lotus per realizzare il "core" di questa funzionalità è sicuramente l'utilizzo di campi rich-text.
I campi rich sono particolari elementi di una form Notes, che hanno la caratteristica di poter funzionare come un editor testuale ( spesso e volentieri per far capire cosa sia un rich-text lo lo paragono ad un foglio Word).
Ma... mentre in Notes si ha un buon editor di testo... quali strumenti mette a disposizione per la modifica nel WEB?

Attualmente il motore HTTP di Domino trasforma il ritch text in un'applet Java con piccole funzionalità di editor oppure in un semplice campo HTML di tipo TEXTAREA tutto ciò semplicemente selezionando l'opzione oppurtuna nelle proprietà del campo.

1. Creazione di un campo rich text

Image:Editor Rich Text in un browser

2. Editor Lotus Notes

Image:Editor Rich Text in un browser

3. Visualizzazione OUTPUT Browser

Image:Editor Rich Text in un browser

4. Modifica Rich Text con TAG HTML TEXTAREA

Image:Editor Rich Text in un browser

5.
Modifica Rich Text con Applet Java
Image:Editor Rich Text in un browser
  • Optando per l'opzione in formato HTML  <TEXTAREA></TEXTAREA> ogni volta che verrà redatto un articolo, se si vorrà formattare i contenuti bisognerà inserire opportuni TAG HTML come [<b> </b><i></i><h1></h1>] etc.... Ma ovviamente una soluzione di questo tipo è inapplicabile per le utenze che non conoscono i codici HTML (sono la maggior parte). Inoltre con questa soluzione si ha un limite di 64 Kbytes poichè domino riconosce come testuale i valori inseriti nel <TEXTAREA></TEXTAREA> e non come campo Ritch Text, con contenuto HTML.
  • Optando per l'opzione Applet Java qualcosa migliora, ma oltre ad avere solo pochi strumenti di editor, non è un'interfaccia personalizzabile e tutti i browser debbono utilizzare la JVM per la visualizzazione causando problemi legati alla sicurezza e alla incompatibilità con alcuni tipo di browser.

Cercando nella rete sono riuscito a scovare la soluzione a tale problema... Utilizzare HTMLArea optando per l'opzione HTML  <TEXTAREA></TEXTAREA>.

Ma sorge un problema nell'applicare ciò..e cioè come risolvere il limite dei 64 Kb imposti da Domino durante la trasmissione dei dati? Come far capire a Domino che si tratta di un campo HTML e non semplicemente testuale ?


La soluzione a questo quesito è quella di utilizzare la seguente routine nel WebQuerySave di una FORM:
***********************************************************
Dim
vRichStyle As NotesRichTextStyle
Dim
vRTItem As Variant
Dim
vHTMLCode As Variant

Set
vRichStyle = vWebSession.CreateRichTextStyle
vRichStyle.PassThruHTML=True

Set
vRTItem = vThisDocument.GetFirstItem( "Body" )
vHTMLCode= vRTItem.GetUnFormattedText()

Call
vThisDocument.RemoveItem("Body")
Set
vRTItem = vThisDocument.CreateRichTextItem( "Body" )
Call
vRTitem.AppendStyle( vRichStyle )
Call
vRTitem.AppendText(vHTMLCode)

***********************************************************
La routine crea dapprima un campo rich text vuoto con l'opzione PassTruHTML, successivamente acquisce tramite la
funzione GetUnFormattedText, solo il TESTO scritto nel campo.
Ed infine cancella il campo originale sostituendolo a quello appena creato.
Facendo in questa manierà è possibile superare il limite dei 64 Kbytes che vengono passati a Domino, poichè prima del passaggio viene richiamata questa routine.

L'unica cosa che rimane ora da fare è quella di avere strumenti di editor opportuni per modificare il campo.


HTMLArea è un editor freeware che permette di utilizzare <TEXTAREA></TEXTAREA> appoggiandosi a delle routine Javascript per quanto riguarda l'editor.

Dopo aver scaricato una copia del software, avremo un file ZIP con un contenuto simile a questo:
Image:Editor Rich Text in un browser
La cosa più semplice per utilizzare il software, sarebbe quello di copiare l'intero contenuto dello ZIP nella cartella Domino\HTML, ma supponendo che non si possa fare opteremo per un'altra soluzione integrata all'interno del database.

Per fare ciò bisogna importare tutti i files dello zip nelle "Shared Resourse" del Database organizzati per tipologia.

Le immagini andranno importate nelle IMAGES del database
:
Image:Editor Rich Text in un browser

I CGI, Javascript,CSS e file HTML andranno importati nella sezione FILES:

Image:Editor Rich Text in un browser

I file CSS potranno essere importati separatamente anche nella sezione STYLE SHEETS.


Una volta importati tutti gli elementi basterà inserire nell' "HTML Head Content" della FORM contentente il Body:
Image:Editor Rich Text in un browser
Facendo così la libreria htmlarea.js contenente l'editor,verrà caricata solamente in fase di modifica/creazione del documento.
Successivamente basterà configurare le variabili di configurazione dell'editor:

var
_editor_url = "/apps/htmlarea.nsf/";
var
_editor_lang = "en";

ed alla fine richiamare la seguente routine:

function initEditor() {
var editor = new HTMLArea("Body");
editor.generate();
}

Nell' Onload Event della form specificando il campo sul quale si intende andare ad operare

Una Demo di quando descritto può essere trovata qui Codestore.

3 Commenti:

  • #1 Max 10/08/2008 11:34:26 AM

    grazie mille!

    ;)

  • #2 Giuseppe 10/08/2008 11:29:45 AM

    @max: sono due variabili globali, le inizializzi nella pagina (o meglio, nel form) dove usi l'editor, tipo così:

    <script type="text/javascript">

    var _editor_url = "/apps/htmlarea.nsf/";

    var _editor_lang = "en";

    </script>

  • #3 Max 10/08/2008 10:40:29 AM

    "Successivamente basterà configurare le variabili di configurazione dell'editor:"

    Scusami, posso sapere qual è il file che contiene le variabili di configurazione?

    Gazie

    Max

Commenta articolo
 

Questo spazio web è stato creato da per un uso pubblico e gratuito. Qualsiasi tipo di collaborazione sarà ben accetta.
Per maggiori informazioni, scrivete a info@dominopoint.it

About Dominopoint
Social
Dominopoint social presence: