A modern, simple and elegant WYSIWYG rich text editor.

Overview

jQuery-Notebook

A simple, clean and elegant WYSIWYG rich text editor for web aplications
Note: Check out the fully functional demo and examples here.

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

Options

These are the supported options and their default values:

$.fn.notebook.defaults = {
    autoFocus: false,
    placeholder: 'Your text here...',
    mode: 'multiline', // multiline or inline
    modifiers: ['bold', 'italic', 'underline', 'h1', 'h2', 'ol', 'ul', 'anchor']
};

Events

  • contentChange: Fires every time the editor's content is modified:
// Using jQuery:
$('.my-editor').on('contentChange', function(e) {
    var content = e.originalEvent.detail.content;
});

// OR using the event directly:
var editorDomElement = $('.my-editor').get(0);
editorDomElement.addEventListener('contentChange', function(e) {
    var content = e.detail.content;
});

Contributing

We use Github Issues to do basically everything on this project, from feature request to bug tracking. There are a few issues marked as easy picking. These issues are ideally suited for someone who wants to start contributing as they are fairly simple.

To contribute to this project just fork the repository, create a branch with a descriptive but brief name and send a pull request when ready. There is no need to squash your commits before sending a pull request. After a few accepted and merged pull requests you can request push rights to the repository if you want to.

Please use 4 spaces for indentation. Any pull requests that has any JavaScript code with a different indentation will be rejected.

Contributors

raphaelcruzeiro
otaviosoares
slahn
TrevorHinesley
cbartlett
penman

