diff --git a/src/core/DependencyInjection/Configuration.php b/src/core/DependencyInjection/Configuration.php index 9d6b419..6999049 100644 --- a/src/core/DependencyInjection/Configuration.php +++ b/src/core/DependencyInjection/Configuration.php @@ -109,6 +109,14 @@ class Configuration implements ConfigurationInterface ->end() ->end() ->end() + ->arrayNode('editor_js') + ->children() + ->arrayNode('blocks') + ->scalarPrototype() + ->end() + ->end() + ->end() + ->end() ->arrayNode('file_manager') ->children() ->arrayNode('mimes') diff --git a/src/core/Resources/assets/css/admin.scss b/src/core/Resources/assets/css/admin.scss index a054ff8..bf8a81f 100644 --- a/src/core/Resources/assets/css/admin.scss +++ b/src/core/Resources/assets/css/admin.scss @@ -14,6 +14,7 @@ $pagination-active-bg: #343a40 !default; @import "~bootstrap/scss/bootstrap.scss"; @import "~@fortawesome/fontawesome-free/css/all.css"; @import "~flag-icon-css/sass/flag-icon.scss"; +@import "~flag-icon-css/sass/flag-icon.scss"; @for $i from 1 through 100 { .miw-#{$i*5} { @@ -559,3 +560,18 @@ form { color: #333; } } + +.editorjs { + @extend .form-control; + + height: auto; + padding-left: 50px; + padding-right: 50px; + + &-block-image { + img { + max-width: 100%; + margin-bottom: 10px; + } + } +} diff --git a/src/core/Resources/assets/js/admin.js b/src/core/Resources/assets/js/admin.js index ff1cdc0..04c7c27 100644 --- a/src/core/Resources/assets/js/admin.js +++ b/src/core/Resources/assets/js/admin.js @@ -12,7 +12,8 @@ require('./modules/modal.js')() require('./modules/push-state.js')() require('./modules/password.js')() require('./modules/tooltip.js')() -require('./modules/editor.js')() +require('./modules/tinymce.js')() +require('./modules/editorjs.js')() require('./modules/panel.js')() require('./modules/choices.js')() require('./modules/checkbox-checker.js')() diff --git a/src/core/Resources/assets/js/components/editorjs/image-tool.js b/src/core/Resources/assets/js/components/editorjs/image-tool.js new file mode 100644 index 0000000..e4800a9 --- /dev/null +++ b/src/core/Resources/assets/js/components/editorjs/image-tool.js @@ -0,0 +1,193 @@ +const $ = require('jquery') +const Vue = require('vue').default +const FileManager = require('../file-manager/FileManager').default + +const createModal = function () { + let container = $('#fm-modal') + const body = $('body') + + if (!container.length) { + container = $('