EpicEditor: an Embeddable JavaScript Markdown Editor

An Embeddable JavaScript Markdown Editor

EpicEditor is an embeddable JavaScript Markdown editor with split fullscreen editing, live previewing, automatic draft saving, offline support, and more. For developers, it offers a robust API, can be easily themed, and allows you to swap out the bundled Markdown parser with anything you throw at it.

Why

Because, WYSIWYGs suck. Markdown is quickly becoming the replacement. GitHub, Stackoverflow, and even blogging apps like Posterous are now supporting Markdown. EpicEditor allows you to create a Markdown editor with a single line of JavaScript:

var editor = new EpicEditor().load();

Quick Start

EpicEditor is easy to implement. Add the script and assets to your page, provide a target container and call load().

Step 1: Download

Download the latest release or clone the repo:

$ git clone git@github.com:OscarGodson/EpicEditor

Step 2: Create your container element

<div id="epiceditor"></div>

Step 3: Add the epiceditor.js file

<script src="epiceditor.min.js"></script>

Step 4: Init EpicEditor

var editor = new EpicEditor().load();

API

EpicEditor([options])

The EpicEditor constructor creates a new editor instance. Customize the instance by passing the options parameter. The example below uses all options and their defaults:

var opts = {
  container: 'epiceditor',
  textarea: null,
  basePath: 'epiceditor',
  clientSideStorage: true,
  localStorageName: 'epiceditor',
  useNativeFullscreen: true,
  parser: marked,
  file: {
    name: 'epiceditor',
    defaultContent: '',
    autoSave: 100
  },
  theme: {
    base: '/themes/base/epiceditor.css',
    preview: '/themes/preview/preview-dark.css',
    editor: '/themes/editor/epic-dark.css'
  },
  button: {
    preview: true,
    fullscreen: true,
    bar: "auto"
  },
  focusOnLoad: false,
  shortcut: {
    modifier: 18,
    fullscreen: 70,
    preview: 80
  },
  string: {
    togglePreview: 'Toggle Preview Mode',
    toggleEdit: 'Toggle Edit Mode',
    toggleFullscreen: 'Enter Fullscreen'
  },
  autogrow: false
}
var editor = new EpicEditor(opts);

Options

