Come incorporare il Mozilla Bespin Editor

August 3

Bespin è un editor di codice basato sul Web che è possibile incorporare nelle pagine del sito web per modificare il codice direttamente dal browser. Il programma è stato sviluppato da Mozilla Labs e lavora a Mozilla Firefox, Google Chrome e browser web Safari. Bespin richiede due file al fine di funzionare correttamente: un file JavaScript che contiene lo script Bespin e un file CSS usato per fare correttamente il display editor di codice. Si richiede anche di assegnare uno dei contenitori DIV nella tua pagina Web con il "Bespin" classe CSS e la designazione ID "Editor".

istruzione

1 Scaricare ed estrarre Bespin in una directory sul computer che contiene i documenti di più pagine Web. I "BespinEmbedded.js" e file "BespinEmbedded.css" devono trovarsi nella stessa directory del documento in cui si desidera incorporare Bespin.

2 Pulsante destro del mouse sul documento pagina Web in cui si desidera incorporare Bespin, e quindi fare clic su "Apri con". Fare clic per selezionare "Blocco note" o "WordPad" dall'elenco delle applicazioni, quindi fare clic su "OK".

3 Fare clic per posizionare il cursore tra il "<HEAD>" e "</ HEAD>" tag vicino alla parte superiore del documento, quindi premere il tasto "Enter" per creare una riga vuota.

4 Tipo "<" text / javascript "tipo di script src = = 'BespinEmbedded.js'> </ script>" sulla riga vuota e premere "Invio". Questo collega il documento pagina Web al file Bespin JavaScript.

5 Digitare "<link href = tipo 'BespinEmbedded.css' = 'text / css' rel = 'stylesheet'>" e premere "Invio". Questa riga di codice collega il documento di una pagina Web con il foglio di stile Bespin.

6 Fare clic per posizionare il cursore tra il "<body>" e "</ body>" tag e premere "Invio" per creare una riga vuota.

7 Digitare la seguente riga di codice per creare un contenitore DIV con l'editor di codice Bespin incorporato: <div id = 'editore' class = 'Bespin' data-bespinoptions = '{ "Impostazioni": { "strictlines": true}, "stealFocus ": true} '>

8 Digita il codice che si desidera visualizzare come modificabile all'interno del contenitore DIV.

9 Tipo "</ DIV>" per chiudere il contenitore DIV.

10 Fare clic sul menu "File", quindi fare clic su "Salva".