mirror/php-flextype
1
0
Fork 0
mirror of https://github.com/flextype/flextype.git synced 2025-08-14 17:14:22 +02:00
Code Issues Releases Wiki Activity

Editor.js integration #122 #117

Browse Source 
- next round of integration
This commit is contained in:
Awilum
2019-06-03 01:13:15 +03:00
parent 3ad9e675f8
commit 0bdad6852e
2 changed files with 20 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
site/plugins/admin/views/partials/base.html
View File

@@ -59,6 +59,24 @@
width: 100%;
}
</style>
<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>
{{ emmiter_emmit('onAdminThemeHeader') }}
{% endblock %}
</head>

65
site/plugins/admin/views/templates/content/entries/editor.html
View File

@@ -1,74 +1,13 @@
<div id="{{ form_element }}" class="editor"></div>
<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>
{% if is_current_path('admin.entries.edit') %}
/**
* 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, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}
/**
* Some styling magic
*/
function stylize(string) {
/** Stylize JSON keys */
string = string.replace( /"(\w+)"\s?:/g, '"<span class=sc_key>$1</span>" :');
/** Stylize tool names */
string = string.replace( /"(paragraph|quote|list|header|link|code|image|delimiter|raw|checklist|table|embed|warning)"/g, '"<span class=sc_toolname>$1</span>"');
/** Stylize HTML tags */
string = string.replace( /(&lt;[\/a-z]+(&gt;)?)/gi, '<span class=sc_tag>$1</span>' );
/** Stylize strings */
string = string.replace( /"([^"]+)"/gi, '"<span class=sc_attr>$1</span>"' );
/** Boolean/Null */
string = string.replace( /\b(true|false|null)\b/gi, '<span class=sc_bool>$1</span>' );
return string;
}
return module;
})({});
/**
* Saving button
*/
const saveButton = document.getElementById('saveButton');
//const saveButton = document.getElementById('saveButton');
/**
* To initialize the Editor, create a new instance with configuration object
@@ -162,7 +101,7 @@ const cPreview = (function (module) {
*/
saveButton.addEventListener('click', function () {
editor.save().then((savedData) => {
cPreview.show(savedData, document.getElementById("output"));
//cPreview.show(savedData, document.getElementById("output"));
});
});