Simple Javascript text editor or set of functions

Question

I need a simple javascript (possibly with jQuery) text/html editor. I've done a lot of search and found loads of plugins, but most of them are way too 'complete' for what I'm seeking.

Actually, all I want is a set of functions, not complex UI nor fancy toolbars. Those function would be basically,

Change font family to one of a limited predefined set (there should be the possibility to have multiple font faces at the same time, on the container)
Change font size
Change font colour
Change format style (bold, italic, underline, etc)

What you would recommend? Should I write my own plugin?

Thanks in advance

thecodejack · Accepted Answer · 2012-08-17 09:55:14Z

6

Aloha is the best in WYSIWYG online editors. They have nice wiki as well

answered Aug 17, 2012 at 9:55

thecodejack

13.5k11 gold badges47 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Stefan · Accepted Answer · 2012-08-17 10:18:07Z

All web editors work pretty simple and relay on Browser functionality.

You can make any field of your HTML page editable by setting the attribute contenteditable="true" on the element and calling: $('#edit').designMode = "on"; after the page load

You can change the font of your selection with

document.execCommand("fontname", false, "Courier New");

the size with

document.execCommand("fontsize", false, "20");

the color with

document.execCommand("ForeColor", false, "green");

Bold, Italic with:

document.execCommand("bold", false);
document.execCommand("italic", false);

Here is a sample test page I created (which sadly only works in FF, because in the other browsers he looses the selection of your text when you click a button)

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset=utf-8>
        <title>HTML5 Demo: ContentEditable</title>
        <script src="jquery.js"></script>
    </head>
    <body onLoad="onload()">
        <h2>Go ahead, edit away!</h2>
        <div id="editarea"></div>
        <!-- 'contenteditable="true"' need so the user can select the element and edit it's text-->
        <section contenteditable="true">
            <p>
                Here's a typical paragraph element
            </p>
            <div contenteditable="true">
                <p>
                    hallo welt
                </p>
            </div>
            <ol>
                <li>
                    and now a list
                </li>
            </ol>
        </section>
    </body>
    <script>
        function onload() {
            // needed for the resize boxes in IE
            document.designMode = "on"
            $('#editarea').append($('<button>').html("fontname").click(function() {
                document.execCommand("fontname", false, "Courier New");
            }));
            $('#editarea').append($('<button>').html("fontsize").click(function() {
                document.execCommand("fontsize", false, "20");
            }));
            $('#editarea').append($('<button>').html("changeSize").click(function() {
                document.execCommand("ForeColor", false, "green");
            }));
            $('#editarea').append($('<button>').html("bold").click(function() {
                document.execCommand("bold", false);
            }));
            $('#editarea').append($('<button>').html("italic").click(function() {
                document.execCommand("italic", false);
            }));
        }
    </script>
</html>

PS in case you need more, you should look at Aloha editor

ddoor · Accepted Answer · 2012-08-17 09:44:18Z

1

extjs has a really nice once, but the framework is fairly bloated.

Otherwise, check for jquery plugins I am sure there are heaps. The extjs one is still my favourite though.

answered Aug 17, 2012 at 9:44

ddoor

5,9719 gold badges36 silver badges41 bronze badges

Comments

Asciiom · Accepted Answer · 2012-08-17 10:02:33Z

1

TinyMCE is a great one! You can specify exactly what you want to make available to your users and it is very easy to implement.

It is quite 'complete' but if you specify what you want to make available (and change the theme to something more spartan if you like) you can get a quite minimalistic gui.

It's a good solution that beats writing your own IMHO.

This is an example that shows a gui that is quite a bit simpler than the full version, just to show the flexibility of their system. You can sculpt it to your exact specifications.

edited Aug 17, 2012 at 10:02

answered Aug 17, 2012 at 9:48

Asciiom

9,9757 gold badges42 silver badges59 bronze badges

Comments

Hadi · Accepted Answer · 2015-12-01 05:41:08Z

You can write your own or use plugins. Here is the basic idea from me.

HTML:

<div id="editor" contenteditable="true">Lorem Ipsum is simply dummy text</div>
<button id="make-bold">Make bold</button>

JS:

document.getElementById('make-bold').addEventListener('click', function(event){
    event.preventDefault();

    var selection = window.getSelection();
    var range = selection.getRangeAt(0).cloneRange();
    var tag = document.createElement('strong');

    range.surroundContents(tag);
    selection.addRange(range);
});

Live demo - https://jsfiddle.net/im4aLL/Lyusxq3p/

I pullout the basic idea by this and finally made something which i use in my future projects.

I made EasyEditor - https://github.com/im4aLL/easyeditor from above concept. There are lot more things to do. Like when are wrapping a node you need to check wheather that selection already wrapped with other node or same node. Also there are lot of functions you need to overcome.

Or you may try my lightweight plugin which i made for guys like you who need full flexible solution to integrate it with another application.

Here's the demo and documentation for use EasyEditor

Demo: http://habibhadi.com/lab/easyeditor/
Examples: http://habibhadi.com/lab/easyeditor/examples.html
Documentation: http://habibhadi.com/lab/easyeditor/documentation.html

Usage

http://habibhadi.com/lab/easyeditor/default-example.html

Collectives™ on Stack Overflow

Simple Javascript text editor or set of functions

5 Answers 5

Comments

Comments

Comments

Comments

Here's the demo and documentation for use EasyEditor

Usage

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Here's the demo and documentation for use EasyEditor

Usage

Comments

Your Answer

Sign up or log in

Post as a guest