Brain  Crist

Brain Crist


Scott Tries StoryBlok - Headless CMS with a Visual Editor

In this edition of Scott Tries Web Services, I try
Headless CMS with a Visual Editor

As always checkout Level Up Tutorials here:

and listen to myself and Wes Bos on Syntax here:

Disclaimer - This was not paid for in any way by any service mentioned in this video, these are my honest real-time opinions.

#code #visual studio code #visual studio

What is GEEK

Buddha Community

Scott Tries StoryBlok - Headless CMS with a Visual Editor
Brain  Crist

Brain Crist


Scott Tries StoryBlok - Headless CMS with a Visual Editor

In this edition of Scott Tries Web Services, I try
Headless CMS with a Visual Editor

As always checkout Level Up Tutorials here:

and listen to myself and Wes Bos on Syntax here:

Disclaimer - This was not paid for in any way by any service mentioned in this video, these are my honest real-time opinions.

#code #visual studio code #visual studio

Aarna Davis

Aarna Davis


Comparative Analysis of Top 10 Famous CMS Platforms in 2021

Comparing Top 10 Popular CMS platforms for website development such as WordPress, Wix, Drupal 8.1, Joomla 3.5 to choose the best.

Read this blog here:


#hire cms developers #hire cms programmers #best cms for developers #hire cms developers india #hire cms programmers india #dedicated cms developers

Marcelle  Smith

Marcelle Smith


Introduction to API-First CMS with Directus' Open Source, Headless CMS

“Off with their heads!”

The frontend developers’ call to arms echoed throughout the realm. All across the Internet lands, monolithic, traditional CMS shivered.

Seriously though, we’re finally going to discuss API-first CMS—aka decoupled/headless CMS—on the blog.

From GitHub forks to email inquiries, we’ve noticed an increasing interest in “going headless” in general, but also for e-commerce purpose. So today, we’re going to:

  1. Discuss the whatwhy and when of API-first CMS.
  2. Show how to code a transactional web app with content managed in Directus, an open source headless CMS.

More specifically, I’ll explain how to build a lookbook using a full JAMstack: Metalsmith, Vue.js, Snipcart, and Directus. I’ll even throw in an open source code repo & live demo. :)

First, let’s try to understand how API-first CMS can add value to your workflow.

“API” still sound like a kind of beer to you? Read this smooth primer first.

What is an API-first, headless CMS? Why use one?

Like traditional content management systems, API-first CMS let users manage content through a web UI. So how do they differ?

API-first CMS allow developers to decouple content management from content rendering. A coupled CMS, like WordPress, takes care of both: content is stored in a backend database AND rendered in frontend templates using HTML/CSS. So the “head” that’s missing from a headless CMS is actually that final “presentation layer”:

Unlike a traditional CMS, an API-first CMS exposes its content data via a consumable API.

Your headless CMS isn’t concerned about how you choose to display content. It pushes raw content (e.g. JSON or XML) for you to fetch and display anywhere: mobile app, static site, web app, desktop app, IoT device… or all of these at once!


Headless CMS architecture

So why have they become popular? Why are companies like the NY Times, Lenovo, Spotify, Nike, Apple, Microsoft & New Relic using them?

Because the web has evolved! Frontend tooling & frameworks have exploded. Traditional CMS have become limited in how they display content and are prone to many security exploitsCross-platform content management has become essential to many projects. Static site generators have resurfaced, opening a content management gap API-first CMS could fill, saving non-technical folks from editing Markdown files.

We have many tools and channels to build digital experiences today.

With headless CMS, content can seamlessly follow different forms, not be limited by one.

API-first CMS: Benefits

  • Organizations save time & money: reduction of overhead for cross-platform content management.
  • Developers get more freedom: ditching CMS templates makes for authentic UX. Fewer worries about backend scalability and maintenance.
  • Content is future-proof: reduced impact of migrations & re-designs since content is decoupled from frontend.
  • In some cases, more performance: content is pre-baked and ready to be served.

API-first CMS make for a clear separation of concerns which enhances developer productivity. They foster a technology-agnostic approach to development that resonates with our own product’s values. If you’re interested, we have an in-depth tutorial on decoupling data with Vue.js in the frontend.


Most potential drawbacks (supporting user permissions, multi-languages, etc.) have already been solved. Still, a few potential issues worth mentioning:

  • Might be overkill for a simple website project.
  • Might not provide responsive UI for on-the-go content management.
  • Might not support website tree architecture for content navigation.
  • Might be expensive for client budget.

#api #cms #api-first #headless cms #open -source

Elias  Ortiz

Elias Ortiz


Scott Tries StoryBlok - Headless CMS with a Visual Editor

In this edition of Scott Tries Web Services, I try Headless CMS with a Visual Editor


Reid  Rohan

Reid Rohan


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 ( 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 - 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 ( 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>
    var editor = ace.edit("editor");

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:


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


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.


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.


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 (, 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.


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',
   [ { 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.


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

<!-- Include Quill stylesheet -->
<link href="" rel="stylesheet" />

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

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

<!-- Include the Quill library -->
<script src=""></script>

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

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



<!-- Main Quill library -->
<script src="//"></script>
<script src="//"></script>

<!-- Theme included stylesheets -->
<link href="//" rel="stylesheet" />
<link href="//" rel="stylesheet" />

<!-- Core build with no theme, formatting, non-essential modules -->
<link href="//" rel="stylesheet" />
<script src="//"></script>

View on Github

5 - Medium-editor: WYSIWYG editor clone.

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

Basic usage




Via npm:

Run in your console: npm install medium-editor

Via bower:

bower install medium-editor

Via an external CDN

For the latest version:

<script src="//"></script>
<link rel="stylesheet" href="//" type="text/css" media="screen" charset="utf-8">

For a custom one:

<script src="//"></script>
<link rel="stylesheet" href="//" type="text/css" media="screen" charset="utf-8">

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 -->


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


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);


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


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="" 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>

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



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 and

<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>

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:

  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.


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://

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:// <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.


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="" />
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>

You can also use jsdelivr CDN:

<link rel="stylesheet" href="//">
<script src="//"></script>
<script src="//"></script>

Having done this, an editor instance can be created:

var editor = new Editor();

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

Get the content

To get back the edited content you use:



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