Option	Description	Default
container	The ID (string) or element (object) of the target container in which you want the editor to appear.	epiceditor
textarea	The ID (string) or element (object) of a textarea you would like to sync the editor's content with. On page load if there is content in the textarea, the editor will use that as it's content.
basePath	The base path of the directory containing the /themes.	epiceditor
clientSideStorage	Setting this to false will disable localStorage.	true
localStorageName	The name to use for the localStorage object.	epiceditor
useNativeFullscreen	Set to false to always use faux fullscreen (the same as what is used for unsupported browsers).	true
parser	[Marked](https://github.com/chjj/marked) is the only parser built into EpicEditor, but you can customize or toggle this by passing a parsing function to this option. For example: parser: MyCustomParser.parse	marked
focusOnLoad	If true, editor will focus on load.	false
file.name	If no file exists with this name a new one will be made, otherwise the existing will be opened.	container ID
file.defaultContent	The content to show if no content exists for a file. NOTE: if the textarea option is used, the textarea's value will take precedence over defaultContent.
file.autoSave	How often to auto save the file in milliseconds. Set to false to turn it off.	100
theme.base	The base styles such as the utility bar with the buttons.	themes/base/epiceditor.css
theme.editor	The theme for the editor which is the area you type into.	themes/editor/epic-dark.css
theme.preview	The theme for the previewer.	themes/preview/github.css
button	If set to false will remove all buttons.	All buttons set to true.
button.preview	If set to false will remove the preview button.	true
button.fullscreen	If set to false will remove the fullscreen button.	true
button.bar	If true or "show", any defined buttons will always be visible. If false or "hide", any defined buttons will never be visible. If "auto", buttons will usually be hidden, but shown if whenever the mouse is moved.	"auto"
shortcut.modifier	The key to hold while holding the other shortcut keys to trigger a key combo.	18 (alt key)
shortcut.fullscreen	The shortcut to open fullscreen.	70 (f key)
shortcut.preview	The shortcut to toggle the previewer.	80 (p key)
string.togglePreview	The tooltip text that appears when hovering the preview icon.	Toggle Preview Mode
string.toggleEdit	The tooltip text that appears when hovering the edit icon.	Toggle Edit Mode
string.toggleFullscreen	The tooltip text that appears when hovering the fullscreen icon.	Enter Fullscreen
autogrow	Whether to autogrow EpicEditor to fit its contents. If autogrow is desired one can either specify true, meaning to use default autogrow settings, or an object to define custom settings	false
autogrow.minHeight	The minimum height (in pixels) that the editor should ever shrink to. This may also take a function that returns the desired minHeight if this is not a constant, or a falsey value if no minimum is desired	80
autogrow.maxHeight	The maximum height (in pixels) that the editor should ever grow to. This may also take a function that returns the desired maxHeight if this is not a constant, or a falsey value if no maximum is desired	false
autogrow.scroll	Whether the page should scroll to keep the caret in the same vertical place while autogrowing (recommended for mobile in particular)	true

load([callback])

Loads the editor by inserting it into the DOM by creating an iframe. Will trigger the load event, or you can provide a callback.

editor.load(function () {
  console.log("Editor loaded.")
});

unload([callback])

Unloads the editor by removing the iframe. Keeps any options and file contents so you can easily call .load() again. Will trigger the unload event, or you can provide a callback.

editor.unload(function () {
  console.log("Editor unloaded.")
});

getElement(element)

Grabs an editor element for easy DOM manipulation. See the Themes section below for more on the layout of EpicEditor elements.

• container: The element given at setup in the options.
• wrapper: The wrapping <div> containing the 2 editor and previewer iframes.
• wrapperIframe: The iframe containing the wrapper element.
• editor: The #document of the editor iframe (i.e. you could do editor.getElement('editor').body).
• editorIframe: The iframe containing the editor element.
• previewer: The #document of the previewer iframe (i.e. you could do editor.getElement('previewer').body).
• previewerIframe: The iframe containing the previewer element.

someBtn.onclick = function () {
  console.log(editor.getElement('editor').body.innerHTML); // Returns the editor's content
}

is(state)

Returns a boolean for the requested state. Useful when you need to know if the editor is loaded yet for example. Below is a list of supported states:

• loaded
• unloaded
• edit
• preview
• fullscreen

fullscreenBtn.onclick = function () {
  if (!editor.is('loaded')) { return; }
  editor.enterFullscreen();
}

open(filename)

Opens a client side storage file into the editor.

Note: This does not open files on your server or machine (yet). This simply looks in localStorage where EpicEditor stores drafts.

openFileBtn.onclick = function () {
  editor.open('some-file'); // Opens a file when the user clicks this button
}

importFile([filename],[content])

Imports a string of content into a client side storage file. If the file already exists, it will be overwritten. Useful if you want to inject a bunch of content via AJAX. Will also run .open() after import automatically.

Note: This does not import files on your server or machine (yet). This simply looks in localStorage where EpicEditor stores drafts.

importFileBtn.onclick = function () {
  editor.importFile('some-file',"#Imported markdown\nFancy, huh?"); //Imports a file when the user clicks this button
}

exportFile([filename],[type])

Returns the plain text of the client side storage file, or if given a type, will return the content in the specified type. If you leave both parameters null it will return the current document's content in plain text. The supported export file types are:

Note: This does not export files to your server or machine (yet). This simply looks in localStorage where EpicEditor stores drafts.

• text (default)
• html
• json (includes metadata)
• raw (warning: this is browser specific!)

syncWithServerBtn.onclick = function () {
  var theContent = editor.exportFile();
  saveToServerAjaxCall('/save', {data:theContent}, function () {
    console.log('Data was saved to the database.');
  });
}

rename(oldName, newName)

Renames a client side storage file.

Note: This does not rename files on your server or machine (yet). This simply looks in localStorage where EpicEditor stores drafts.

renameFileBtn.onclick = function () {
  var newName = prompt('What do you want to rename this file to?');
  editor.rename('old-filename.md', newName); //Prompts a user and renames a file on button click
}

save()

Manually saves a file to client side storage (localStorage by default). EpicEditor will save continuously every 100ms by default, but if you set autoSave in the options to false or to longer intervals it's useful to manually save.

Note: This does not save files to your server or machine (yet). This simply looks in localStorage where EpicEditor stores drafts.

saveFileBtn.onclick = function () {
  editor.save();
}

remove(name)

Deletes a client side storage file.

Note: This does not remove files from your server or machine (yet). This simply looks in localStorage where EpicEditor stores drafts.

removeFileBtn.onclick = function () {
  editor.remove('example.md');
}

getFiles([name], [excludeContent])

If no name is given it returns an object containing the names and metadata of all client side storage file objects. If a name is specified it will return just the metadata of that single file object. If excludeContent is true, it will remove the content from the returned object. This is useful when you just want a list of files or get some meta data. If excludeContent is false (default), it'll return a content property per file in plain text format.

Note: This does not get files from your server or machine (yet). This simply looks in localStorage where EpicEditor stores drafts.

var files = editor.getFiles();
for (x in files) {
  console.log('File: ' + x); //Returns the name of each file
};

on(event, handler)

Sets up an event handler (callback) for a specified event. For all event types, see the Events section below.

editor.on('unload', function () {
  console.log('Editor was removed');
});

emit(event)

Fires an event programatically. Similar to jQuery's .trigger()

editor.emit('unload'); // Triggers the handler provided in the "on" method above

removeListener(event, [handler])

Allows you to remove all listeners for an event, or just the specified one.

editor.removeListener('unload'); //The handler above would no longer fire

preview()

Puts the editor into preview mode.

previewBtn.onclick = function () {
  editor.preview();
}

edit()

Puts the editor into edit mode.

editBtn.onclick = function () {
  editor.edit();
}

focus()

Puts focus on the editor or previewer (whichever is visible). Works just like doing plain old JavaScript and input focus like someInput.focus(). The benefit of using this method however, is that it handles cross browser issues and also will focus on the visible view (edit or preview).

showEditorBtn.onclick = function () {
  editorWrapper.style.display = 'block'; // switch from being hidden from the user
  editor.focus(); // Focus and allow user to start editing right away
}

enterFullscreen()

Puts the editor into fullscreen mode.

Note: due to browser security restrictions, calling enterFullscreen programmatically like this will not trigger native fullscreen. Native fullscreen can only be triggered by a user interaction like mousedown or keyup.

enterFullscreenBtn.onclick = function () {
  editor.enterFullscreen();
}

exitFullscreen()

Closes fullscreen mode.

exitFullscreenBtn.onclick = function () {
  editor.exitFullscreen();
}

reflow([type], [callback])

reflow() allows you to "reflow" the editor in it's container. For example, let's say you increased the height of your wrapping element and want the editor to resize too. You could call reflow and the editor will resize to fit. You can pass it one of two strings as the first parameter to constrain the reflow to either width or height.

It also provides you with a callback parameter if you'd like to do something after the resize is finished. The callback will return the new width and/or height in an object. Additionally, you can also listen for the reflow event. This will also give you back the new size.

Note: If you call reflow() or reflow('width') and you have a fluid width container EpicEditor will no longer be fluid because doing a reflow on the width sets an inline style on the editor.

// For an editor that takes up the whole browser window:
window.onresize = function () {
  editor.reflow();
}

// Constrain the reflow to just height:
someDiv.resizeHeightHandle = function () {
  editor.reflow('height');
}

// Same as the first example, but this has a callback
window.onresize = function () {
  editor.reflow(function (data) {
    console.log('width: ', data.width, ' ', 'height: ', data.height);
  });
}

Events

You can hook into specific events in EpicEditor with on() such as when a file is created, removed, or updated. Below is a complete list of currently supported events and their description.

Event Name	Description
create	Fires whenever a new file is created.
read	Fires whenever a file is read.
update	Fires whenever a file is updated.
remove	Fires whenever a file is deleted.
load	Fires when the editor loads via load().
unload	Fires whenever the editor is unloaded via unload()
preview	Fires whenever the previewer is opened (excluding fullscreen) via preview() or the preview button.
edit	Fires whenever the editor is opened (excluding fullscreen) via edit() or the edit button.
fullscreenenter	Fires whenever the editor opens in fullscreen via fullscreen() or the fullscreen button.
fullscreenexit	Fires whenever the editor closes in fullscreen via fullscreen() or the fullscreen button.
save	Fires whenever save() is called manually, or implicitly by ```importFile``` or ```open```.
autosave	Fires whenever the autoSave interval fires, and the file contents have been updated since the last save.
open	Fires whenever a file is opened or loads automatically by EpicEditor or when open() is called.
reflow	Fires whenever reflow() is called. Will return the new dimensions in the callback. Will also fire every time there is a resize from autogrow.

Themes

Theming is easy in EpicEditor. There are three different <iframe>s which means styles wont leak between the "chrome" of EpicEditor, previewer, or editor. Each one is like it's own web page. In the themes directory you'll see base, preview, and editor. The base styles are for the "chrome" of the editor which contains elements such as the utility bar containing the icons. The editor is the styles for the contents of editor <iframe> and the preview styles are applied to the preview <iframe>.

The HTML of a generated editor (excluding contents) looks like this:

<div id="container">
  <iframe id="epiceditor-instance-id">
    <html>
      <head>
        <link type="text/css" id="" rel="stylesheet" href="epiceditor/themes/base/epiceditor.css" media="screen">
      </head>
      <body>
        <div id="epiceditor-wrapper">
          <iframe id="epiceditor-editor-frame">
            <html>
              <head>
                <link type="text/css" rel="stylesheet" href="epiceditor/themes/editor/epic-dark.css" media="screen">
              </head>
              <body contenteditable="true">
                <!-- raw content -->
              </body>
            </html>
          </iframe>
          <iframe id="epiceditor-previewer-frame">
            <html>
              <head>
                <link type="text/css" rel="stylesheet" href="epiceditor/themes/preview/github.css" media="screen">
              </head>
              <body>
                <div id="epiceditor-preview">
                  <!-- rendered html -->
                </div>
              </body>
            </html>
          </iframe>
          <div id="epiceditor-utilbar">
            <span title="Toggle Preview Mode" class="epiceditor-toggle-btn epiceditor-toggle-preview-btn"></span>
            <span title="Enter Fullscreen" class="epiceditor-fullscreen-btn"></span>
          </div>
        </div>
      </body>
    </html>
  </iframe>
</div>

Custom Parsers

EpicEditor is set up to allow you to use any parser that accepts and returns a string. This means you can use any flavor of Markdown, process Textile, or even create a simple HTML editor/previewer (parser: false). The possibilities are endless. Just make the parser available and pass its parsing function to the EpicEditor setting and you should be all set.

For even more customization/optimization you can replace the default built-in processor on build. Running jake build parser=path/to/parser.js will override the default Marked build and replace it with your custom script.

See the custom parsers wiki page for more.

Support

If you're having any problems with EpicEditor feel free to open a new ticket. Go ahead and ask us anything and we'll try to help however we can. If you need a little more help with implementing EpicEditor on your site we've teamed up with CodersClan to offer support:

Contributing

Contributions are greatly encouraged and appreciated. For more on ways to contribute please check the wiki: Contributing Guide.

Credits

EpicEditor relies on Marked to parse markdown and is brought to you in part by Oscar Godson and John Donahue. Special thanks to Adam Bickford for the bug fixes and being the QA for pull requests. Lastly, huge thanks to Sebastian Nitu for the amazing logo and doc styles.

Author: OscarGodson
Source Code: https://github.com/OscarGodson/EpicEditor 
License: MIT License

#javascript #css 

What is GEEK

Buddha Community

10 Best Libraries for JavaScript Editors

In today's post we will learn about 10 Best Libraries for JavaScript Editors. 

What’s an Editor?
Let’s start with editors. Text editors are exactly what their name suggest: programs that allow you to create and edit plain-text files. That’s it. An editor, in the classical sense, isn’t necessarily a programming tool; you could it to edit text files for any purpose. One of such purposes is, of course, writing code.

Table of contents:

• ACE - Ace (Ajax.org Cloud9 Editor).
• CodeMirror - In-browser code editor.
• Esprima - ECMAScript parsing infrastructure for multipurpose analysis.
• Quill - A cross browser rich text editor with an API.
• Medium-editor - Medium.com WYSIWYG editor clone.
• Pen - enjoy live editing (+markdown).
• JQuery-notebook - A simple, clean and elegant text editor. Inspired by the awesomeness of Medium.
• Bootstrap-wysiwyg - Tiny bootstrap-compatible WYSIWYG rich text editor.
• Ckeditor-releases - The best web text editor for everyone.
• Editor - A markdown editor. still on development.
• EpicEditor - An embeddable JavaScript Markdown editor with split fullscreen editing, live previewing, automatic draft saving, offline support, and more.
• JSoneditor - A web-based tool to view, edit and format JSON.
• Vim.js - JavaScript port of Vim with a persistent ~/.vimrc.

1 - ACE: Ace (Ajax.org Cloud9 Editor).

Ace is a standalone code editor written in JavaScript. Our goal is to create a browser based editor that matches and extends the features, usability and performance of existing native editors such as TextMate, Vim or Eclipse. It can be easily embedded in any web page or JavaScript application. Ace is developed as the primary editor for Cloud9 IDE and the successor of the Mozilla Skywriter (Bespin) Project.

Take Ace for a spin!

Check out the Ace live demo or get a Cloud9 IDE account to experience Ace while editing one of your own GitHub projects.

If you want, you can use Ace as a textarea replacement thanks to the Ace Bookmarklet.

Embedding Ace

Ace can be easily embedded into any existing web page. You can either use one of pre-packaged versions of ace (just copy one of src* subdirectories somewhere into your project), or use requireJS to load contents of lib/ace as ace

The easiest version is simply:

<div id="editor">some text</div>
<script src="src/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
    var editor = ace.edit("editor");
</script>

With "editor" being the id of the DOM element, which should be converted to an editor. Note that this element must be explicitly sized and positioned absolute or relative for Ace to work. e.g.

#editor {
    position: absolute;
    width: 500px;
    height: 400px;
}

