Posted by & filed under Uncategorized.

I forbindelse med kurset Dokumenter og Web fikk jeg et behov for å legge til QRCode i prosjektet. Ettersom jeg alt hadde en god fungerende teksteditor nicEdit valgte jeg å se på hvordan man kan lage og implementere en knapp til verktøylinjen. Hjemmesidene til nicEdit har man mulighet til å lastened et utviklermiljø for å utvikle egne moduler, allikevel valgte jeg å se på struktur å lage min egen hack for nicEdit.

I dette eksemplet skal vi gå gjennom hvordan vi kan legge til QRCode i nicEdit.

Vi starter med å modifisere ikonsettet nicEditorIcons.gif. Et ikon er 18×18 piksler, utvid derfor bilde med 18px så vi får 504x18px. Husk at det siste bildet er på plass 28 fra venstre.

Deretter modifiserer vi nicEdit og legger til en ny knapp i koden. Den nye knappen får navnet qrcode, tallet bak navnet sier noe om hvor ikonet befinner seg i bilde (plassnummer fra venstre).

 

View source
  1. iconList : {“xhtml”:1,”bgcolor”:2,”forecolor”:3,”bold”:4,”center”:5,
  2. “hr”:6,”indent”:7,”italic”:8,”justify”:9,”left”:10,”ol”:11,
  3. “outdent”:12,”removeformat”:13,”right”:14,”save”:25,
  4. “strikethrough”:16,”subscript”:17,”superscript”:18,
  5. “ul”:19,”underline”:20,”image”:21,”link”:22,
  6. “unlink”:23,”close”:24,”arrow”:26,”upload”:27,”qrcode”:28}

 

Opprett et informasjonsobjekt for knappen og dens funksjonalitet. Funksjonaliteten knyttes opp mot qrcode som vi definerte i ikon listen over.

 

View source
  1. var nicQRCodeOptions = {
  2.     buttons : {
  3.         ‘qrcode’ : {name : ‘Insert QR Code’, type : ‘nicQRCodeButton’, tags : [‘img’] }
  4.     }
  5. };

 

Når vi trykker på knappen må vi spesifisere hva som skal skje. Dette gjør vi ved å lage et nytt button objekt.

 

View source
  1. var nicQRCodeButton = nicEditorAdvancedButton.extend({
  2.     width : ‘350px’,
  3.     addPane : function() {
  4.         this.im = this.ne.selectedInstance.selElm().parentTag(‘IMG’);
  5.         this.addForm({
  6.             ” : {type : ‘title’, txt : ‘Insert QRCode’},
  7.             ‘txt’ : {type : ‘content’, txt : ‘Tekst’, ‘value’ : ”,
  8. style : {width: ‘150px’}},
  9. ‘size’ : {type : ‘select’, txt : ‘Size’, ‘value’ : ”,
  10. style : {width: ‘150px’}, options :
  11. {‘150×150′:’150px’,
  12. ‘200×200’ : ‘200px’,
  13. ‘250×250’ : ‘250px’,
  14. ‘300×300’ : ‘300px’,
  15. ‘350×350’ : ‘350px’}}
  16.         },this.im);
  17.     },

 
Objektet forteller nicEdit å lage et nytt skjema med mulighet for å skrive inn tekst og velge en størrelse. Valgmulighetene for størrelse er formatert etter hvordan Google Graph behandler størrelser. For å slippe konverteringer er det valgt å bruke det samme formatet.

Nå har vi et skjema som ser slikt ut:

Etter addPane lager vi en siste funksjon submit som behadler dataene vi mottar fra skjema. Her tester vi teksten for en makslengde på 300 tegn etter som QRCode ikke større flere tegn. Deretter legger vi til et bildeobjekt og bygger url for bildet.

 

View source
  1. submit : function(e) {
  2.         this.removePane();
  3. var text = this.inputs[‘txt’].value;
  4. var size = this.inputs[‘size’].value;
  5. if(text.length > 300) {
  6. alert(‘Maks lengde på tekst 300 tegn!’);
  7. return;
  8. }
  9. if(!this.im) {
  10.             var tmp = ‘javascript:nicImTemp();’;
  11.             this.ne.nicCommand(“insertImage”,tmp);
  12.             this.im = this.findElm(‘IMG’,’src’,tmp);
  13.         }
  14.         if(this.im) {
  15.             this.im.setAttributes({
  16.                 src : ‘https://chart.googleapis.com/chart?chs=’ +
  17. size + ‘&cht=qr&chld=L|1&chl=’+text
  18.             });
  19.         }
  20.     }
  21. });
  22. nicEditors.registerPlugin(nicPlugin,nicQRCodeOptions);

 

Den siste linjen registrerer modulen til nicEdit og den er klar til bruk.

Last ned modifisert nicEdit.js her.

Les mer om Google graph QRCode her.

Leave a Reply

  • (will not be published)