vasonEditor – en jQuery-editor plugin

Detta är min examinationsuppgift i kursen "Javascript" på Blekinge Tekniska Högskola, VT 2014. Ladda ner: Git Hub | vasonEditor

Systemkrav

Denna plugin fungerar i alla webbläsare som kan hantera HTML5 LocalStorage.

Användningsinstruktioner

  1. Ladda ner och packa upp vasonEditor från GitHub.
  2. Lägg filer och mappar bland dina filer till din webbplats.
  3. Kopiera nedanstående länkar, och lägg dem i huvudet på din index-fil.
  4. <link rel='stylesheet' type='text/css' href='style/vasonEditor.css' />
    <link rel='apple-touch-icon' href='/storage/app/media/apple-touch-icon.png' />
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
    <script src="script/vasonEditor_functions.js"></script>
    <script src="script/vasonEditor_main.js"></script>
    
  5. Infoga vasonEditor vart du vill på din webbsida. Editorn placeras exakt där du lägger in koden.
  6. <div id="vasoneditor">
      <script type="text/javascript">
        $(document).ready( function() {
          $('#vasoneditor').vasonEditor();
        });
      </script>
    </div>
    

Funktioner i VasonEditor

  • Kodläge, för att skriva in och redigera text.
  • Designläge, för att förhandsvisa resultatet, som WYSIWYG.

Förklaring av panelens knappar

  • Gör texten fet.
  • Gör textent kursiv.
  • Använd rubrik 2.
  • Använd rubrik 3.
  • Punktlista.
  • Numrerad lista.
  • Innehållet vänsterjusterat.
  • Innehållet centrerat.
  • Innehållet högerjusterat.
  • Innehållet marginaljusterat.
  • Upphöjd (m2).
  • Nedsänkt (H2O).
  • Bakgrundsfärg.
  • Textfärg.
  • Rubrikfärg.
  • Citera text.
  • Infoga länk.
  • Infoga bild och bildtext.