mirror of
https://github.com/flextype/flextype.git
synced 2025-08-17 10:30:46 +02:00
- REVERT BACK trumbowyg EDITOR FOR NOW!
This commit is contained in:
Awilum
@@ -454,25 +454,8 @@ class EntriesController extends Controller
|
||||
break;
|
||||
// A WYSIWYG HTML field.
|
||||
case 'html':
|
||||
if ($form_value === '' || count($form_value['blocks']) == 0) {
|
||||
$form_value = JsonParser::decode('{
|
||||
"time": 1559727958862,
|
||||
"blocks": [{
|
||||
"type": "paragraph",
|
||||
"data": {
|
||||
"text": ""
|
||||
}
|
||||
}],
|
||||
"version": "2.13.0"
|
||||
}');
|
||||
}
|
||||
$form_element = $this->view->fetch(
|
||||
'plugins/admin/views/templates/content/entries/editor.html',
|
||||
[
|
||||
'form_element' => $element,
|
||||
'form_value' => JsonParser::encode($form_value)
|
||||
]
|
||||
);
|
||||
$property['attributes']['class'] .= ' js-html-editor';
|
||||
$form_element = Form::textarea($element, $form_value, $property['attributes']);
|
||||
break;
|
||||
// Selectbox field
|
||||
case 'select':
|
||||
|
||||
@@ -44,6 +44,8 @@ gulp.task('admin-css-clean', function() {
|
||||
gulp.task('build-css', function(){
|
||||
return gulp.src(['node_modules/bootstrap/dist/css/bootstrap.min.css',
|
||||
'node_modules/animate.css/animate.min.css',
|
||||
'node_modules/trumbowyg/dist/ui/trumbowyg.min.css',
|
||||
'node_modules/trumbowyg/dist/plugins/table/ui/trumbowyg.table.css',
|
||||
'node_modules/codemirror/lib/codemirror.css',
|
||||
'node_modules/messenger-hubspot/build/css/messenger.css',
|
||||
'node_modules/messenger-hubspot/build/css/messenger-theme-flat.css',
|
||||
@@ -62,6 +64,9 @@ gulp.task('js', function(){
|
||||
return gulp.src(['node_modules/jquery/dist/jquery.min.js',
|
||||
'node_modules/popper.js/dist/umd/popper.min.js',
|
||||
'node_modules/bootstrap/dist/js/bootstrap.min.js',
|
||||
'node_modules/trumbowyg/dist/trumbowyg.min.js',
|
||||
'node_modules/trumbowyg/dist/plugins/noembed/trumbowyg.noembed.js',
|
||||
'node_modules/trumbowyg/dist/plugins/table/trumbowyg.table.js',
|
||||
'node_modules/codemirror/lib/codemirror.js',
|
||||
'node_modules/codemirror/mode/htmlmixed/htmlmixed.js',
|
||||
'node_modules/codemirror/mode/xml/xml.js',
|
||||
@@ -80,6 +85,21 @@ gulp.task('js', function(){
|
||||
.pipe(gulp.dest('assets/dist/js/'));
|
||||
});
|
||||
|
||||
gulp.task('trumbowyg-fonts', function(){
|
||||
return gulp.src(['node_modules/trumbowyg/dist/ui/icons.svg'])
|
||||
.pipe(gulp.dest('assets/dist/fonts/trumbowyg'));
|
||||
});
|
||||
|
||||
gulp.task('trumbowyg-fonts', function(){
|
||||
return gulp.src(['node_modules/trumbowyg/dist/ui/icons.svg'])
|
||||
.pipe(gulp.dest('assets/dist/fonts/trumbowyg'));
|
||||
});
|
||||
|
||||
gulp.task('trumbowyg-langs', function(){
|
||||
return gulp.src(['node_modules/trumbowyg/dist/*langs/**/*'])
|
||||
.pipe(gulp.dest('assets/dist/langs/trumbowyg'));
|
||||
});
|
||||
|
||||
gulp.task('codemirror-theme-monokai', function(){
|
||||
return gulp.src(['node_modules/codemirror/theme/monokai.css'])
|
||||
.pipe(gulp.dest('assets/dist/css/'));
|
||||
@@ -93,6 +113,8 @@ gulp.task('codemirror-theme-elegant', function(){
|
||||
gulp.task('default', function(callback) {
|
||||
runSequence('admin-css',
|
||||
['build-css',
|
||||
'trumbowyg-fonts',
|
||||
'trumbowyg-langs',
|
||||
'js'],
|
||||
'admin-css-clean',
|
||||
'admin-light-css',
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
"messenger-hubspot": "1.5.0-b2",
|
||||
"popper.js": "^1.14.6",
|
||||
"run-sequence": "^2.2.1",
|
||||
"trumbowyg": "^2.14.0",
|
||||
"clipboard": "^2.0.4",
|
||||
"bs-custom-file-input": "^1.3.1"
|
||||
}
|
||||
|
||||
@@ -60,55 +60,6 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
{% if is_current_path('admin.entries.edit') %}
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script><!-- Header -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/simple-image@latest"></script><!-- Image -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/delimiter@latest"></script><!-- Delimiter -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script><!-- List -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/checklist@latest"></script><!-- Checklist -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/quote@latest"></script><!-- Quote -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/code@latest"></script><!-- Code -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/embed@latest"></script><!-- Embed -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/table@latest"></script><!-- Table -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/link@latest"></script><!-- Link -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/warning@latest"></script><!-- Warning -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/marker@latest"></script><!-- Marker -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/inline-code@latest"></script><!-- Inline Code -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* Module to compose output JSON preview
|
||||
*/
|
||||
const cPreview = (function (module) {
|
||||
/**
|
||||
* Shows JSON in pretty preview
|
||||
* @param {object} output - what to show
|
||||
* @param {Element} holder - where to show
|
||||
*/
|
||||
module.show = function(output, holder) {
|
||||
/** Make JSON pretty */
|
||||
output = JSON.stringify( output, null, 4 );
|
||||
/** Encode HTML entities */
|
||||
output = encodeHTMLEntities( output );
|
||||
/** Stylize! */
|
||||
//output = stylize( output );
|
||||
holder.innerHTML = output;
|
||||
};
|
||||
|
||||
/**
|
||||
* Converts '>', '<', '&' symbols to entities
|
||||
*/
|
||||
function encodeHTMLEntities(string) {
|
||||
return string.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||
}
|
||||
|
||||
return module;
|
||||
})({});
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
|
||||
{{ emmiter_emmit('onAdminThemeHeader') }}
|
||||
{% endblock %}
|
||||
</head>
|
||||
@@ -344,6 +295,32 @@
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
$.trumbowyg.svgPath = '{{base_url()}}/site/plugins/admin/assets/dist/fonts/trumbowyg/icons.svg';
|
||||
$('.js-html-editor').trumbowyg({
|
||||
btnsDef: {
|
||||
// Customizables dropdowns
|
||||
image: {
|
||||
dropdown: ['insertImage', 'noembed'],
|
||||
ico: 'insertImage'
|
||||
}
|
||||
},
|
||||
btns: [
|
||||
['undo', 'redo'], // Only supported in Blink browsers
|
||||
['formatting'],
|
||||
['strong', 'em', 'del'],
|
||||
['link'],
|
||||
['image'],
|
||||
['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
|
||||
['unorderedList', 'orderedList'],
|
||||
['table'],
|
||||
['removeformat'],
|
||||
['fullscreen']
|
||||
],
|
||||
lang: '{{ locale }}',
|
||||
autogrow: false,
|
||||
removeformatPasted: true
|
||||
});
|
||||
|
||||
$.flextype.plugins.init();
|
||||
|
||||
$('.js-save-form-submit').click(function() {
|
||||
|
||||
@@ -1,105 +0,0 @@
|
||||
<div class="js-editor">
|
||||
<div id="{{ form_element }}" class="editor"></div>
|
||||
<textarea id="textarea_{{ form_element }}" name="{{ form_element }}_json" rows="8" cols="80" style="display:none;">{{ form_value }}</textarea>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
{% if is_current_path('admin.entries.edit') %}
|
||||
|
||||
var saveButton_{{ form_element }} = document.getElementById('saveButton{{ form_element }}');
|
||||
|
||||
/**
|
||||
* To initialize the Editor, create a new instance with configuration object
|
||||
* @see docs/installation.md for mode details
|
||||
*/
|
||||
var {{ form_element }} = new EditorJS({
|
||||
/**
|
||||
* Wrapper of Editor
|
||||
*/
|
||||
holder: '{{ form_element }}',
|
||||
/**
|
||||
* Tools list
|
||||
*/
|
||||
tools: {
|
||||
/**
|
||||
* Each Tool is a Plugin. Pass them via 'class' option with necessary settings {@link docs/tools.md}
|
||||
*/
|
||||
header: {
|
||||
class: Header,
|
||||
inlineToolbar: ['link'],
|
||||
config: {
|
||||
placeholder: 'Header'
|
||||
},
|
||||
shortcut: 'CMD+SHIFT+H'
|
||||
},
|
||||
/**
|
||||
* Or pass class directly without any configuration
|
||||
*/
|
||||
image: {
|
||||
class: SimpleImage,
|
||||
inlineToolbar: ['link'],
|
||||
},
|
||||
list: {
|
||||
class: List,
|
||||
inlineToolbar: true,
|
||||
shortcut: 'CMD+SHIFT+L'
|
||||
},
|
||||
quote: {
|
||||
class: Quote,
|
||||
inlineToolbar: true,
|
||||
config: {
|
||||
quotePlaceholder: 'Enter a quote',
|
||||
captionPlaceholder: 'Quote\'s author',
|
||||
},
|
||||
shortcut: 'CMD+SHIFT+O'
|
||||
},
|
||||
marker: {
|
||||
class: Marker,
|
||||
shortcut: 'CMD+SHIFT+M'
|
||||
},
|
||||
code: {
|
||||
class: CodeTool,
|
||||
shortcut: 'CMD+SHIFT+C'
|
||||
},
|
||||
delimiter: Delimiter,
|
||||
inlineCode: {
|
||||
class: InlineCode,
|
||||
shortcut: 'CMD+SHIFT+C'
|
||||
},
|
||||
|
||||
embed: Embed,
|
||||
|
||||
table: {
|
||||
class: Table,
|
||||
inlineToolbar: true,
|
||||
shortcut: 'CMD+ALT+T'
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* This Tool will be used as default
|
||||
*/
|
||||
initialBlock: 'paragraph',
|
||||
|
||||
/**
|
||||
* Initial Editor data
|
||||
*/
|
||||
data: {},
|
||||
|
||||
onReady: function() {
|
||||
var json = document.getElementById("textarea_{{ form_element }}").innerHTML;
|
||||
{{ form_element }}.render(JSON.parse(json));
|
||||
},
|
||||
|
||||
onChange: function() {
|
||||
{{ form_element }}.save().then((savedData) => {
|
||||
cPreview.show(savedData, document.getElementById("textarea_{{ form_element }}"));
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
{% endif %}
|
||||
|
||||
</script>
|
||||
Reference in New Issue
Block a user