Scott Tries StoryBlok - Headless CMS with a Visual Editor

In this edition of Scott Tries Web Services, I try https://www.storyblok.com
Headless CMS with a Visual Editor

As always checkout Level Up Tutorials here: https://www.leveluptutorials.com/

and listen to myself and Wes Bos on Syntax here: https://syntax.fm/

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

Scott Tries StoryBlok - Headless CMS with a Visual Editor

In this edition of Scott Tries Web Services, I try https://www.storyblok.com
Headless CMS with a Visual Editor

As always checkout Level Up Tutorials here: https://www.leveluptutorials.com/

and listen to myself and Wes Bos on Syntax here: https://syntax.fm/

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

1622794592

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:
https://www.intercoolstudio.com/a-comparative-analysis-of-top-10-popular-cms-platforms/

#hirecmsdevelopers
#HireCMSprogrammers
#bestcmsfordevelopers
#HireCMSdevelopersIndia
#HireCMSprogrammersIndia
#DedicatedCMSdevelopers

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

Marcelle Smith

1597061580

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:

Discuss the what, why and when of API-first CMS.
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!

api-first-cms-headless-architecture

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 exploits. Cross-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.

Drawbacks

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

1615430940

Scott Tries StoryBlok - Headless CMS with a Visual Editor

In this edition of Scott Tries Web Services, I try https://www.storyblok.com Headless CMS with a Visual Editor

#developer

Reid Rohan

1663025940

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 (Ajax.org 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 - Medium.com 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 (Ajax.org 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>
<script>
    var editor = ace.edit("editor");
</script>

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:

editor.setTheme("ace/theme/twilight");

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

editor.destroy();
editor.container.remove();

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.

Installation

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.

Quickstart

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

API

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

Quickstart

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

<!-- Include Quill stylesheet -->
<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet" />

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

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

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>

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

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

Download

npm - npm install quill
tar - https://github.com/quilljs/quill/releases

CDN

<!-- Main Quill library -->
<script src="//cdn.quilljs.com/1.0.0/quill.js"></script>
<script src="//cdn.quilljs.com/1.0.0/quill.min.js"></script>

<!-- Theme included stylesheets -->
<link href="//cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet" />
<link href="//cdn.quilljs.com/1.0.0/quill.bubble.css" rel="stylesheet" />

<!-- Core build with no theme, formatting, non-essential modules -->
<link href="//cdn.quilljs.com/1.0.0/quill.core.css" rel="stylesheet" />
<script src="//cdn.quilljs.com/1.0.0/quill.core.js"></script>

View on Github

5 - Medium-editor: Medium.com WYSIWYG editor clone.

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

Basic usage

Demo

demo: http://yabwe.github.io/medium-editor/

Installation

Via npm:

Run in your console: npm install medium-editor

Via bower:

bower install medium-editor

Via an external CDN

Using jsDelivr.

For the latest version:

<script src="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/js/medium-editor.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">

For a custom one:

<script src="//cdn.jsdelivr.net/npm/medium-editor@5.23.2/dist/js/medium-editor.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/medium-editor@5.23.2/dist/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">

Using CDNJS.

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

Usage

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

Installation

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

Configure

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

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

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

See http://mindmup.github.com/bootstrap-wysiwyg/

Customising

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 http://www.quirksmode.org/dom/execCommand.html and https://developer.mozilla.org/en/docs/Rich-Text_Editing_in_Mozilla

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

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:

$('#editor').wysiwyg({
  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.

Installation

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://github.com/ckeditor/ckeditor4-releases.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://github.com/ckeditor/ckeditor-releases.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.

Overview

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="http://lab.lepture.com/editor/editor.css" />
<script type="text/javascript" src="http://lab.lepture.com/editor/editor.js"></script>
<script type="text/javascript" src="http://lab.lepture.com/editor/marked.js"></script>

You can also use jsdelivr CDN:

<link rel="stylesheet" href="//cdn.jsdelivr.net/editor/0.1.0/editor.css">
<script src="//cdn.jsdelivr.net/editor/0.1.0/editor.js"></script>
<script src="//cdn.jsdelivr.net/editor/0.1.0/marked.js"></script>

Having done this, an editor instance can be created:

var editor = new Editor();
editor.render();

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

Get the content

To get back the edited content you use:

editor.codemirror.getValue();

Component

If you are using component, you can install it with:

$ component install lepture/editor

View on Github

Thank you for following this article.

Scott Tries StoryBlok - Headless CMS with a Visual Editor

What is GEEK

Buddha Community

Scott Tries StoryBlok - Headless CMS with a Visual Editor

Comparative Analysis of Top 10 Famous CMS Platforms in 2021

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

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

API-first CMS: Benefits

Drawbacks

Scott Tries StoryBlok - Headless CMS with a Visual Editor

10 Best Libraries for JavaScript Editors

1 - ACE: Ace (Ajax.org Cloud9 Editor).

Take Ace for a spin!

Embedding Ace

2 - CodeMirror: In-browser code editor.

Installation

Quickstart

3 - Esprima: ECMAScript parsing infrastructure for multipurpose analysis.

API

4 - Quill: A cross browser rich text editor with an API.

Quickstart

Download

CDN

5 - Medium-editor: Medium.com WYSIWYG editor clone.

Demo

Installation

Usage

6 - Pen: Enjoy live editing (+markdown).

Source code

Installation

init with id attribute

init with an element

init with options

Configure

Fallback for old browser

Change the editor class

7 - JQuery-notebook: A simple, clean and elegant text editor. Inspired by the awesomeness of Medium.

8 - Bootstrap-wysiwyg: Tiny bootstrap-compatible WYSIWYG rich text editor.

About the editor

Basic Usage

Customising

9 - Ckeditor-releases: The best web text editor for everyone.

Releases Code

Installation

Git clone

Git submodule

Using Package Managers

10 - Editor: A markdown editor. still on development.

Overview

Basic Usage

Get the content

Component

Related videos: