A block-based WYSIWYG editor.
Blocko is a block-based WYSIWYG editor written in ClojureScript meant to be used within JavaScript and ClojureScript projects. Currently, Blocko is not yet production ready, so use at your own risk.
blocko.js
in your HTMLblocko.core.init({
container: '#editor',
content: [],
onChange: (content) => {
// store `content` in your database here.
}
});
container
: any DOM element that can be targeted via querySelector
content
: a JS or JSON object representing the initial dataoptions
: A JS or JSON object representing configurationonChange
: a callback function called when content changes with the updated data[org.clojars.askonomm/blocko "0.1"]
to your dependenciespackage.json
:"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-regular-svg-icons": "^5.15.3",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/react-fontawesome": "^0.1.14",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"sanitize-html": "^2.4.0"
}
Note: I do try to constantly get rid of the reliance on third-party packages, or at the very least non-Clojars packages, so that at one point there wouldn't be any reliance on NPM and you could also include Blocko in a CLJS project that does not use Shadow-CLJS. Until then however, if you use something other than Shadow-CLJS I recommend you get the browser build instead and add that to your project.
(ns your-app
(:require [blocko.core :as blocko]))
(blocko/run
{:content []
:on-change #(fn [content] (prn "store content in your database here"))})
content
: a vector containing the initial dataoptions
: A map representing configurationon-change
: a callback function called when content changes with the updated dataTo configure Blocko you can pass the configuration options to the options
argument.
For example, to change the theme in ClojureScript, do this:
(ns your-app
(:require [blocko.core :as blocko]))
(blocko/run
{:content []
:options {:theme "dark"}
:on-change #(fn [content] (prn "store content in your database here"))})
Or in JS, do this:
blocko.core.init({
container: '#editor',
content: [],
options: {
theme: "dark"
},
onChange: (content) => {
// store `content` in your database here.
}
});
theme
- accepts a string which is either "light" or "dark".Blocko uses a very simple data structure to define the content of the editor. It's simply an array of objects, each object representing one block, an the order that the array is in is also the order at which blocks will be displayed on the editor.
{"id": "uuid",
"type": "paragraph",
"content": "..."}
{:id "uuid",
:type "paragraph",
:content "..."}
{"id": "uuid",
"type": "heading",
"content": "..."}
{:id "uuid",
:type "heading",
:content "..."}
To develop Blocko simply run ./build.sh dev
, which will then compile to public/js/blocko.js
a development version of Blocko that also auto-reloads as you make changes. After that is done, open localhost:8080
in your browser and have fun!
Once you're done with development and want to get the production version, then:
./build.sh release
and check inside dist
for a brand new blocko.js
file.