Rich Text Editor

Stark is a free rich text editor for websites, a super simple, easy-to-use, tiny, and lightweight WYSIWYG editor, free from heavy libraries (written in vanilla JavaScript) and superfluous features like tables, histograms, charts, or diagrams.

Today's browsers unfortunately still lack inbuilt rich text editors. Back in the day, due to security requirements, the capabilities of the client side were severely limited. For this reason, a text contained nothing but letters. Then the population of the planet developed and became more literate, and now more and more website visitors are eager to use different fonts, colors, links, pictures, videos, etc. On the other hand, many popular networks still don't provide opportunities for any text editing.

Some sites suggest using special tags for text formatting, some programs are so bulky and complicated that you don't want to use them. In most cases, comment forms don't offer any frills. If you need a compact simple rich text editor, here it is.

rich text editor

Free Rich Text Editor

The functionality of the Stark editor includes everything you need to write professional, high-quality, SEO-effective articles for sites like the young Fastchooser project. It can also be used for writing posts or comments.

If your site contains many articles and involves rich text communication between its users, then you can't get by without a text editor. There are many paid and free rich editors on the Internet and even word processors. However, it’s hard to find a simple, small, free rich text editor with easy installation and customization, and without redundant features that are unnecessary for writing SEO-optimized articles and especially comments, based on our own experience.

If you look for something like this, the Stark Editor is for you. Watch the video on youtube about how our rich text editor works.

The Structure and Features of our WYSIWYG Text Editor

The Stark editor works with Google Chrome, Mozilla Firefox, and Chromium-based browsers on computers and smartphones. It is fast and secure. All inappropriate tags don’t exist for our program. That’s why any text is harmless for it.

Fonts come without special tags. A tag SPAN is modified instead. When a copied text is inserted, the Stark editor recognizes STRONG, B, EM, I, DEL, S and automatically transfers them into necessary styles. For example, <B>some text<B> =
<span style="font-weight:700">some text<span>

Each paragraph has the first line indented by default. For a paragraph without indentation, use a DIV.

text editor's headers

The practice has shown that no one uses “insert” to write over the text, so this function does not work in the Stark editor.

All headers (H2 — H5) can be only internal links. For external links, use plain text with any font and size.

Strikethrough can’t be applied to a link. There is also no button for underlining to avoid mixing up an underlined phrase with a link.

Headers, links, and list items can’t be separated into editable parts. It’s illogical and looks unattractive.

To change the color or font attribute of a header or link, you don't have to highlight it. Just put a cursor on it and make changes.

To turn an unordered list into an ordered one or vice versa, click on the sign or digit at the beginning of a line and choose a preferred option.

text editor's list

An image uploaded from a computer is saved in URL in the BASE64 format.

All images have the attribute [loading="lazy"], and the width and height are automatically set.

As for the video links, only videos from YouTube are allowed for now. In the future, it may change.

You can also use the grid to separate text into sections for your convenience.

rich text editor's grid

How to Download and Install the Text Editor

The installation of the Stark editor is much easier compared to the installation of most rich text editors that takes too much time and effort because you have to learn a lot about how their program, overloaded with various APIs, works before you can customize it as you wish and use it. For example, Quill that we used to have on our site.

Here you understand that it's easier to learn to code and make such an editor yourself.

The only API-functions, our program has, are the following:
getObject(), setObject(object), getHTML(), setHTML(HTML), getText(), length()

There are probably no rich text editors that can be installed by anyone who is not familiar with coding at all. Sure, our text editor is made for developers. But the process of installation doesn’t have to be frustrating, does it?

On this page, you’ll find one file to download. After downloading it, execute the initialization in the JS file as described further, and you can use the editor.

stark-editor.js - ~50Kb

We already use this WYSIWYG editor for writing articles on our sites. Version 3.0 is available for downloading. We continue developing the Stark editor.

WYSIWYG Editor Customization

First of all put the following code on your HTML document section where the editor should be located:
<div class="se-stark-editor[ID] se-se" style="max-width:444px;"></div>
By class 'se-se' editor recognizes its styles.

The WYSIWYG text editor can be customized through JavaScript through initialization. The following settings are available for customization: height, button color, border color, background color, and you can make any button invisible.

  1. ID if you have several copies of the Stark Editor on the page, which must be set at the end of the class "se-stark-editor[ID]";
  2. Default settings for a link — “target” (on the same page or on a new page) and the attribute “noFollow” (yes, no);
  3. The length of the history and the time interval during which it is recorded;
  4. The length of tabulation.
  5. The limit for the text length.
  6. The max size for images.

The full example of initialization:

let seEditor = new StarkEditor({
        id: “”,
        anchor: {
            target: false,
            noFollow: false
        },
        history: {
            maxLength: 500,
            timerInterval: 250
        },
        tab: 4,
        height: 'auto',
        maxHeight: '200px',
        maxImageSize: 256, // number in KB
        buttonColor: 'rgba(55, 115, 155, 0.188)',
        borderColor: 'rgba(0, 255, 255, 0.388)',
        fontColor: 'rgb(218, 231, 224)',
        bgColor: 'rgb(36, 41, 37)',
        limit: 15000
        buttons: {
            grid: 'none',
            movie: 'none'
        }
   })

By default, all the buttons are visible. To make a button invisible, set value to 'none'. Here is the list of all buttons: bold, italic, stroke, smallCaps, fontFamily, fontSize, color, background, align, link, image, movie, headers, grid, length.

We hope you’ll enjoy using the Stark editor. If you have questions, contact us.