UICodex

Learn UI Design by Programming

  • JavaScript UI
  • HTML&CSS UI
  • Android UI
  • iOS UI

WYSIWYG Editor UI Tutorials and Examples

wysiwyg.js - A Tiny WYSIWYG Editor with JavaScript

    wysiwyg.js | A Tiny WYSIWYG Editor with JavaScript

    • September 21, 2020
    • uicodex

    wysiwyg.js is a tiny 3kb wysiwyg editor plugin written in js (no dependencies).

    Suneditor - A Powerful Web Editor based on WYSIWYG with JavaScript

      Suneditor | A Powerful Web Editor based on WYSIWYG with JavaScript

      • September 21, 2020
      • uicodex

      Suneditor is a pure javscript web editor based WYSIWYG, no dependencies.

      Editor.js - A Lightweight and Clean WYSIWYG Editor with JavaScript

        Editor.js | A Lightweight and Clean WYSIWYG Editor with JavaScript

        • September 21, 2020
        • uicodex

        Editor.js is a lightweight and simple WYSIWYG Html/Text editor, it is easy to use.

        tiny-editor is a WYSIWYG rich text editor implemented with pure JavaScript and Font Awesome iconic font. [meta author="fvilers" office_home="https://github.com/fvilers/tiny-editor" language="JavaScript "][/meta] How to create a web editor using tiny-editor? 1.Install the tiny-editor # NPM $ npm install tiny-editor --save 2.Import bundle.js in html <script src="/dist/bundle.js"></script> 3.Import Font Awesome <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> 4.Create a div container and add data-tiny-editor attribute for it. tiny-editor will be displayed in this div <div data-tiny-editor> <p> Default Text Here </p> </div> 5.You can use data attribute to set tiny-editor <div data-tiny-editor data-bold="no" data-formatblock="no" data-italic="no" data-underline="no" data-fontname="no" data-forecolor="no" data-justifyleft="no" data-justifycenter="no" data-justifyright="no" data-insertorderedlist="no" data-insertunorderedlist="no" data-outdent="no" data-indent="no" data-remove-format="no"> <p> Default Text Here </p> </div>

          tiny-editor | Creating a WYSIWYG Rich Text Editor with Pure JavaScript

          • September 18, 2020
          • uicodex

          tiny-editor is a WYSIWYG rich text editor implemented with pure JavaScript and Font Awesome iconic font.

          Popular UI

          Card Web Editor Login Form Contact Form Profile Card WYSIWYG Editor Registration Form Color Picker Timeline Web Card Alert Web Calendar Button Navigation Alert Dialog Confirm Dialog HTML5 Login Form Dialog Chart Form Emoji Calendar Scrollbar Emoji Slider Image Viewer Reorderable Drag-and-Drop List Line Chart Tooltip Button Slider

          Popular

          • MultiDialog | A Powerful jQuery UI Dialog Widget for Modalbox / Lightbox Application MultiDialog | A Powerful jQuery UI Dialog Widget for Modalbox / Lightbox Application
          • ivid | Building an Interactive HTML5 Video Player with JavaScript ivid | Building an Interactive HTML5 Video Player with JavaScript
          • switch | Creating iOS Style Switch Button with CSS switch | Creating iOS Style Switch Button with CSS
          • Bubbly Button | Creating a Button with Bubble Confetti Effect Bubbly Button | Creating a Button with Bubble Confetti Effect
          • Viewer.js | View Full Image By Clicking with JavaScript Viewer.js | View Full Image By Clicking with JavaScript

          UICodex