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.
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 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.
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 — H7) 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.
For uploading images, FormData “.se-img-form” with the name “img” and the file, picked by a user, go to the
server folder “/upload”.
The server side after uploading and saving the image should return an object comprising a source with a URL:
{ src: URL }
If the URL is equal to the empty string “”, then the image could not be uploaded for some reason, and
nothing will happen.
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.
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()
While the advantage of copying an object is the volume without tags, the disadvantage is additional fields,
parameters for search in the database. Using raw HTML code is more convenient in our opinion, but today
object
programming is used everywhere, so it is possible to use it here as well.
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 three files (HTML, CSS, JS) to download. After downloading them, execute the
initialization in the JS file as described further, and you can use the editor.
Note that we don’t know what CMS you use if you use any. So we can’t give recommendations about installation
through your CMS and placing the files on your computer. We use Node.js. Our rich text editor was written in
JavaScript.
stark-editor.js - 33Kb
stark-editor.css - 9-12Kb
stark-editor.html - 10-20Kb
Welcome, copy html-object ".se-se" from the console of your browser
menu icons - 7.76Kb
We already use this WYSIWYG editor for writing articles on our site.
Version 2.3 is available for
download. We continue developing the Stark editor.
Although many WYSIWYG text editors offer you customization through JavaScript, as if it is supposed to be
more
convenient, we have a different approach and let you customize the Stark editor directly through HTML and
CSS.
Customization of our program is easy: you can delete the features you don’t need in the HTML code and make a
tiny
editor for comments, or we already have a light version of the Stark editor.
Through JavaScript, however, only essential things can be modified during initialization:
- 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";
- Default settings for a link — “target” (on the same page or on a new page) and the attribute “noFollow”
(yes, no);
- The length of the history and the time interval during which it is recorded;
- The length of tabulation.
- The limit for the text length.
The example of initialization:
let seEditor = new
StarkEditor({
id: “”,
anchor: {
target: false,
noFollow: false
},
history: {
maxLength: 500,
timerInterval: 250
},
tab: 4,
limit: 15000
})
Controls, buttons should not change the name of the first class, this class is an identifier for JavaScript.
We hope you’ll enjoy using the Stark editor. If you appreciate our work, we’ll appreciate your donation as
well. If you have questions, contact us.
