Add CKEditor toolbar alignment plugin
This commit is contained in:
parent
93886e3402
commit
47ee7ca226
|
|
@ -126,32 +126,14 @@ $placeholders = [
|
|||
|
||||
<div class="mb-2">
|
||||
<label class="form-label form-label-sm">Header HTML</label>
|
||||
<div class="btn-group btn-group-sm mb-1 ck-align-tools" data-editor="tpl_header_html" role="group" aria-label="Header alignment">
|
||||
<button type="button" class="btn btn-outline-secondary" data-align="left">Left</button>
|
||||
<button type="button" class="btn btn-outline-secondary" data-align="center">Center</button>
|
||||
<button type="button" class="btn btn-outline-secondary" data-align="right">Right</button>
|
||||
<button type="button" class="btn btn-outline-secondary" data-align="justify">Justify</button>
|
||||
</div>
|
||||
<textarea id="tpl_header_html" class="form-control form-control-sm" rows="4"><?= esc($headerHtml) ?></textarea>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label form-label-sm">Footer HTML</label>
|
||||
<div class="btn-group btn-group-sm mb-1 ck-align-tools" data-editor="tpl_footer_html" role="group" aria-label="Footer alignment">
|
||||
<button type="button" class="btn btn-outline-secondary" data-align="left">Left</button>
|
||||
<button type="button" class="btn btn-outline-secondary" data-align="center">Center</button>
|
||||
<button type="button" class="btn btn-outline-secondary" data-align="right">Right</button>
|
||||
<button type="button" class="btn btn-outline-secondary" data-align="justify">Justify</button>
|
||||
</div>
|
||||
<textarea id="tpl_footer_html" class="form-control form-control-sm" rows="3"><?= esc($footerHtml) ?></textarea>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label form-label-sm">HTML Content <span class="text-muted small">(use <code>{{CONTENT}}</code> or section placeholders)</span></label>
|
||||
<div class="btn-group btn-group-sm mb-1 ck-align-tools" data-editor="tpl_html" role="group" aria-label="Content alignment">
|
||||
<button type="button" class="btn btn-outline-secondary" data-align="left">Left</button>
|
||||
<button type="button" class="btn btn-outline-secondary" data-align="center">Center</button>
|
||||
<button type="button" class="btn btn-outline-secondary" data-align="right">Right</button>
|
||||
<button type="button" class="btn btn-outline-secondary" data-align="justify">Justify</button>
|
||||
</div>
|
||||
<textarea id="tpl_html" class="form-control form-control-sm" rows="10"><?= esc($templateHtml) ?></textarea>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
|
|
@ -245,10 +227,11 @@ $placeholders = [
|
|||
if (!CKEDITOR.instances[id]) {
|
||||
CKEDITOR.replace(id, {
|
||||
height: id === 'tpl_html' ? 280 : 140,
|
||||
extraPlugins: 'hmsjustify',
|
||||
toolbar: [
|
||||
{name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'Undo', 'Redo']},
|
||||
{name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'RemoveFormat']},
|
||||
{name: 'paragraph', items: ['NumberedList', 'BulletedList', 'Outdent', 'Indent']},
|
||||
{name: 'paragraph', items: ['NumberedList', 'BulletedList', 'Outdent', 'Indent', 'HmsJustifyLeft', 'HmsJustifyCenter', 'HmsJustifyRight', 'HmsJustifyBlock']},
|
||||
{name: 'links', items: ['Link', 'Unlink']},
|
||||
{name: 'insert', items: ['Image', 'Table']},
|
||||
{name: 'styles', items: ['Styles', 'Format']},
|
||||
|
|
@ -259,30 +242,6 @@ $placeholders = [
|
|||
});
|
||||
}
|
||||
|
||||
document.querySelectorAll('.ck-align-tools button').forEach(function (button) {
|
||||
button.addEventListener('click', function () {
|
||||
var editorId = button.closest('.ck-align-tools').getAttribute('data-editor');
|
||||
var alignment = button.getAttribute('data-align');
|
||||
if (typeof CKEDITOR === 'undefined' || !CKEDITOR.instances[editorId]) {
|
||||
return;
|
||||
}
|
||||
var editor = CKEDITOR.instances[editorId];
|
||||
editor.focus();
|
||||
var element = editor.getSelection().getStartElement();
|
||||
var block = null;
|
||||
while (element) {
|
||||
var tag = element.getName ? element.getName() : '';
|
||||
if (['p', 'div', 'td', 'th', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].indexOf(tag) !== -1) {
|
||||
block = element;
|
||||
break;
|
||||
}
|
||||
element = element.getParent ? element.getParent() : null;
|
||||
}
|
||||
if (block) {
|
||||
block.setStyle('text-align', alignment);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function getCsrf() {
|
||||
var el = document.querySelector('input[name^="csrf_"]');
|
||||
|
|
|
|||
41
public/assets/vendor/ckeditor/plugins/hmsjustify/plugin.js
vendored
Normal file
41
public/assets/vendor/ckeditor/plugins/hmsjustify/plugin.js
vendored
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
CKEDITOR.plugins.add('hmsjustify', {
|
||||
init: function(editor) {
|
||||
var commands = {
|
||||
HmsJustifyLeft: 'justifyLeft',
|
||||
HmsJustifyCenter: 'justifyCenter',
|
||||
HmsJustifyRight: 'justifyRight',
|
||||
HmsJustifyBlock: 'justifyFull'
|
||||
};
|
||||
|
||||
Object.keys(commands).forEach(function(commandName) {
|
||||
var nativeCommand = commands[commandName];
|
||||
editor.addCommand(commandName, {
|
||||
exec: function(instance) {
|
||||
instance.focus();
|
||||
instance.document.$.execCommand(nativeCommand, false, null);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
editor.ui.addButton('HmsJustifyLeft', {
|
||||
label: 'Align Left',
|
||||
command: 'HmsJustifyLeft',
|
||||
toolbar: 'paragraph,40'
|
||||
});
|
||||
editor.ui.addButton('HmsJustifyCenter', {
|
||||
label: 'Center',
|
||||
command: 'HmsJustifyCenter',
|
||||
toolbar: 'paragraph,41'
|
||||
});
|
||||
editor.ui.addButton('HmsJustifyRight', {
|
||||
label: 'Align Right',
|
||||
command: 'HmsJustifyRight',
|
||||
toolbar: 'paragraph,42'
|
||||
});
|
||||
editor.ui.addButton('HmsJustifyBlock', {
|
||||
label: 'Justify',
|
||||
command: 'HmsJustifyBlock',
|
||||
toolbar: 'paragraph,43'
|
||||
});
|
||||
}
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user