2024-01-23 13:42:54 +01:00
<!doctype html>
< html lang = "en" class = "no-js" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width,initial-scale=1" >
< link rel = "canonical" href = "https://doc.murph-project.org/utils/editors/editorjs/" >
< link rel = "prev" href = "../grapesjs/" >
< link rel = "next" href = "../../cache/" >
< link rel = "icon" href = "../../../_static/img/logo.svg" >
2024-03-31 17:19:55 +02:00
< meta name = "generator" content = "mkdocs-1.5.3, mkdocs-material-9.5.16" >
2024-01-23 13:42:54 +01:00
< title > Editor.js - Documentation of Murph< / title >
2024-03-31 17:19:55 +02:00
< link rel = "stylesheet" href = "../../../assets/stylesheets/main.bcfcd587.min.css" >
2024-01-23 13:42:54 +01:00
2024-03-31 17:19:55 +02:00
< link rel = "stylesheet" href = "../../../assets/stylesheets/palette.06af60db.min.css" >
2024-01-23 13:42:54 +01:00
< link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin >
< link rel = "stylesheet" href = "https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback" >
< style > : root { --md-text-font : "Roboto" ; --md-code-font : "Roboto Mono" } < / style >
< link rel = "stylesheet" href = "../../../_static/css/extra.css" >
< script > _ _md _scope = new URL ( "../../.." , location ) , _ _md _hash = e => [ ... e ] . reduce ( ( e , _ ) => ( e << 5 ) - e + _ . charCodeAt ( 0 ) , 0 ) , _ _md _get = ( e , _ = localStorage , t = _ _md _scope ) => JSON . parse ( _ . getItem ( t . pathname + "." + e ) ) , _ _md _set = ( e , _ , t = localStorage , a = _ _md _scope ) => { try { t . setItem ( a . pathname + "." + e , JSON . stringify ( _ ) ) } catch ( e ) { } } < / script >
< meta property = "og:type" content = "website" >
< meta property = "og:title" content = "Editor.js - Documentation of Murph" >
< meta property = "og:description" content = "None" >
< meta property = "og:image" content = "https://doc.murph-project.org/assets/images/social/utils/editors/editorjs.png" >
< meta property = "og:image:type" content = "image/png" >
< meta property = "og:image:width" content = "1200" >
< meta property = "og:image:height" content = "630" >
< meta property = "og:url" content = "https://doc.murph-project.org/utils/editors/editorjs/" >
< meta name = "twitter:card" content = "summary_large_image" >
< meta name = "twitter:title" content = "Editor.js - Documentation of Murph" >
< meta name = "twitter:description" content = "None" >
< meta name = "twitter:image" content = "https://doc.murph-project.org/assets/images/social/utils/editors/editorjs.png" >
< / head >
< body dir = "ltr" data-md-color-scheme = "default" data-md-color-primary = "light-blue" data-md-color-accent = "indigo" >
< input class = "md-toggle" data-md-toggle = "drawer" type = "checkbox" id = "__drawer" autocomplete = "off" >
< input class = "md-toggle" data-md-toggle = "search" type = "checkbox" id = "__search" autocomplete = "off" >
< label class = "md-overlay" for = "__drawer" > < / label >
< div data-md-component = "skip" >
< a href = "#editorjs" class = "md-skip" >
Skip to content
< / a >
< / div >
< div data-md-component = "announce" >
< / div >
< header class = "md-header" data-md-component = "header" >
< nav class = "md-header__inner md-grid" aria-label = "Header" >
< a href = "../../.." title = "Documentation of Murph" class = "md-header__button md-logo" aria-label = "Documentation of Murph" data-md-component = "logo" >
< img src = "../../../_static/img/logo.svg" alt = "logo" >
< / a >
< label class = "md-header__button md-icon" for = "__drawer" >
< svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" > < path d = "M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z" / > < / svg >
< / label >
< div class = "md-header__title" data-md-component = "header-title" >
< div class = "md-header__ellipsis" >
< div class = "md-header__topic" >
< span class = "md-ellipsis" >
Documentation of Murph
< / span >
< / div >
< div class = "md-header__topic" data-md-component = "header-topic" >
< span class = "md-ellipsis" >
Editor.js
< / span >
< / div >
< / div >
< / div >
< form class = "md-header__option" data-md-component = "palette" >
2024-03-31 17:19:55 +02:00
< input class = "md-option" data-md-color-media = "(prefers-color-scheme: light)" data-md-color-scheme = "default" data-md-color-primary = "light-blue" data-md-color-accent = "indigo" aria-label = "Passer en mode sombre" type = "radio" name = "__palette" id = "__palette_0" >
2024-01-23 13:42:54 +01:00
2024-03-31 17:19:55 +02:00
< label class = "md-header__button md-icon" title = "Passer en mode sombre" for = "__palette_1" hidden >
2024-01-23 13:42:54 +01:00
< svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" > < path d = "M12 8a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4m0 10a6 6 0 0 1-6-6 6 6 0 0 1 6-6 6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69Z" / > < / svg >
< / label >
2024-03-31 17:19:55 +02:00
< input class = "md-option" data-md-color-media = "(prefers-color-scheme: dark)" data-md-color-scheme = "slate" data-md-color-primary = "black" data-md-color-accent = "indigo" aria-label = "Passer en mode clair" type = "radio" name = "__palette" id = "__palette_1" >
2024-01-23 13:42:54 +01:00
2024-03-31 17:19:55 +02:00
< label class = "md-header__button md-icon" title = "Passer en mode clair" for = "__palette_0" hidden >
2024-01-23 13:42:54 +01:00
< svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" > < path d = "M12 18c-.89 0-1.74-.2-2.5-.55C11.56 16.5 13 14.42 13 12c0-2.42-1.44-4.5-3.5-5.45C10.26 6.2 11.11 6 12 6a6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69Z" / > < / svg >
< / label >
< / form >
2024-03-31 17:19:55 +02:00
< script > var media , input , key , value , palette = _ _md _get ( "__palette" ) ; if ( palette && palette . color ) { "(prefers-color-scheme)" === palette . color . media && ( media = matchMedia ( "(prefers-color-scheme: light)" ) , input = document . querySelector ( media . matches ? "[data-md-color-media='(prefers-color-scheme: light)']" : "[data-md-color-media='(prefers-color-scheme: dark)']" ) , palette . color . media = input . getAttribute ( "data-md-color-media" ) , palette . color . scheme = input . getAttribute ( "data-md-color-scheme" ) , palette . color . primary = input . getAttribute ( "data-md-color-primary" ) , palette . color . accent = input . getAttribute ( "data-md-color-accent" ) ) ; for ( [ key , value ] of Object . entries ( palette . color ) ) document . body . setAttribute ( "data-md-color-" + key , value ) } < / script >
2024-01-23 13:42:54 +01:00
< label class = "md-header__button md-icon" for = "__search" >
< svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" > < path d = "M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z" / > < / svg >
< / label >
< div class = "md-search" data-md-component = "search" role = "dialog" >
< label class = "md-search__overlay" for = "__search" > < / label >
< div class = "md-search__inner" role = "search" >
< form class = "md-search__form" name = "search" >
< input type = "text" class = "md-search__input" name = "query" aria-label = "Search" placeholder = "Search" autocapitalize = "off" autocorrect = "off" autocomplete = "off" spellcheck = "false" data-md-component = "search-query" required >
< label class = "md-search__icon md-icon" for = "__search" >
< svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" > < path d = "M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z" / > < / svg >
< svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" > < path d = "M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z" / > < / svg >
< / label >
< nav class = "md-search__options" aria-label = "Search" >
< button type = "reset" class = "md-search__icon md-icon" title = "Clear" aria-label = "Clear" tabindex = "-1" >
< svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" > < path d = "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z" / > < / svg >
< / button >
< / nav >
< / form >
< div class = "md-search__output" >
< div class = "md-search__scrollwrap" data-md-scrollfix >
< div class = "md-search-result" data-md-component = "search-result" >
< div class = "md-search-result__meta" >
Initializing search
< / div >
< ol class = "md-search-result__list" role = "presentation" > < / ol >
< / div >
< / div >
< / div >
< / div >
< / div >
< / nav >
< / header >
< div class = "md-container" data-md-component = "container" >
< nav class = "md-tabs" aria-label = "Tabs" data-md-component = "tabs" >
< div class = "md-grid" >
< ul class = "md-tabs__list" >
< li class = "md-tabs__item" >
< a href = "../../.." class = "md-tabs__link" >
Overview
< / a >
< / li >
< li class = "md-tabs__item" >
< a href = "../../../requirements/" class = "md-tabs__link" >
Installation
< / a >
< / li >
< li class = "md-tabs__item md-tabs__item--active" >
< a href = "../../../tree/" class = "md-tabs__link" >
Documentation
< / a >
< / li >
< li class = "md-tabs__item" >
< a href = "../../../changelog/core/" class = "md-tabs__link" >
Changelog
< / a >
< / li >
< / ul >
< / div >
< / nav >
< main class = "md-main" data-md-component = "main" >
< div class = "md-main__inner md-grid" >
< div class = "md-sidebar md-sidebar--primary" data-md-component = "sidebar" data-md-type = "navigation" >
< div class = "md-sidebar__scrollwrap" >
< div class = "md-sidebar__inner" >
< nav class = "md-nav md-nav--primary md-nav--lifted" aria-label = "Navigation" data-md-level = "0" >
< label class = "md-nav__title" for = "__drawer" >
< a href = "../../.." title = "Documentation of Murph" class = "md-nav__button md-logo" aria-label = "Documentation of Murph" data-md-component = "logo" >
< img src = "../../../_static/img/logo.svg" alt = "logo" >
< / a >
Documentation of Murph
< / label >
< ul class = "md-nav__list" data-md-scrollfix >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
2024-03-31 17:19:55 +02:00
< li class = "md-nav__item md-nav__item--nested" >
2024-01-23 13:42:54 +01:00
< input class = "md-nav__toggle md-toggle " type = "checkbox" id = "__nav_1" >
2024-03-31 17:19:55 +02:00
< label class = "md-nav__link" for = "__nav_1" id = "__nav_1_label" tabindex = "0" >
2024-01-23 13:42:54 +01:00
< span class = "md-ellipsis" >
Overview
< / span >
< span class = "md-nav__icon md-icon" > < / span >
< / label >
< nav class = "md-nav" data-md-level = "1" aria-labelledby = "__nav_1_label" aria-expanded = "false" >
< label class = "md-nav__title" for = "__nav_1" >
< span class = "md-nav__icon md-icon" > < / span >
Overview
< / label >
< ul class = "md-nav__list" data-md-scrollfix >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item" >
< a href = "../../.." class = "md-nav__link" >
< span class = "md-ellipsis" >
Overview
< / span >
< / a >
< / li >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item" >
< a href = "../../../sources/" class = "md-nav__link" >
< span class = "md-ellipsis" >
Source codes
< / span >
< / a >
< / li >
< / ul >
< / nav >
< / li >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
2024-03-31 17:19:55 +02:00
< li class = "md-nav__item md-nav__item--nested" >
2024-01-23 13:42:54 +01:00
< input class = "md-nav__toggle md-toggle " type = "checkbox" id = "__nav_2" >
2024-03-31 17:19:55 +02:00
< label class = "md-nav__link" for = "__nav_2" id = "__nav_2_label" tabindex = "0" >
2024-01-23 13:42:54 +01:00
< span class = "md-ellipsis" >
Installation
< / span >
< span class = "md-nav__icon md-icon" > < / span >
< / label >
< nav class = "md-nav" data-md-level = "1" aria-labelledby = "__nav_2_label" aria-expanded = "false" >
< label class = "md-nav__title" for = "__nav_2" >
< span class = "md-nav__icon md-icon" > < / span >
Installation
< / label >
< ul class = "md-nav__list" data-md-scrollfix >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item" >
< a href = "../../../requirements/" class = "md-nav__link" >
< span class = "md-ellipsis" >
Requirements
< / span >
< / a >
< / li >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item" >
< a href = "../../../procedure/" class = "md-nav__link" >
< span class = "md-ellipsis" >
Procedure
< / span >
< / a >
< / li >
< / ul >
< / nav >
< / li >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested" >
< input class = "md-nav__toggle md-toggle " type = "checkbox" id = "__nav_3" checked >
< label class = "md-nav__link" for = "__nav_3" id = "__nav_3_label" tabindex = "" >
< span class = "md-ellipsis" >
Documentation
< / span >
< span class = "md-nav__icon md-icon" > < / span >
< / label >
< nav class = "md-nav" data-md-level = "1" aria-labelledby = "__nav_3_label" aria-expanded = "true" >
< label class = "md-nav__title" for = "__nav_3" >
< span class = "md-nav__icon md-icon" > < / span >
Documentation
< / label >
< ul class = "md-nav__list" data-md-scrollfix >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item md-nav__item--nested" >
< input class = "md-nav__toggle md-toggle " type = "checkbox" id = "__nav_3_1" >
< label class = "md-nav__link" for = "__nav_3_1" id = "__nav_3_1_label" tabindex = "0" >
< span class = "md-ellipsis" >
Tree manager
< / span >
< span class = "md-nav__icon md-icon" > < / span >
< / label >
< nav class = "md-nav" data-md-level = "2" aria-labelledby = "__nav_3_1_label" aria-expanded = "false" >
< label class = "md-nav__title" for = "__nav_3_1" >
< span class = "md-nav__icon md-icon" > < / span >
Tree manager
< / label >
< ul class = "md-nav__list" data-md-scrollfix >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item" >
< a href = "../../../tree/" class = "md-nav__link" >
< span class = "md-ellipsis" >
Overview
< / span >
< / a >
< / li >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item" >
< a href = "../../../tree/navigation/" class = "md-nav__link" >
< span class = "md-ellipsis" >
Navigation
< / span >
< / a >
< / li >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item" >
< a href = "../../../tree/menu/" class = "md-nav__link" >
< span class = "md-ellipsis" >
Menu
< / span >
< / a >
< / li >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item" >
< a href = "../../../tree/node/" class = "md-nav__link" >
< span class = "md-ellipsis" >
Node
< / span >
< / a >
< / li >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item" >
< a href = "../../../tree/page/" class = "md-nav__link" >
< span class = "md-ellipsis" >
Page
< / span >
< / a >
< / li >
< / ul >
< / nav >
< / li >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item" >
< a href = "../../../controller/" class = "md-nav__link" >
< span class = "md-ellipsis" >
Controller
< / span >
< / a >
< / li >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item" >
< a href = "../../../template/" class = "md-nav__link" >
< span class = "md-ellipsis" >
Template
< / span >
< / a >
< / li >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item md-nav__item--nested" >
< input class = "md-nav__toggle md-toggle " type = "checkbox" id = "__nav_3_4" >
< label class = "md-nav__link" for = "__nav_3_4" id = "__nav_3_4_label" tabindex = "0" >
< span class = "md-ellipsis" >
Entities
< / span >
< span class = "md-nav__icon md-icon" > < / span >
< / label >
< nav class = "md-nav" data-md-level = "2" aria-labelledby = "__nav_3_4_label" aria-expanded = "false" >
< label class = "md-nav__title" for = "__nav_3_4" >
< span class = "md-nav__icon md-icon" > < / span >
Entities
< / label >
< ul class = "md-nav__list" data-md-scrollfix >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item" >
< a href = "../../../entities/em/" class = "md-nav__link" >
< span class = "md-ellipsis" >
Entity Manager
< / span >
< / a >
< / li >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item" >
< a href = "../../../entities/query/" class = "md-nav__link" >
< span class = "md-ellipsis" >
Repository Query
< / span >
< / a >
< / li >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item" >
< a href = "../../../entities/factory/" class = "md-nav__link" >
< span class = "md-ellipsis" >
Factory
< / span >
< / a >
< / li >
< / ul >
< / nav >
< / li >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item md-nav__item--nested" >
< input class = "md-nav__toggle md-toggle " type = "checkbox" id = "__nav_3_5" >
< label class = "md-nav__link" for = "__nav_3_5" id = "__nav_3_5_label" tabindex = "0" >
< span class = "md-ellipsis" >
CRUD
< / span >
< span class = "md-nav__icon md-icon" > < / span >
< / label >
< nav class = "md-nav" data-md-level = "2" aria-labelledby = "__nav_3_5_label" aria-expanded = "false" >
< label class = "md-nav__title" for = "__nav_3_5" >
< span class = "md-nav__icon md-icon" > < / span >
CRUD
< / label >
< ul class = "md-nav__list" data-md-scrollfix >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item" >
< a href = "../../../crud/" class = "md-nav__link" >
< span class = "md-ellipsis" >
Overview
< / span >
< / a >
< / li >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item" >
< a href = "../../../crud/generator/" class = "md-nav__link" >
< span class = "md-ellipsis" >
Generator
< / span >
< / a >
< / li >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item" >
< a href = "../../../crud/configuration/" class = "md-nav__link" >
< span class = "md-ellipsis" >
Configuration
< / span >
< / a >
< / li >
< / ul >
< / nav >
< / li >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item md-nav__item--nested" >
< input class = "md-nav__toggle md-toggle " type = "checkbox" id = "__nav_3_6" >
< label class = "md-nav__link" for = "__nav_3_6" id = "__nav_3_6_label" tabindex = "0" >
< span class = "md-ellipsis" >
Settings
< / span >
< span class = "md-nav__icon md-icon" > < / span >
< / label >
< nav class = "md-nav" data-md-level = "2" aria-labelledby = "__nav_3_6_label" aria-expanded = "false" >
< label class = "md-nav__title" for = "__nav_3_6" >
< span class = "md-nav__icon md-icon" > < / span >
Settings
< / label >
< ul class = "md-nav__list" data-md-scrollfix >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item" >
< a href = "../../../settings/global/" class = "md-nav__link" >
< span class = "md-ellipsis" >
Global settings
< / span >
< / a >
< / li >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item" >
< a href = "../../../settings/navigation/" class = "md-nav__link" >
< span class = "md-ellipsis" >
Navigation settings
< / span >
< / a >
< / li >
< / ul >
< / nav >
< / li >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item md-nav__item--active md-nav__item--nested" >
< input class = "md-nav__toggle md-toggle " type = "checkbox" id = "__nav_3_7" checked >
< label class = "md-nav__link" for = "__nav_3_7" id = "__nav_3_7_label" tabindex = "0" >
< span class = "md-ellipsis" >
Form
< / span >
< span class = "md-nav__icon md-icon" > < / span >
< / label >
< nav class = "md-nav" data-md-level = "2" aria-labelledby = "__nav_3_7_label" aria-expanded = "true" >
< label class = "md-nav__title" for = "__nav_3_7" >
< span class = "md-nav__icon md-icon" > < / span >
Form
< / label >
< ul class = "md-nav__list" data-md-scrollfix >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item" >
< a href = "../../form/file_picker/" class = "md-nav__link" >
< span class = "md-ellipsis" >
Picker picker
< / span >
< / a >
< / li >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item" >
< a href = "../../form/collection/" class = "md-nav__link" >
< span class = "md-ellipsis" >
Collection
< / span >
< / a >
< / li >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item md-nav__item--active md-nav__item--nested" >
< input class = "md-nav__toggle md-toggle " type = "checkbox" id = "__nav_3_7_3" checked >
< label class = "md-nav__link" for = "__nav_3_7_3" id = "__nav_3_7_3_label" tabindex = "0" >
< span class = "md-ellipsis" >
Editors
< / span >
< span class = "md-nav__icon md-icon" > < / span >
< / label >
< nav class = "md-nav" data-md-level = "3" aria-labelledby = "__nav_3_7_3_label" aria-expanded = "true" >
< label class = "md-nav__title" for = "__nav_3_7_3" >
< span class = "md-nav__icon md-icon" > < / span >
Editors
< / label >
< ul class = "md-nav__list" data-md-scrollfix >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item" >
< a href = "../tinymce/" class = "md-nav__link" >
< span class = "md-ellipsis" >
TinyMCE
< / span >
< / a >
< / li >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item" >
< a href = "../grapesjs/" class = "md-nav__link" >
< span class = "md-ellipsis" >
GrapesJS
< / span >
< / a >
< / li >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item md-nav__item--active" >
< input class = "md-nav__toggle md-toggle" type = "checkbox" id = "__toc" >
< label class = "md-nav__link md-nav__link--active" for = "__toc" >
< span class = "md-ellipsis" >
Editor.js
< / span >
< span class = "md-nav__icon md-icon" > < / span >
< / label >
< a href = "./" class = "md-nav__link md-nav__link--active" >
< span class = "md-ellipsis" >
Editor.js
< / span >
< / a >
< nav class = "md-nav md-nav--secondary" aria-label = "Table of contents" >
< label class = "md-nav__title" for = "__toc" >
< span class = "md-nav__icon md-icon" > < / span >
Table of contents
< / label >
< ul class = "md-nav__list" data-md-component = "toc" data-md-scrollfix >
< li class = "md-nav__item" >
< a href = "#classic-form" class = "md-nav__link" >
2024-03-31 17:19:55 +02:00
< span class = "md-ellipsis" >
Classic form
< / span >
2024-01-23 13:42:54 +01:00
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "#page-form" class = "md-nav__link" >
2024-03-31 17:19:55 +02:00
< span class = "md-ellipsis" >
Page form
< / span >
2024-01-23 13:42:54 +01:00
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "#rendering" class = "md-nav__link" >
2024-03-31 17:19:55 +02:00
< span class = "md-ellipsis" >
Rendering
< / span >
2024-01-23 13:42:54 +01:00
< / a >
< / li >
< / ul >
< / nav >
< / li >
< / ul >
< / nav >
< / li >
< / ul >
< / nav >
< / li >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item md-nav__item--nested" >
< input class = "md-nav__toggle md-toggle " type = "checkbox" id = "__nav_3_8" >
< label class = "md-nav__link" for = "__nav_3_8" id = "__nav_3_8_label" tabindex = "0" >
< span class = "md-ellipsis" >
Utils
< / span >
< span class = "md-nav__icon md-icon" > < / span >
< / label >
< nav class = "md-nav" data-md-level = "2" aria-labelledby = "__nav_3_8_label" aria-expanded = "false" >
< label class = "md-nav__title" for = "__nav_3_8" >
< span class = "md-nav__icon md-icon" > < / span >
Utils
< / label >
< ul class = "md-nav__list" data-md-scrollfix >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item" >
< a href = "../../cache/" class = "md-nav__link" >
< span class = "md-ellipsis" >
Cache Manager
< / span >
< / a >
< / li >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item" >
< a href = "../../doctrine/" class = "md-nav__link" >
< span class = "md-ellipsis" >
Doctrine
< / span >
< / a >
< / li >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item" >
< a href = "../../file_handler/" class = "md-nav__link" >
< span class = "md-ellipsis" >
File upload handler
< / span >
< / a >
< / li >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item" >
< a href = "../../file_attribute/" class = "md-nav__link" >
< span class = "md-ellipsis" >
File attribute
< / span >
< / a >
< / li >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item" >
< a href = "../../mail/" class = "md-nav__link" >
< span class = "md-ellipsis" >
Mail notifier
< / span >
< / a >
< / li >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item" >
< a href = "../../slug/" class = "md-nav__link" >
< span class = "md-ellipsis" >
Slug
< / span >
< / a >
< / li >
< / ul >
< / nav >
< / li >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item" >
< a href = "../../../abtesting/" class = "md-nav__link" >
< span class = "md-ellipsis" >
A/B Testing
< / span >
< / a >
< / li >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item" >
< a href = "../../../users/" class = "md-nav__link" >
< span class = "md-ellipsis" >
Users
< / span >
< / a >
< / li >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item" >
< a href = "../../../tasks/" class = "md-nav__link" >
< span class = "md-ellipsis" >
Tasks
< / span >
< / a >
< / li >
< / ul >
< / nav >
< / li >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
2024-03-31 17:19:55 +02:00
< li class = "md-nav__item md-nav__item--nested" >
2024-01-23 13:42:54 +01:00
< input class = "md-nav__toggle md-toggle " type = "checkbox" id = "__nav_4" >
2024-03-31 17:19:55 +02:00
< label class = "md-nav__link" for = "__nav_4" id = "__nav_4_label" tabindex = "0" >
2024-01-23 13:42:54 +01:00
< span class = "md-ellipsis" >
Changelog
< / span >
< span class = "md-nav__icon md-icon" > < / span >
< / label >
< nav class = "md-nav" data-md-level = "1" aria-labelledby = "__nav_4_label" aria-expanded = "false" >
< label class = "md-nav__title" for = "__nav_4" >
< span class = "md-nav__icon md-icon" > < / span >
Changelog
< / label >
< ul class = "md-nav__list" data-md-scrollfix >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item" >
< a href = "../../../changelog/core/" class = "md-nav__link" >
< span class = "md-ellipsis" >
murph/murph-core
< / span >
< / a >
< / li >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< li class = "md-nav__item" >
< a href = "../../../changelog/skeleton/" class = "md-nav__link" >
< span class = "md-ellipsis" >
murph/murph-skeleton
< / span >
< / a >
< / li >
< / ul >
< / nav >
< / li >
< / ul >
< / nav >
< / div >
< / div >
< / div >
< div class = "md-sidebar md-sidebar--secondary" data-md-component = "sidebar" data-md-type = "toc" >
< div class = "md-sidebar__scrollwrap" >
< div class = "md-sidebar__inner" >
< nav class = "md-nav md-nav--secondary" aria-label = "Table of contents" >
< label class = "md-nav__title" for = "__toc" >
< span class = "md-nav__icon md-icon" > < / span >
Table of contents
< / label >
< ul class = "md-nav__list" data-md-component = "toc" data-md-scrollfix >
< li class = "md-nav__item" >
< a href = "#classic-form" class = "md-nav__link" >
2024-03-31 17:19:55 +02:00
< span class = "md-ellipsis" >
Classic form
< / span >
2024-01-23 13:42:54 +01:00
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "#page-form" class = "md-nav__link" >
2024-03-31 17:19:55 +02:00
< span class = "md-ellipsis" >
Page form
< / span >
2024-01-23 13:42:54 +01:00
< / a >
< / li >
< li class = "md-nav__item" >
< a href = "#rendering" class = "md-nav__link" >
2024-03-31 17:19:55 +02:00
< span class = "md-ellipsis" >
Rendering
< / span >
2024-01-23 13:42:54 +01:00
< / a >
< / li >
< / ul >
< / nav >
< / div >
< / div >
< / div >
< div class = "md-content" data-md-component = "content" >
< article class = "md-content__inner md-typeset" >
< h1 id = "editorjs" > Editor.js< / h1 >
< p > Workspace in classic editors is made of a single contenteditable element, used to create different HTML markups. Editor.js workspace consists of separate Blocks: paragraphs, headings, images, lists, quotes, etc. Each of them is an independent contenteditable element (or more complex structure) provided by Plugin and united by Editor's Core.< / p >
< p > Editor.js is fully integrated in Murph as form types.< / p >
< p > < img alt = "" src = "/_static/img/editors/editorjs.png" / > < / p >
< h2 id = "classic-form" > Classic form< / h2 >
< div class = "highlight" > < pre > < span > < / span > < code > < a id = "__codelineno-0-1" name = "__codelineno-0-1" href = "#__codelineno-0-1" > < / a > < span class = "c1" > // src/Form/ExampleType.php< / span >
< a id = "__codelineno-0-2" name = "__codelineno-0-2" href = "#__codelineno-0-2" > < / a > < span class = "k" > namespace< / span > < span class = "nx" > App\Form\ExampleType< / span > < span class = "p" > ;< / span >
< a id = "__codelineno-0-3" name = "__codelineno-0-3" href = "#__codelineno-0-3" > < / a >
< a id = "__codelineno-0-4" name = "__codelineno-0-4" href = "#__codelineno-0-4" > < / a > < span class = "k" > use< / span > < span class = "nx" > App\Core\Form\Type\EditorJsTextareaType< / span > < span class = "p" > ;< / span >
< a id = "__codelineno-0-5" name = "__codelineno-0-5" href = "#__codelineno-0-5" > < / a > < span class = "k" > use< / span > < span class = "nx" > Symfony\Component\Form\AbstractType< / span > < span class = "p" > ;< / span >
< a id = "__codelineno-0-6" name = "__codelineno-0-6" href = "#__codelineno-0-6" > < / a > < span class = "k" > use< / span > < span class = "nx" > Symfony\Component\Form\FormBuilderInterface< / span > < span class = "p" > ;< / span >
< a id = "__codelineno-0-7" name = "__codelineno-0-7" href = "#__codelineno-0-7" > < / a >
< a id = "__codelineno-0-8" name = "__codelineno-0-8" href = "#__codelineno-0-8" > < / a > < span class = "k" > class< / span > < span class = "nc" > ExampleType< / span > < span class = "k" > extends< / span > < span class = "nx" > AbstractType< / span >
< a id = "__codelineno-0-9" name = "__codelineno-0-9" href = "#__codelineno-0-9" > < / a > < span class = "p" > {< / span >
< a id = "__codelineno-0-10" name = "__codelineno-0-10" href = "#__codelineno-0-10" > < / a > < span class = "k" > public< / span > < span class = "k" > function< / span > < span class = "nf" > buildForm< / span > < span class = "p" > (< / span > < span class = "nx" > FormBuilderInterface< / span > < span class = "nv" > $builder< / span > < span class = "p" > ,< / span > < span class = "k" > array< / span > < span class = "nv" > $options< / span > < span class = "p" > )< / span >
< a id = "__codelineno-0-11" name = "__codelineno-0-11" href = "#__codelineno-0-11" > < / a > < span class = "p" > {< / span >
< a id = "__codelineno-0-12" name = "__codelineno-0-12" href = "#__codelineno-0-12" > < / a > < span class = "nv" > $builder< / span > < span class = "o" > -> < / span > < span class = "na" > add< / span > < span class = "p" > (< / span >
< a id = "__codelineno-0-13" name = "__codelineno-0-13" href = "#__codelineno-0-13" > < / a > < span class = "s1" > ' myField' < / span > < span class = "p" > ,< / span >
< a id = "__codelineno-0-14" name = "__codelineno-0-14" href = "#__codelineno-0-14" > < / a > < span class = "nx" > EditorJsTextareaType< / span > < span class = "o" > ::< / span > < span class = "na" > class< / span >
< a id = "__codelineno-0-15" name = "__codelineno-0-15" href = "#__codelineno-0-15" > < / a > < span class = "p" > );< / span >
< a id = "__codelineno-0-16" name = "__codelineno-0-16" href = "#__codelineno-0-16" > < / a >
< a id = "__codelineno-0-17" name = "__codelineno-0-17" href = "#__codelineno-0-17" > < / a > < span class = "c1" > // ...< / span >
< a id = "__codelineno-0-18" name = "__codelineno-0-18" href = "#__codelineno-0-18" > < / a > < span class = "p" > }< / span >
< a id = "__codelineno-0-19" name = "__codelineno-0-19" href = "#__codelineno-0-19" > < / a >
< a id = "__codelineno-0-20" name = "__codelineno-0-20" href = "#__codelineno-0-20" > < / a > < span class = "c1" > // ...< / span >
< a id = "__codelineno-0-21" name = "__codelineno-0-21" href = "#__codelineno-0-21" > < / a > < span class = "p" > }< / span >
< / code > < / pre > < / div >
< p > Modified data should return stringified JSON array if empty:< / p >
< div class = "highlight" > < pre > < span > < / span > < code > < a id = "__codelineno-1-1" name = "__codelineno-1-1" href = "#__codelineno-1-1" > < / a > < span class = "k" > public< / span > < span class = "k" > function< / span > < span class = "nf" > getMyField< / span > < span class = "p" > ()< / span > < span class = "o" > :< / span > < span class = "nx" > string< / span >
< a id = "__codelineno-1-2" name = "__codelineno-1-2" href = "#__codelineno-1-2" > < / a > < span class = "p" > {< / span >
< a id = "__codelineno-1-3" name = "__codelineno-1-3" href = "#__codelineno-1-3" > < / a > < span class = "k" > if< / span > < span class = "p" > (< / span > < span class = "k" > empty< / span > < span class = "p" > (< / span > < span class = "nv" > $this< / span > < span class = "o" > -> < / span > < span class = "na" > myField< / span > < span class = "p" > ))< / span > < span class = "p" > {< / span >
< a id = "__codelineno-1-4" name = "__codelineno-1-4" href = "#__codelineno-1-4" > < / a > < span class = "nv" > $this< / span > < span class = "o" > -> < / span > < span class = "na" > myField< / span > < span class = "o" > =< / span > < span class = "s1" > ' []' < / span > < span class = "p" > ;< / span >
< a id = "__codelineno-1-5" name = "__codelineno-1-5" href = "#__codelineno-1-5" > < / a > < span class = "p" > }< / span >
< a id = "__codelineno-1-6" name = "__codelineno-1-6" href = "#__codelineno-1-6" > < / a >
< a id = "__codelineno-1-7" name = "__codelineno-1-7" href = "#__codelineno-1-7" > < / a > < span class = "k" > return< / span > < span class = "nv" > $this< / span > < span class = "o" > -> < / span > < span class = "na" > myField< / span > < span class = "p" > ;< / span >
< a id = "__codelineno-1-8" name = "__codelineno-1-8" href = "#__codelineno-1-8" > < / a > < span class = "p" > }< / span >
< / code > < / pre > < / div >
< h2 id = "page-form" > Page form< / h2 >
< div class = "highlight" > < pre > < span > < / span > < code > < a id = "__codelineno-2-1" name = "__codelineno-2-1" href = "#__codelineno-2-1" > < / a > < span class = "c1" > // src/Entity/Page/YourPage.php< / span >
< a id = "__codelineno-2-2" name = "__codelineno-2-2" href = "#__codelineno-2-2" > < / a > < span class = "k" > namespace< / span > < span class = "nx" > App\Entity\Page< / span > < span class = "p" > ;< / span >
< a id = "__codelineno-2-3" name = "__codelineno-2-3" href = "#__codelineno-2-3" > < / a >
< a id = "__codelineno-2-4" name = "__codelineno-2-4" href = "#__codelineno-2-4" > < / a > < span class = "k" > use< / span > < span class = "nx" > App\Core\Entity\Site\Page\Block< / span > < span class = "p" > ;< / span >
< a id = "__codelineno-2-5" name = "__codelineno-2-5" href = "#__codelineno-2-5" > < / a > < span class = "k" > use< / span > < span class = "nx" > App\Core\Form\Site\Page\EditorJsTextareaBlockType< / span > < span class = "p" > ;< / span >
< a id = "__codelineno-2-6" name = "__codelineno-2-6" href = "#__codelineno-2-6" > < / a >
< a id = "__codelineno-2-7" name = "__codelineno-2-7" href = "#__codelineno-2-7" > < / a > < span class = "p" > #[< / span > < span class = "o" > @< / span > < span class = "nd" > ORM\Entity< / span > < span class = "p" > ]< / span >
< a id = "__codelineno-2-8" name = "__codelineno-2-8" href = "#__codelineno-2-8" > < / a > < span class = "k" > class< / span > < span class = "nc" > YourPage< / span > < span class = "k" > extends< / span > < span class = "nx" > Page< / span >
< a id = "__codelineno-2-9" name = "__codelineno-2-9" href = "#__codelineno-2-9" > < / a > < span class = "p" > {< / span >
< a id = "__codelineno-2-10" name = "__codelineno-2-10" href = "#__codelineno-2-10" > < / a > < span class = "k" > public< / span > < span class = "k" > function< / span > < span class = "nf" > buildForm< / span > < span class = "p" > (< / span > < span class = "nx" > FormBuilderInterface< / span > < span class = "nv" > $builder< / span > < span class = "p" > ,< / span > < span class = "k" > array< / span > < span class = "nv" > $options< / span > < span class = "p" > )< / span >
< a id = "__codelineno-2-11" name = "__codelineno-2-11" href = "#__codelineno-2-11" > < / a > < span class = "p" > {< / span >
< a id = "__codelineno-2-12" name = "__codelineno-2-12" href = "#__codelineno-2-12" > < / a > < span class = "nv" > $builder< / span > < span class = "o" > -> < / span > < span class = "na" > add< / span > < span class = "p" > (< / span >
< a id = "__codelineno-2-13" name = "__codelineno-2-13" href = "#__codelineno-2-13" > < / a > < span class = "s1" > ' myBlock' < / span > < span class = "p" > ,< / span >
< a id = "__codelineno-2-14" name = "__codelineno-2-14" href = "#__codelineno-2-14" > < / a > < span class = "nx" > EditorJsTextareaBlockType< / span > < span class = "o" > ::< / span > < span class = "na" > class< / span > < span class = "p" > ,< / span >
< a id = "__codelineno-2-15" name = "__codelineno-2-15" href = "#__codelineno-2-15" > < / a > < span class = "p" > [< / span >
< a id = "__codelineno-2-16" name = "__codelineno-2-16" href = "#__codelineno-2-16" > < / a > < span class = "s1" > ' label' < / span > < span class = "o" > => < / span > < span class = "s1" > ' My block' < / span > < span class = "p" > ,< / span >
< a id = "__codelineno-2-17" name = "__codelineno-2-17" href = "#__codelineno-2-17" > < / a > < span class = "s1" > ' row_attr' < / span > < span class = "o" > => < / span > < span class = "p" > [< / span >
< a id = "__codelineno-2-18" name = "__codelineno-2-18" href = "#__codelineno-2-18" > < / a > < span class = "p" > ],< / span >
< a id = "__codelineno-2-19" name = "__codelineno-2-19" href = "#__codelineno-2-19" > < / a > < span class = "s1" > ' options' < / span > < span class = "o" > => < / span > < span class = "p" > [< / span >
< a id = "__codelineno-2-20" name = "__codelineno-2-20" href = "#__codelineno-2-20" > < / a > < span class = "c1" > // options given to the sub form< / span >
< a id = "__codelineno-2-21" name = "__codelineno-2-21" href = "#__codelineno-2-21" > < / a > < span class = "p" > ],< / span >
< a id = "__codelineno-2-22" name = "__codelineno-2-22" href = "#__codelineno-2-22" > < / a > < span class = "p" > ]< / span >
< a id = "__codelineno-2-23" name = "__codelineno-2-23" href = "#__codelineno-2-23" > < / a > < span class = "p" > );< / span >
< a id = "__codelineno-2-24" name = "__codelineno-2-24" href = "#__codelineno-2-24" > < / a >
< a id = "__codelineno-2-25" name = "__codelineno-2-25" href = "#__codelineno-2-25" > < / a > < span class = "c1" > // ...< / span >
< a id = "__codelineno-2-26" name = "__codelineno-2-26" href = "#__codelineno-2-26" > < / a > < span class = "p" > }< / span >
< a id = "__codelineno-2-27" name = "__codelineno-2-27" href = "#__codelineno-2-27" > < / a >
< a id = "__codelineno-2-28" name = "__codelineno-2-28" href = "#__codelineno-2-28" > < / a > < span class = "k" > public< / span > < span class = "k" > function< / span > < span class = "nf" > setMyBlock< / span > < span class = "p" > (< / span > < span class = "nx" > Block< / span > < span class = "nv" > $block< / span > < span class = "p" > )< / span >
< a id = "__codelineno-2-29" name = "__codelineno-2-29" href = "#__codelineno-2-29" > < / a > < span class = "p" > {< / span >
< a id = "__codelineno-2-30" name = "__codelineno-2-30" href = "#__codelineno-2-30" > < / a > < span class = "k" > return< / span > < span class = "nv" > $this< / span > < span class = "o" > -> < / span > < span class = "na" > setBlock< / span > < span class = "p" > (< / span > < span class = "nv" > $block< / span > < span class = "p" > );< / span >
< a id = "__codelineno-2-31" name = "__codelineno-2-31" href = "#__codelineno-2-31" > < / a > < span class = "p" > }< / span >
< a id = "__codelineno-2-32" name = "__codelineno-2-32" href = "#__codelineno-2-32" > < / a >
< a id = "__codelineno-2-33" name = "__codelineno-2-33" href = "#__codelineno-2-33" > < / a > < span class = "k" > public< / span > < span class = "k" > function< / span > < span class = "nf" > getMyBlock< / span > < span class = "p" > ()< / span > < span class = "o" > :< / span > < span class = "nx" > Block< / span >
< a id = "__codelineno-2-34" name = "__codelineno-2-34" href = "#__codelineno-2-34" > < / a > < span class = "p" > {< / span >
< a id = "__codelineno-2-35" name = "__codelineno-2-35" href = "#__codelineno-2-35" > < / a > < span class = "k" > return< / span > < span class = "nv" > $this< / span > < span class = "o" > -> < / span > < span class = "na" > getBlock< / span > < span class = "p" > (< / span > < span class = "s1" > ' myBlock' < / span > < span class = "p" > );< / span >
< a id = "__codelineno-2-36" name = "__codelineno-2-36" href = "#__codelineno-2-36" > < / a > < span class = "p" > }< / span >
< a id = "__codelineno-2-37" name = "__codelineno-2-37" href = "#__codelineno-2-37" > < / a >
< a id = "__codelineno-2-38" name = "__codelineno-2-38" href = "#__codelineno-2-38" > < / a > < span class = "c1" > // ...< / span >
< a id = "__codelineno-2-39" name = "__codelineno-2-39" href = "#__codelineno-2-39" > < / a > < span class = "p" > }< / span >
< / code > < / pre > < / div >
< h2 id = "rendering" > Rendering< / h2 >
< p > Editor.js will generate a JSON which contains blocks.< / p >
< p > Supported blocks:< / p >
< ul >
< li > paragraph< / li >
< li > header< / li >
< li > quote< / li >
< li > delimiter< / li >
< li > warning< / li >
< li > list< / li >
< li > nestedList< / li >
< li > checkList< / li >
< li > table< / li >
< li > code< / li >
< li > raw< / li >
< li > image< / li >
< li > link< / li >
< / ul >
< p > To render HTML, the basic way is: < code > {{ value|editorjs_to_html }}< / code > < br / >
If you want to render specific blocks: < code > {{ value|editorjs_to_html(['paragraph', 'header', ...])) }}< / code > < / p >
< p > Block have default templates stored in < code > vendor/murph/murph-core/src/core/Resources/views/editorjs< / code > .< br / >
They can be simply overridden in < code > config/packages/app.yaml< / code > :< / p >
< div class = "highlight" > < pre > < span > < / span > < code > < a id = "__codelineno-3-1" name = "__codelineno-3-1" href = "#__codelineno-3-1" > < / a > < span class = "nt" > core< / span > < span class = "p" > :< / span >
< a id = "__codelineno-3-2" name = "__codelineno-3-2" href = "#__codelineno-3-2" > < / a > < span class = "w" > < / span > < span class = "nt" > editor_js< / span > < span class = "p" > :< / span >
< a id = "__codelineno-3-3" name = "__codelineno-3-3" href = "#__codelineno-3-3" > < / a > < span class = "w" > < / span > < span class = "nt" > blocks< / span > < span class = "p" > :< / span >
< a id = "__codelineno-3-4" name = "__codelineno-3-4" href = "#__codelineno-3-4" > < / a > < span class = "w" > < / span > < span class = "nt" > paragraph< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "s" > ' path/to/paragraph.html.twig' < / span >
< a id = "__codelineno-3-5" name = "__codelineno-3-5" href = "#__codelineno-3-5" > < / a > < span class = "w" > < / span > < span class = "nt" > header< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "s" > ' path/to/header.html.twig' < / span >
< / code > < / pre > < / div >
2024-03-31 17:19:55 +02:00
2024-01-23 13:42:54 +01:00
< / article >
< / div >
2024-03-31 17:19:55 +02:00
< script > var target = document . getElementById ( location . hash . slice ( 1 ) ) ; target && target . name && ( target . checked = target . name . startsWith ( "__tabbed_" ) ) < / script >
2024-01-23 13:42:54 +01:00
< / div >
< / main >
< footer class = "md-footer" >
< nav class = "md-footer__inner md-grid" aria-label = "Footer" >
< a href = "../grapesjs/" class = "md-footer__link md-footer__link--prev" aria-label = "Previous: GrapesJS" >
< div class = "md-footer__button md-icon" >
< svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" > < path d = "M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z" / > < / svg >
< / div >
< div class = "md-footer__title" >
< span class = "md-footer__direction" >
Previous
< / span >
< div class = "md-ellipsis" >
GrapesJS
< / div >
< / div >
< / a >
< a href = "../../cache/" class = "md-footer__link md-footer__link--next" aria-label = "Next: Cache Manager" >
< div class = "md-footer__title" >
< span class = "md-footer__direction" >
Next
< / span >
< div class = "md-ellipsis" >
Cache Manager
< / div >
< / div >
< div class = "md-footer__button md-icon" >
< svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" > < path d = "M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4Z" / > < / svg >
< / div >
< / a >
< / nav >
< div class = "md-footer-meta md-typeset" >
< div class = "md-footer-meta__inner md-grid" >
< div class = "md-copyright" >
< / div >
< / div >
< / div >
< / footer >
< / div >
< div class = "md-dialog" data-md-component = "dialog" >
< div class = "md-dialog__inner md-typeset" > < / div >
< / div >
2024-03-31 17:19:55 +02:00
< script id = "__config" type = "application/json" > { "base" : "../../.." , "features" : [ "content.code.copy" , "navigation.tabs" , "navigation.footer" ] , "search" : "../../../assets/javascripts/workers/search.b8dbb3d2.min.js" , "translations" : { "clipboard.copied" : "Copied to clipboard" , "clipboard.copy" : "Copy to clipboard" , "search.result.more.one" : "1 more on this page" , "search.result.more.other" : "# more on this page" , "search.result.none" : "No matching documents" , "search.result.one" : "1 matching document" , "search.result.other" : "# matching documents" , "search.result.placeholder" : "Type to start searching" , "search.result.term.missing" : "Missing" , "select.version" : "Select version" } } < / script >
2024-01-23 13:42:54 +01:00
2024-03-31 17:19:55 +02:00
< script src = "../../../assets/javascripts/bundle.bd41221c.min.js" > < / script >
2024-01-23 13:42:54 +01:00
< / body >
< / html >