article:
UI: Metro UI PHP Generator
article:
JS Plugin: Bootstrap WYSIHTML5

JS Plugin: WYSIHTML5

Advertisement

WYSIHTML5 is an open source rich text editor based on HTML5 technology and the progressive-enhancement approach.
It uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.


Screenshots

Simple wysihtml5

Plugin: WYSIHTML5

Advanced wysihtml5
Plugin: WYSIHTML5


Implements

css add into jquery code
stylesheets:  "css/wysihtml5-advanced.css",

javascript code
<script type="text/javascript" src="javascripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="javascripts/advanced.js"></script>
or
<script type="text/javascript" src="javascripts/simple.js"></script>
<script type="text/javascript" src="javascripts/wysihtml5-0.3.0.js"></script>
<script>
  var editor = new wysihtml5.Editor("textarea", {
    toolbar:      "toolbar",
    stylesheets:  "css/wysihtml5-advanced.css",
    parserRules:  wysihtml5ParserRules
  });
 
  var log = document.getElementById("log");
 
  editor
    .on("load", function() {
      log.innerHTML += "<div>load</div>";
    })
    .on("focus", function() {
      log.innerHTML += "<div>focus</div>";
    })
    .on("blur", function() {
      log.innerHTML += "<div>blur</div>";
    })
    .on("change", function() {
      log.innerHTML += "<div>change</div>";
    })
    .on("paste", function() {
      log.innerHTML += "<div>paste</div>";
    })
    .on("newword:composer", function() {
      log.innerHTML += "<div>newword:composer</div>";
    })
    .on("undo:composer", function() {
      log.innerHTML += "<div>undo:composer</div>";
    })
    .on("redo:composer", function() {
      log.innerHTML += "<div>redo:composer</div>";
    });
</script>

html code
<form>
    <div id="toolbar" style="display: none; margin-bottom:10px">
        <a data-wysihtml5-command="bold" title="CTRL+B">bold</a> |
        <a data-wysihtml5-command="italic" title="CTRL+I">italic</a> |
        <a data-wysihtml5-command="createLink">insert link</a> |
        <a data-wysihtml5-command="insertImage">insert image</a> |
        <a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h1">h1</a> |
        <a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h2">h2</a> |
        <a data-wysihtml5-command="insertUnorderedList">insertUnorderedList</a> |
        <a data-wysihtml5-command="insertOrderedList">insertOrderedList</a> |
        <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="red">red</a> |
        <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="green">green</a> |
        <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="blue">blue</a> |
        <a data-wysihtml5-command="insertSpeech">speech</a>
        <a data-wysihtml5-action="change_view">switch to html view</a>
    </div>
    <textarea id="textarea" placeholder="Enter text ..." style="width: 710px; height: 200px"></textarea>
    <br />
    <input type="reset" value="Reset form!">
</form>

Features

- Auto linking of urls as-you-type
- Generates valid and semantic HTML5 markup (no <font>)
- Uses class-names instead of inline styles
- Unifies line-break handling across browsers (hitting enter will create <br> instead of <p> or <div>)
- Auto-parses content inserted via copy & paste (from Word, Powerpoint, PDF, other web pages, …)
- Converts invalid or unknown html tags into valid/similar tags
- Source code view for users with HTML skills
- Uses sandboxed iframes in order to prevent identity theft through XSS
- Editor inherits styles and attributes (placeholder, autofocus, …) from original textarea (you only have to style one element)
- Speech-input for Chrome


Browser Support

The rich text editing interface is supported in IE8+, FF 3.5+, Safari 4+, Safari on iOS 5+, Opera 11+ and Chrome.
Users with other browsers will see the textarea and are still able to write plain HTML by themselves.


Please share your feedback in comments below.


demo simple editor
demo advanced editor
github
download

Advertisement
Tags: wysihtml5, plugin, jquery, js, javascript, html, css, html5, editor, rich, text, interfae, bold, underline, italic, link, url, insert, image, h1, h2, undordered, ordered, list, red, green, blue, switch, view, xing

Leave a Comment

No Comment

© Creative3x Ltd.