Added option to open links in new tab for text fields

This commit is contained in:
Julian Prieber 2023-06-22 21:47:42 +02:00
parent c36aed5a09
commit 078f750c41
2 changed files with 102 additions and 82 deletions

View File

@ -5,49 +5,59 @@
<script> <script>
ClassicEditor ClassicEditor
.create(document.querySelector('.ckeditor'), { .create(document.querySelector('.ckeditor'), {
toolbar: { toolbar: {
items: [ items: [
'exportPDF', 'exportWord', '|' 'exportPDF', 'exportWord', '|',
, 'findAndReplace', 'selectAll', '|' 'findAndReplace', 'selectAll', '|',
, 'heading', '|' 'heading', '|',
, 'bold', 'italic', 'strikethrough', 'underline', 'code', 'subscript', 'superscript', 'removeFormat', '|' 'bold', 'italic', 'strikethrough', 'underline', 'code', 'subscript', 'superscript', 'removeFormat', '|',
, 'bulletedList', 'numberedList', 'todoList', '|' 'bulletedList', 'numberedList', 'todoList', '|',
, 'outdent', 'indent', '|' 'outdent', 'indent', '|',
, 'undo', 'redo' 'undo', 'redo',
'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'highlight', '|',
, 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'highlight', '|' 'alignment', '|',
, 'alignment', '|' 'link', 'blockQuote', '|',
, 'link', 'blockQuote', '|' 'specialCharacters', 'horizontalLine', '|',
, 'specialCharacters', 'horizontalLine', '|' 'textPartLanguage', '|',
, 'textPartLanguage', '|' ],
] shouldNotGroupWhenFull: true
, shouldNotGroupWhenFull: true
}
, fontFamily: {
options: [
'default'
, 'Arial, Helvetica, sans-serif'
, 'Courier New, Courier, monospace'
, 'Georgia, serif'
, 'Lucida Sans Unicode, Lucida Grande, sans-serif'
, 'Tahoma, Geneva, sans-serif'
, 'Times New Roman, Times, serif'
, 'Trebuchet MS, Helvetica, sans-serif'
, 'Verdana, Geneva, sans-serif'
]
, supportAllValues: true
}, },
fontSize: { fontFamily: {
options: [ 10, 12, 14, 'default', 18, 20, 22 ], options: [
supportAllValues: true 'default',
}, 'Arial, Helvetica, sans-serif',
'Courier New, Courier, monospace',
'Georgia, serif',
'Lucida Sans Unicode, Lucida Grande, sans-serif',
'Tahoma, Geneva, sans-serif',
'Times New Roman, Times, serif',
'Trebuchet MS, Helvetica, sans-serif',
'Verdana, Geneva, sans-serif'
],
supportAllValues: true
},
fontSize: {
options: [10, 12, 14, 'default', 18, 20, 22],
supportAllValues: true
},
link: {
addTargetToExternalLinks: true, // Add this option to open external links in a new tab
defaultProtocol: 'http://',
decorators: {
addTargetToExternalLinks: {
mode: 'manual',
label: 'Open in new tab',
attributes: {
target: '_blank',
rel: 'noopener noreferrer'
}
}
}
}
}) })
.catch(error => { .catch(error => {
console.error(error); console.error(error);
}); });
</script> </script>
@endif @endif

View File

@ -266,52 +266,62 @@
@if(env('ALLOW_USER_HTML') === true) @if(env('ALLOW_USER_HTML') === true)
<script src="{{ asset('assets/external-dependencies/ckeditor.js') }}"></script> <script src="{{ asset('assets/external-dependencies/ckeditor.js') }}"></script>
<script> <script>
ClassicEditor ClassicEditor
.create(document.querySelector('.ckeditor'), { .create(document.querySelector('.ckeditor'), {
toolbar: {
toolbar: { items: [
items: [ 'exportPDF', 'exportWord', '|',
'exportPDF', 'exportWord', '|' 'findAndReplace', 'selectAll', '|',
, 'findAndReplace', 'selectAll', '|' 'heading', '|',
, 'heading', '|' 'bold', 'italic', 'strikethrough', 'underline', 'code', 'subscript', 'superscript', 'removeFormat', '|',
, 'bold', 'italic', 'strikethrough', 'underline', 'code', 'subscript', 'superscript', 'removeFormat', '|' 'bulletedList', 'numberedList', 'todoList', '|',
, 'bulletedList', 'numberedList', 'todoList', '|' 'outdent', 'indent', '|',
, 'outdent', 'indent', '|' 'undo', 'redo',
, 'undo', 'redo' 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'highlight', '|',
'alignment', '|',
, 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'highlight', '|' 'link', 'blockQuote', '|',
, 'alignment', '|' 'specialCharacters', 'horizontalLine', '|',
, 'link', 'blockQuote', '|' 'textPartLanguage', '|',
, 'specialCharacters', 'horizontalLine', '|' ],
, 'textPartLanguage', '|' shouldNotGroupWhenFull: true
] },
, shouldNotGroupWhenFull: true fontFamily: {
} options: [
, fontFamily: { 'default',
options: [ 'Arial, Helvetica, sans-serif',
'default' 'Courier New, Courier, monospace',
, 'Arial, Helvetica, sans-serif' 'Georgia, serif',
, 'Courier New, Courier, monospace' 'Lucida Sans Unicode, Lucida Grande, sans-serif',
, 'Georgia, serif' 'Tahoma, Geneva, sans-serif',
, 'Lucida Sans Unicode, Lucida Grande, sans-serif' 'Times New Roman, Times, serif',
, 'Tahoma, Geneva, sans-serif' 'Trebuchet MS, Helvetica, sans-serif',
, 'Times New Roman, Times, serif' 'Verdana, Geneva, sans-serif'
, 'Trebuchet MS, Helvetica, sans-serif' ],
, 'Verdana, Geneva, sans-serif' supportAllValues: true
] },
, supportAllValues: true fontSize: {
}, options: [10, 12, 14, 'default', 18, 20, 22],
fontSize: { supportAllValues: true
options: [ 10, 12, 14, 'default', 18, 20, 22 ], },
supportAllValues: true link: {
}, addTargetToExternalLinks: true, // Add this option to open external links in a new tab
defaultProtocol: 'http://',
}) decorators: {
.catch(error => { addTargetToExternalLinks: {
console.error(error); mode: 'manual',
}); label: 'Open in new tab',
attributes: {
</script> target: '_blank',
rel: 'noopener noreferrer'
}
}
}
}
})
.catch(error => {
console.error(error);
});
</script>
@endif @endif
</div> </div>