Comments
  • <p>'s are gone after erasing all content

    's are gone after erasing all content

    Hi guys, first I would like to thank you for very nice work. I am going to use it in my blogging platform called Skribo, but there is one very serious bug. Look at the screencast:

    http://quick.as/ded7ugj0

    If you erase all content, it's erased with all paragraphs. And then, if you start to type new text, the text is not put into paragraphs but right into editor's div or (after ENTER) into other divs.

    When I tried to write editor for Skribo by myself, I stuck right on this problem. But i am pretty sure, that you will solve it.

    Problem is - for multiline version - to keep at least one paragraph inside the editor. It shouldn't be possible to erase it.

    bug needs info 
    opened by zraly 15
  • Keyup events

    Keyup events

    Is there a way of defining a custom event handler such as keyup which would get called after the rawEvents?

    The reason I'm after this is I'm writing an editor for an internal project which needs to auto save the content every 5 seconds of typing.

    enhancement feature 
    opened by jbrooksuk 4
  • DIV tags instead of Paragraphs

    DIV tags instead of Paragraphs

    Hello,

    I see a strange markup and want to know if this intended.

    For example, if after paragraph I press enter (to go to new line), the new line is created as paragraphs (which is okay). But if I want to create new line after H1 OR H2 tags, instead of paragraphs DIVs are created, and every other line will be div too

    is this normal?

    bug 
    opened by ghost 3
  • Enforce the use of paragraphs when pasting text

    Enforce the use of paragraphs when pasting text

    Sometimes when pasting text (specially from other websites), the editor will be filled with divs and spans. Upon pasting, the content should be normalised to follow the editor's standards.

    enhancement feature 
    opened by raphaelcruzeiro 2
  • If more then one editor on one page, the last one rewrites bubble's modifiers

    If more then one editor on one page, the last one rewrites bubble's modifiers

    It seems, that if there are more than one editors on one page, the last one rewrites the Bubble panel. It is problem, when you have different modifiers activated for every editor.

    bug 
    opened by zraly 2
  • Are there pluggins , like add img ?

    Are there pluggins , like add img ?

    Hi is there an easy to augment the main features for example to add new function in the tool bar like add image ? is there a pluggin architecture or best practise document to follow ? Cheers Thanks for This great pluggin

    opened by oceatoon 2
  • H1 and H2 can now be undone on button click

    H1 and H2 can now be undone on button click

    Added in a couple lines that allow for h1 and h2 to be undone when a selection is an h1 or h2 and the button is clicked, similar to the functionality of the bold, italics and underline buttons

    opened by TrevorHinesley 2
  • JavaScript error in IE9,IE8

    JavaScript error in IE9,IE8

    In IE9 or IE8, when type , JavaScript error happen in line 754. Perhaps , I think that IE does not support new CustomEvent. Does this plugin support IE?

    opened by maito 1
  • Fix list end and #97

    Fix list end and #97

    previously, ending a list by pressing return twice would result in a new paragraph at the bottom of the div, even if the list was in the middle of the div.

    opened by timcosta 1
  • Fixes list ending issue

    Fixes list ending issue

    When ending a list between two paragraphs by pressing enter twice, the cursor would be placed in a paragraph at the bottom of the entire notebook. This has been rectified.

    opened by timcosta 1
  • How can I fix the position of the bubble

    How can I fix the position of the bubble

    Is there a way to fix a position of the bubble (where I can select Bold, Italic, and other things) and to put it just above the text.

    The best way is to demonstrate it with tinyMCE. Something like this? http://www.tinymce.com/tryit/inline.php

    opened by salvador-dali 1
  • Who to contact for security issues

    Who to contact for security issues

    Hey there!

    I belong to an open source security research community, and a member (@ning1022) has found an issue, but doesn’t know the best way to disclose it.

    If not a hassle, might you kindly add a SECURITY.md file with an email, or another contact method? GitHub recommends this best practice to ensure security issues are responsibly disclosed, and it would serve as a simple instruction for security researchers in the future.

    Thank you for your consideration, and I look forward to hearing from you!

    (cc @huntr-helper)

    opened by JamieSlome 0
  • FontAwesome icons don't load

    FontAwesome icons don't load

    I am hosting FontAwesome myself and it's working throughout the site. However, the icons don't get loaded in the editor, only a placeholder with the unicdoe is shown.

    Has anybody else run into this issue yet? unicode in editor

    opened by herrmayr 0
  • Native Selection Menu at Touchscreens overlays the Toolbar Popup above Selected Text

    Native Selection Menu at Touchscreens overlays the Toolbar Popup above Selected Text

    Informations

    Browser version: Chrome OS: Android Screen resolution: Tablet 10 inch

    How to reproduce the bug?

    Just select text within the demo at your touchscreen-device and the native selection popup will overlay the notepad popup.

    Suggestion:

    If most or all native selection menus are above, check space further above and show notepad popup (top -2 em ) or so.

    I bet there is no trusty way to find out if and where the native selection menu appeared.

    Maybe make popup fixed at the very top of the screen.

    (...)

    Congrats for this very nice little tool!!! Helps me a lot, thanks for not GPLing it!

    opened by ernesto-sun 0
  • Changed hidden paste textarea to fixed to prevent scrolling when pasting

    Changed hidden paste textarea to fixed to prevent scrolling when pasting

    When pasting into the notebook, content is written to a hidden textarea. The paste capturing script focuses on this textarea, which causes the browser to scroll to it (on the demo, the textarea is already in view, so you don't see this problem). Changing the textarea to fixed instead of absolute keeps it in view so the browser doesn't need to scroll.

    opened by DaveChild 0
  • Hyperlink URLs cannot have query strings

    Hyperlink URLs cannot have query strings

    If I attempt to add a hyperlink with a URL that has a query string, say http://www.google.com?foo=bar, nothing happens when I hit enter; the editor does not add the link. I'm seeing this right on the demo.

    opened by cperryk 0
Owner
Raphael Cruzeiro
Raphael Cruzeiro
A powerful WYSIWYG rich text web editor by pure javascript

KothingEditor A powerful WYSIWYG rich text web editor by pure javascript Demo : kothing.github.io/editor The KothingEditor is a lightweight, flexible,

Kothing 34 Dec 25, 2022
Override the rich text editor in Strapi admin with ToastUI Editor.

strapi-plugin-wysiwyg-tui-editor ⚠️ This is a strapi v4 plugin which does not support any earlier version! A Strapi plugin to replace the default rich

Zhuo Chen 12 Dec 23, 2022
Quill is a modern WYSIWYG editor built for compatibility and extensibility.

Note: This branch and README covers the upcoming 2.0 release. View 1.x docs here. Quill Rich Text Editor Quickstart • Documentation • Development • Co

Quill 34.3k Jan 2, 2023
Simple rich text editor (contentEditable) for jQuery UI

Hallo - contentEditable for jQuery UI Hallo is a very simple in-place rich text editor for web pages. It uses jQuery UI and the HTML5 contentEditable

Henri Bergius 2.4k Dec 17, 2022
Open source rich text editor based on HTML5 and the progressive-enhancement approach. Uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.

This project isn’t maintained anymore Please check out this fork. wysihtml5 0.3.0 wysihtml5 is an open source rich text editor based on HTML5 technolo

Christopher Blum 6.5k Jan 7, 2023
Open source rich text editor based on HTML5 and the progressive-enhancement approach. Uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.

This project isn’t maintained anymore Please check out this fork. wysihtml5 0.3.0 wysihtml5 is an open source rich text editor based on HTML5 technolo

Christopher Blum 6.5k Dec 30, 2022
Tiny bootstrap-compatible WISWYG rich text editor

bootstrap-wysiwyg Important information for Github requests/issues Please do not submit issues/comments to this repo. Instead, submit it to https://gi

MindMup 5.6k Jan 3, 2023
HTML5 rich text editor. Try the demo integration at

Squire Squire is an HTML5 rich text editor, which provides powerful cross-browser normalisation in a flexible lightweight package (only 16.5KB of JS a

Neil Jenkins 4.4k Dec 28, 2022
A rich text editor for everyday writing

Trix A Rich Text Editor for Everyday Writing Compose beautifully formatted text in your web application. Trix is a WYSIWYG editor for writing messages

Basecamp 17.3k Jan 3, 2023
Popline is an HTML5 Rich-Text-Editor Toolbar

popline Popline is a non-intrusive WYSIWYG editor that shows up only after selecting a piece of text on the page, inspired by popclip. Usage Load jQue

kenshin 1k Nov 4, 2022
Simple, beautiful wysiwyg editor

This repo is no longer maintained. bootstrap3-wysiwyg is much better Overview Bootstrap-wysihtml5 is a javascript plugin that makes it easy to create

James Hollingworth 4.2k Dec 30, 2022
Super simple WYSIWYG editor

Summernote Super simple WYSIWYG Editor. Summernote Summernote is a JavaScript library that helps you create WYSIWYG editors online. Home page: https:/

Summernote 11k Jan 7, 2023
A lightweight and amazing WYSIWYG JavaScript editor - 20kB only (8kB gzip)

Supporting Trumbowyg Trumbowyg is an MIT-licensed open source project and completely free to use. However, the amount of effort needed to maintain and

Alexandre Demode 3.8k Jan 7, 2023
The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.

CKEditor 4 - Smart WYSIWYG HTML editor A highly configurable WYSIWYG HTML editor with hundreds of features, from creating rich text content with capti

CKEditor Ecosystem 5.7k Dec 27, 2022
An Easy and Fast WYSIWYG Editor

Simditor Simditor is a browser-based WYSIWYG text editor. It is used by Tower -- a popular project management web application. Supported Browsers: IE1

彩程设计 5k Jan 3, 2023
A lightweight HTML and BBCode WYSIWYG editor

SCEditor v3.1.1 A lightweight WYSIWYG BBCode and XHTML editor. For more information visit sceditor.com Usage Include the SCEditor JavaScript: <link re

Sam 566 Dec 23, 2022
The next generation Javascript WYSIWYG HTML Editor.

Froala Editor V3 Froala WYSIWYG HTML Editor is one of the most powerful JavaScript rich text editors ever. Slim - only add the plugins that you need (

Froala 5k Jan 1, 2023
Raptor, an HTML5 WYSIWYG content editor!

Raptor Editor Raptor Editor is a user-focused extensible WYSIWYG website content editor - check out the Demo. It is designed to be user and developer

PANmedia 533 Sep 24, 2022
🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.

TOAST UI Editor v3 major update planning ?? ?? ?? TOAST UI Editor is planning a v3 major update for 2021. You can see our detail RoadMap here! GFM Mar

NHN 15.5k Jan 3, 2023