To change the theme simply include the Theme's JavaScript file

<script src="src/theme-twilight.js" type="text/javascript" charset="utf-8"></script>

and configure the editor to use the theme:

editor.setTheme("ace/theme/twilight");

By default the editor only supports plain text mode; many other languages are available as separate modules. After including the mode's JavaScript file:

<script src="src/mode-javascript.js" type="text/javascript" charset="utf-8"></script>

The mode can then be used like this:

var JavaScriptMode = ace.require("ace/mode/javascript").Mode;
editor.session.setMode(new JavaScriptMode());

to destroy editor use

editor.destroy();
editor.container.remove();

View on Github

2 - CodeMirror: In-browser code editor.

CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with over 100 language modes and various addons that implement more advanced editing functionality. Every language comes with fully-featured code and syntax highlighting to help with reading and editing complex code.

Installation

Either get the zip file with the latest version, or make sure you have Node installed and run:

npm install codemirror

NOTE: This is the source repository for the library, and not the distribution channel. Cloning it is not the recommended way to install the library, and will in fact not work unless you also run the build step.

Quickstart

To build the project, make sure you have Node.js installed (at least version 6) and then npm install. To run, just open index.html in your browser (you don't need to run a webserver). Run the tests with npm test.

View on Github

3 - Esprima: ECMAScript parsing infrastructure for multipurpose analysis.

Esprima (esprima.org, BSD license) is a high performance, standard-compliant ECMAScript parser written in ECMAScript (also popularly known as JavaScript). Esprima is created and maintained by Ariya Hidayat, with the help of many contributors.

API

Esprima can be used to perform lexical analysis (tokenization) or syntactic analysis (parsing) of a JavaScript program.

A simple example on Node.js REPL:

> var esprima = require('esprima');
> var program = 'const answer = 42';

> esprima.tokenize(program);
[ { type: 'Keyword', value: 'const' },
  { type: 'Identifier', value: 'answer' },
  { type: 'Punctuator', value: '=' },
  { type: 'Numeric', value: '42' } ]
  
> esprima.parseScript(program);
{ type: 'Program',
  body:
   [ { type: 'VariableDeclaration',
       declarations: [Object],
       kind: 'const' } ],
  sourceType: 'script' }

For more information, please read the complete documentation.

View on Github

4 - Quill: A cross browser rich text editor with an API.

Quill is a modern rich text editor built for compatibility and extensibility. It was created by Jason Chen and Byron Milligan and actively maintained by Slab.

Quickstart

Instantiate a new Quill object with a css selector for the div that should become the editor.

<!-- Include Quill stylesheet -->
<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet" />

<!-- Create the toolbar container -->
<div id="toolbar">
  <button class="ql-bold">Bold</button>
  <button class="ql-italic">Italic</button>
</div>

<!-- Create the editor container -->
<div id="editor">
  <p>Hello World!</p>
</div>

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
  var editor = new Quill('#editor', {
    modules: { toolbar: '#toolbar' },
    theme: 'snow',
  });
</script>

Take a look at the Quill website for more documentation, guides and live playground!

Download

• npm - npm install quill
• tar - https://github.com/quilljs/quill/releases

CDN

<!-- Main Quill library -->
<script src="//cdn.quilljs.com/1.0.0/quill.js"></script>
<script src="//cdn.quilljs.com/1.0.0/quill.min.js"></script>

<!-- Theme included stylesheets -->
<link href="//cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet" />
<link href="//cdn.quilljs.com/1.0.0/quill.bubble.css" rel="stylesheet" />

<!-- Core build with no theme, formatting, non-essential modules -->
<link href="//cdn.quilljs.com/1.0.0/quill.core.css" rel="stylesheet" />
<script src="//cdn.quilljs.com/1.0.0/quill.core.js"></script>

View on Github

5 - Medium-editor: Medium.com WYSIWYG editor clone.

MediumEditor has been written using vanilla JavaScript, no additional frameworks required.

Basic usage

Demo

demo: http://yabwe.github.io/medium-editor/

Installation

Via npm:

Run in your console: npm install medium-editor

Via bower:

bower install medium-editor

Via an external CDN

• Using jsDelivr.

For the latest version:

<script src="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/js/medium-editor.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">

For a custom one:

<script src="//cdn.jsdelivr.net/npm/medium-editor@5.23.2/dist/js/medium-editor.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/medium-editor@5.23.2/dist/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">

• Using CDNJS.

Manual installation:

Download the latest release and attach medium editor's stylesheets to your page:

Find the files to below mentioned linking in the dist folder. (./medium-editor/dist/...)

<link rel="stylesheet" href="css/medium-editor.css"> <!-- Core -->
<link rel="stylesheet" href="css/themes/default.css"> <!-- or any other theme -->

Usage

The next step is to reference the editor's script

<script src="js/medium-editor.js"></script>

You can now instantiate a new MediumEditor object:

<script>var editor = new MediumEditor('.editable');</script>

The above code will transform all the elements with the .editable class into HTML5 editable contents and add the medium editor toolbar to them.

You can also pass a list of HTML elements:

var elements = document.querySelectorAll('.editable'),
    editor = new MediumEditor(elements);

MediumEditor also supports textarea. If you provide a textarea element, the script will create a new div with contentEditable=true, hide the textarea and link the textarea value to the div HTML content.

Integrating with various frameworks

People have contributed wrappers around MediumEditor for integrating with different frameworks and tech stacks. Take a look at the list of existing Wrappers and Integrations that have already been written for MediumEditor!

View on Github

6 - Pen: Enjoy live editing (+markdown).

Source code

You can clone the source code from github, or using bower.

bower install pen

Installation

init with id attribute

var editor = new Pen('#editor');

init with an element

var editor = new Pen(document.getElementById('editor'));

init with options

var options = {
  editor: document.body, // {DOM Element} [required]
  class: 'pen', // {String} class of the editor,
  debug: false, // {Boolean} false by default
  textarea: '<textarea name="content"></textarea>', // fallback for old browsers
  list: ['bold', 'italic', 'underline'], // editor menu list
  linksInNewWindow: true // open hyperlinks in a new windows/tab
}

var editor = new Pen(options);

Configure

The following object sets up the default settings of Pen:

defaults = {
  class: 'pen',
  debug: false,
  textarea: '<textarea name="content"></textarea>',
  list: [
    'blockquote', 'h2', 'h3', 'p', 'insertorderedlist', 'insertunorderedlist',
    'indent', 'outdent', 'bold', 'italic', 'underline', 'createlink'
  ],
  stay: true,
  linksInNewWindow: false
}

If you want to customize the toolbar to fit your own project, you can instanciate Pen constructor with an options object like #1.3: init with options:

Fallback for old browser

You can set defaults.textarea to a piece of HTML string, by default, it's <textarea name="content"></textarea>。This will be set as innerHTML of your #editor.

Change the editor class

Pen will add .pen to your editor by default, if you want to change the class, make sure to replace the class name pen to your own in src/pen.css.

View on Github

7 - JQuery-notebook: A simple, clean and elegant text editor. Inspired by the awesomeness of Medium.

A simple, clean and elegant WYSIWYG rich text editor for web aplications

Usage

Prerequisites: jQuery-Notebook's default styling FontAwesome draw the icons on the context bubble. You can install both FontAwesome and jQuery-Notebook through bower with the following command:

bower install jquery-notebook font-awesome

Alternatively, you can download FontAwesome here or link to the CDN.

Add the FontAwesome css and jQuery-Notebook css to you page head:

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="src/js/jquery.notebook.css">

Add jquery and jquery-notebook.js to your page:

<script type="text/javascript" src="src/js/libs/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="src/js/jquery.notebook.js"></script>

Create the editor:

<div class="my-editor"></div>

$(document).ready(function(){
    $('.my-editor').notebook();
});

That's it!

Available Commands

• Ctrl/Command B - Bold
• Ctrl/Command I - Italic
• Ctrl/Command U - Underline
• Ctrl/Command F1 - Header 1
• Ctrl/Command F2 - Header 2
• Ctrl/Command Z - Undo

View on Github

8 - Bootstrap-wysiwyg: Tiny bootstrap-compatible WYSIWYG rich text editor.

About the editor

Tiny bootstrap-compatible WISWYG rich text editor, based on browser execCommand, built originally for MindMup. Here are the key features:

• Automatically binds standard hotkeys for common operations on Mac and Windows
• Drag and drop files to insert images, support image upload (also taking photos on mobile devices)
• Allows a custom built toolbar, no magic markup generators, enabling the web site to use all the goodness of Bootstrap, Font Awesome and so on...
• Does not force any styling - it's all up to you
• Uses standard browser features, no magic non-standard code, toolbar and keyboard configurable to execute any supported browser command
• Does not create a separate frame, backup text areas etc - instead keeps it simple and runs everything inline in a DIV
• (Optionally) cleans up trailing whitespace and empty divs and spans
• Requires a modern browser (tested in Chrome 26, Firefox 19, Safari 6)
• Supports mobile devices (tested on IOS 6 Ipad/Iphone and Android 4.1.1 Chrome)

Basic Usage

See http://mindmup.github.com/bootstrap-wysiwyg/

Customising

You can assign commands to hotkeys and toolbar links. For a toolbar link, just put the execCommand command name into a data-edit attribute. For more info on execCommand, see http://www.quirksmode.org/dom/execCommand.html and https://developer.mozilla.org/en/docs/Rich-Text_Editing_in_Mozilla

<div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
  <a class="btn btn-large" data-edit="bold"><i class="icon-bold"></i></a>
</div>

To pass arguments to a command, separate a command with a space.

 <a data-edit="fontName Arial">...</a>

You can also use input type='text' with a data-edit attribute. When the value is changed, the command from the data-edit attribute will be applied using the input value as the command argument

<input type="text" data-edit="createLink">

If the input type is file, when a file is selected the contents will be read in using the FileReader API and the data URL will be used as the argument

<input type="file" data-edit="insertImage">

To change hotkeys, specify the map of hotkeys to commands in the hotKeys option. For example:

$('#editor').wysiwyg({
  hotKeys: {
    'ctrl+b meta+b': 'bold',
    'ctrl+i meta+i': 'italic',
    'ctrl+u meta+u': 'underline',
    'ctrl+z meta+z': 'undo',
    'ctrl+y meta+y meta+shift+z': 'redo'
  }
});

View on Github

9 - Ckeditor-releases: The best web text editor for everyone.

Releases Code

This repository contains the official release versions of CKEditor 4.

There are four versions for each release — standard-all, basic, standard, and full. They differ in the number of plugins that are compiled into the main ckeditor.js file as well as the toolbar configuration.

See the comparison of the basic, standard, and full installation presets for more details.

The standard-all build includes all official CKSource plugins with only those from the standard installation preset compiled into the ckeditor.js file and enabled in the configuration.

All versions available in this repository were built using CKBuilder, so they are optimized and ready to be used in a production environment.

Installation

Git clone

To install one of the available releases, just clone this repository and switch to the respective branch (see next section):

git clone -b <release branch> git://github.com/ckeditor/ckeditor4-releases.git

Git submodule

If you are using git for your project and you want to integrate CKEditor, we recommend to add this repository as a submodule.

git submodule add -b <release branch> git://github.com/ckeditor/ckeditor-releases.git <clone dir>
git commit -m "Added CKEditor submodule in <clone dir> directory."

Using Package Managers

See the Installing CKEditor with Package Managers article for more details about installing CKEditor with Bower, Composer and npm.

View on Github

10 - Editor: A markdown editor. still on development.

Overview

Editor is not a WYSIWYG editor, it is a plain text markdown editor. Thanks for the great project codemirror, without which editor can never be created.

Basic Usage

The easiest way to use Editor is to simply load the script and stylesheet:

<link rel="stylesheet" href="http://lab.lepture.com/editor/editor.css" />
<script type="text/javascript" src="http://lab.lepture.com/editor/editor.js"></script>
<script type="text/javascript" src="http://lab.lepture.com/editor/marked.js"></script>

You can also use jsdelivr CDN:

<link rel="stylesheet" href="//cdn.jsdelivr.net/editor/0.1.0/editor.css">
<script src="//cdn.jsdelivr.net/editor/0.1.0/editor.js"></script>
<script src="//cdn.jsdelivr.net/editor/0.1.0/marked.js"></script>

Having done this, an editor instance can be created:

var editor = new Editor();
editor.render();

The editor will take the position of the first <textarea> element.

Get the content

To get back the edited content you use:

editor.codemirror.getValue();

Component

If you are using component, you can install it with:

$ component install lepture/editor

View on Github

Thank you for following this article.

Related videos:

Top 10 Best Rich Text HTML JavaScript Editor 

#javascript #editor 

What is JavaScript - Stackfindover - Blog

Who invented JavaScript, how it works, as we have given information about Programming language in our previous article ( What is PHP ), but today we will talk about what is JavaScript, why JavaScript is used The Answers to all such questions and much other information about JavaScript, you are going to get here today. Hope this information will work for you.

Who invented JavaScript?

JavaScript language was invented by Brendan Eich in 1995. JavaScript is inspired by Java Programming Language. The first name of JavaScript was Mocha which was named by Marc Andreessen, Marc Andreessen is the founder of Netscape and in the same year Mocha was renamed LiveScript, and later in December 1995, it was renamed JavaScript which is still in trend.

What is JavaScript?

JavaScript is a client-side scripting language used with HTML (Hypertext Markup Language). JavaScript is an Interpreted / Oriented language called JS in programming language JavaScript code can be run on any normal web browser. To run the code of JavaScript, we have to enable JavaScript of Web Browser. But some web browsers already have JavaScript enabled.

Today almost all websites are using it as web technology, mind is that there is maximum scope in JavaScript in the coming time, so if you want to become a programmer, then you can be very beneficial to learn JavaScript.

JavaScript Hello World Program

In JavaScript, ‘document.write‘ is used to represent a string on a browser.

<script type="text/javascript">
	document.write("Hello World!");
</script>

How to comment JavaScript code?

• For single line comment in JavaScript we have to use // (double slashes)
• For multiple line comments we have to use / * – – * /

<script type="text/javascript">

//single line comment

/* document.write("Hello"); */

</script>

Advantages and Disadvantages of JavaScript

#javascript #javascript code #javascript hello world #what is javascript #who invented javascript

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

It is said that a digital resource a business has must be interactive in nature, so the website or the business app should be interactive. How do you make the app interactive? With the use of JavaScript.

Does your business need an interactive website or app?

Hire Dedicated JavaScript Developer from WebClues Infotech as the developer we offer is highly skilled and expert in what they do. Our developers are collaborative in nature and work with complete transparency with the customers.

The technology used to develop the overall app by the developers from WebClues Infotech is at par with the latest available technology.

Get your business app with JavaScript

For more inquiry click here https://bit.ly/31eZyDZ

Book Free Interview: https://bit.ly/3dDShFg

#hire dedicated javascript developers #hire javascript developers #top javascript developers for hire #hire javascript developer #hire a freelancer for javascript developer #hire the best javascript developers

The essential JavaScript concepts that you should understand

As a JavaScript developer of any level, you need to understand its foundational concepts and some of the new ideas that help us developing code. In this article, we are going to review 16 basic concepts. So without further ado, let’s get to it.

#javascript-interview #javascript-development #javascript-fundamental #javascript #javascript-tips

JS Development Company India | JavaScript Development Services

PixelCrayons: Our JavaScript web development service offers you a feature-packed & dynamic web application that effectively caters to your business challenges and provide you the best RoI. Our JavaScript web development company works on all major frameworks & libraries like Angular, React, Nodejs, Vue.js, to name a few.

With 15+ years of domain expertise, we have successfully delivered 13800+ projects and have successfully garnered 6800+ happy customers with 97%+ client retention rate.

Looking for professional JavaScript web app development services? We provide custom JavaScript development services applying latest version frameworks and libraries to propel businesses to the next level. Our well-defined and manageable JS development processes are balanced between cost, time and quality along with clear communication.

Our JavaScript development companies offers you strict NDA, 100% money back guarantee and agile/DevOps approach.

#javascript development company #javascript development services #javascript web development #javascript development #javascript web development services #javascript web development company