Wysiwyg: What you see is what you get editor

I created a wysiwyg editor using Javascript, jQuery, HTML5 and bootstrap for designing. It has some basic formatting options. I will keep adding and making it robust. But it is yours to use for the purpose.

Here is the link to demo. It is compatible with firefox and chrome for now but not that much robust.

All new HTML- HTML5

HTML 5 has come up with some super cool tags, which makes things(coding) easier and reduces the use of third party applications(flash, Adobe is going to launch Adobe Edge in near future which generates code in jQuery, HTML 5, CSS). Here are some of the tags which are revolutionary.

iframe: It is not related to Steve Jobs or Apple at all! 😉 Well it is super awesome tag. It works like page in some page. Place it where ever you want. Try it, you gonna love it.

<iframe src="somefile.html">Not supported by browser</iframe>

audio: Before this we used to use third party tools for audio. This lets you embed audio without any problem in your webpage.

<audio controls="controls" ><source src="somefile.mp3" type="audio/mp3" />Not supported by webbrowser</audio>

video: Same as audio just the tag name is changed and source type.

<video controls="controls"><source src="somefile.mp4" type="audio/mp4" />Not supported by webbrowser</audio>

progress: Many times we brainstorm over progress bar. Here it is, very simple to use and looks pretty cool, basically dependent on OS you are using.

<progress value="40" max="100"></progress>

header: This creates header and it knows where it should be.

<header><p>Some thing some thing</p></header>

footer: This places footer in the webpage. But personally I don’t understand its behaviour.

<footer>Some thing</footer>

nav: Now you don’t need to write extra CSS for making navgation, like inline.

<nav><a href="1.html">One</a><a href="2.html">Two</a></nav>
Tip: Use nav with header and footer.

localStorage: HTML 5 also worked towards replacement of cookies. This stores data on client computer just as cookies but you can store large amount of data. Because whatever is needed can be fetched alone. It requires javascript to work.

<script type="text/javascript">localStorage.name = 'James Bond'</script>

sessionStorage: This is just like session but again created by javascript. It is also cool thing as you can understand.

<script type="text/javascript">sessionStorage.name = 'James Bond'</script>

canvas: This is the ultimate thing of all. You can draw on your web page now using this element. This works just as canvas in real but coding part. It has some easy calling involved for making lines, rectangle and other. This also uses javascript to create. Go on google HTML 5 games. You can create wonder using this. But first of all you need to read all about it.

<canvas id="mycanvas"></canvas>

Note:

  • This is not all read about these tags, they have lot of things.
  • You can see HERE. Everything is explained beautifully.