You've already forked Atomcms-edit
Initial commit
This commit is contained in:
root
@@ -0,0 +1,230 @@
|
||||
<x-dynamic-component
|
||||
:component="$getFieldWrapperView()"
|
||||
:id="$getId()"
|
||||
:label="$getLabel()"
|
||||
:label-sr-only="$isLabelHidden()"
|
||||
:helper-text="$getHelperText()"
|
||||
:hint="$getHint()"
|
||||
:hint-icon="$getHintIcon()"
|
||||
:required="$isRequired()"
|
||||
:state-path="$getStatePath()"
|
||||
class="relative z-0"
|
||||
>
|
||||
<div x-data="{ state: $wire.{{ $applyStateBindingModifiers('entangle(\'' . $getStatePath() . '\')') }}, initialized: false, editorChanged: false }"
|
||||
x-init="(() => {
|
||||
window.addEventListener('DOMContentLoaded', () => initCKEditor())
|
||||
$nextTick(() => initCKEditor())
|
||||
|
||||
const initCKEditor = () => {
|
||||
if(initialized) return
|
||||
|
||||
if(typeof CKEDITOR === undefined || !$refs.ckeditor) {
|
||||
console.error('[CKEDITOR] not found or [CKEDITOR element] not found')
|
||||
return
|
||||
}
|
||||
|
||||
CKEDITOR.ClassicEditor.create($refs.ckeditor, {
|
||||
toolbar: {
|
||||
items: [
|
||||
'exportPDF',
|
||||
'exportWord',
|
||||
'|',
|
||||
'findAndReplace',
|
||||
'selectAll',
|
||||
'heading',
|
||||
'|',
|
||||
'bold',
|
||||
'italic',
|
||||
'strikethrough',
|
||||
'underline',
|
||||
'code',
|
||||
'subscript',
|
||||
'superscript',
|
||||
'removeFormat',
|
||||
'|',
|
||||
'bulletedList',
|
||||
'numberedList',
|
||||
'outdent',
|
||||
'indent',
|
||||
'|',
|
||||
'undo',
|
||||
'redo',
|
||||
'fontSize',
|
||||
'fontFamily',
|
||||
'fontColor',
|
||||
'fontBackgroundColor',
|
||||
'highlight',
|
||||
'|',
|
||||
'alignment',
|
||||
'link',
|
||||
'insertImage',
|
||||
'blockQuote',
|
||||
'insertTable',
|
||||
'mediaEmbed',
|
||||
'codeBlock',
|
||||
'htmlEmbed',
|
||||
'specialCharacters',
|
||||
'horizontalLine',
|
||||
'pageBreak',
|
||||
'|',
|
||||
'sourceEditing',
|
||||
],
|
||||
shouldNotGroupWhenFull: true,
|
||||
},
|
||||
list: {
|
||||
properties: {
|
||||
styles: true,
|
||||
startIndex: true,
|
||||
reversed: true,
|
||||
},
|
||||
},
|
||||
heading: {
|
||||
options: [
|
||||
{
|
||||
model: 'paragraph',
|
||||
title: 'Paragraph',
|
||||
class: 'ck-heading_paragraph',
|
||||
},
|
||||
{
|
||||
model: 'heading1',
|
||||
view: 'h1',
|
||||
title: 'Heading 1',
|
||||
class: 'ck-heading_heading1',
|
||||
},
|
||||
{
|
||||
model: 'heading2',
|
||||
view: 'h2',
|
||||
title: 'Heading 2',
|
||||
class: 'ck-heading_heading2',
|
||||
},
|
||||
{
|
||||
model: 'heading3',
|
||||
view: 'h3',
|
||||
title: 'Heading 3',
|
||||
class: 'ck-heading_heading3',
|
||||
},
|
||||
{
|
||||
model: 'heading4',
|
||||
view: 'h4',
|
||||
title: 'Heading 4',
|
||||
class: 'ck-heading_heading4',
|
||||
},
|
||||
{
|
||||
model: 'heading5',
|
||||
view: 'h5',
|
||||
title: 'Heading 5',
|
||||
class: 'ck-heading_heading5',
|
||||
},
|
||||
{
|
||||
model: 'heading6',
|
||||
view: 'h6',
|
||||
title: 'Heading 6',
|
||||
class: 'ck-heading_heading6',
|
||||
},
|
||||
],
|
||||
},
|
||||
placeholder: '. . .',
|
||||
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',
|
||||
'Montserrat, sans-serif'
|
||||
],
|
||||
supportAllValues: true,
|
||||
},
|
||||
htmlSupport: {
|
||||
allow: [
|
||||
{
|
||||
name: /.*/,
|
||||
attributes: true,
|
||||
classes: true,
|
||||
styles: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
htmlEmbed: {
|
||||
showPreviews: true,
|
||||
},
|
||||
link: {
|
||||
decorators: {
|
||||
addTargetToExternalLinks: true,
|
||||
defaultProtocol: 'https://',
|
||||
toggleDownloadable: {
|
||||
mode: 'manual',
|
||||
label: 'Downloadable',
|
||||
attributes: {
|
||||
download: 'file',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
removePlugins: [
|
||||
'CKBox',
|
||||
'CKFinder',
|
||||
'EasyImage',
|
||||
'RealTimeCollaborativeComments',
|
||||
'RealTimeCollaborativeTrackChanges',
|
||||
'RealTimeCollaborativeRevisionHistory',
|
||||
'PresenceList',
|
||||
'Comments',
|
||||
'TrackChanges',
|
||||
'TrackChangesData',
|
||||
'RevisionHistory',
|
||||
'Pagination',
|
||||
'WProofreader',
|
||||
'MathType',
|
||||
],
|
||||
}).then(editor => {
|
||||
if(state) editor.setData(state)
|
||||
|
||||
editor.model.document.on('change:data', () => { editorChanged = true })
|
||||
|
||||
editor.ui.focusTracker.on('change:isFocused', (evt, name, isFocused) => {
|
||||
if(isFocused || !editorChanged) return
|
||||
|
||||
state = editor.getData()
|
||||
editorChanged = false
|
||||
})
|
||||
});
|
||||
|
||||
initialized = true
|
||||
}
|
||||
})()"
|
||||
x-cloak
|
||||
wire:ignore
|
||||
>
|
||||
@unless($isDisabled())
|
||||
<input
|
||||
id="ck-editor-{{ $getId() }}"
|
||||
type="hidden"
|
||||
x-ref="ckeditor"
|
||||
placeholder="{{ $getPlaceholder() }}"
|
||||
>
|
||||
@else
|
||||
<div
|
||||
x-html="state"
|
||||
style="font-size: 13px"
|
||||
@class([
|
||||
'prose ck-content block w-full max-w-none rounded-lg border border-gray-300 bg-white p-3 opacity-70 shadow-xs transition duration-75',
|
||||
'dark:prose-invert dark:bg-gray-700 dark:border-gray-600 dark:text-white' => true,
|
||||
])
|
||||
></div>
|
||||
@endunless
|
||||
</div>
|
||||
</x-dynamic-component>
|
||||
|
||||
@once
|
||||
@push('scripts')
|
||||
<script src="https://cdn.ckeditor.com/ckeditor5/35.4.0/super-build/ckeditor.js"></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||||
@endpush
|
||||
@endonce
|
||||
@@ -0,0 +1,39 @@
|
||||
@props(['icons' => []])
|
||||
|
||||
<div x-data="{ open: false }" class="mt-6">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h3 class="text-base font-medium">Icon picker</h3>
|
||||
<button
|
||||
type="button"
|
||||
class="fi-btn fi-btn-size-md fi-btn-color-gray fi-btn-variant-outline"
|
||||
@click="open = !open"
|
||||
>
|
||||
<span x-text="open ? 'Hide icons' : 'Select icon'"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<template x-if="open">
|
||||
<div
|
||||
class="grid gap-2 mt-2"
|
||||
style="grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));"
|
||||
>
|
||||
@foreach($icons as $icon)
|
||||
<button
|
||||
type="button"
|
||||
class="rounded border p-1 bg-white dark:bg-gray-900 flex items-center justify-center border-gray-200 dark:border-gray-700 hover:border-primary-400"
|
||||
@click="$wire.setIconFromPicker({{ $icon['id'] }})"
|
||||
title="Icon {{ $icon['id'] }}"
|
||||
>
|
||||
<img
|
||||
src="{{ $icon['url'] }}"
|
||||
alt="icon {{ $icon['id'] }}"
|
||||
class="h-8 w-8 object-contain"
|
||||
loading="lazy"
|
||||
onerror="this.onerror=null;this.src='{{ $icon['fallback'] }}';"
|
||||
style="image-rendering: pixelated; image-rendering: crisp-edges;"
|
||||
/>
|
||||
</button>
|
||||
@endforeach
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
@@ -0,0 +1,13 @@
|
||||
@props(['getUrl' => null, 'fallbackUrl' => null])
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="text-sm text-gray-600 dark:text-gray-300">Current icon:</div>
|
||||
<img
|
||||
src="{{ is_callable($getUrl) ? $getUrl() : $getUrl }}"
|
||||
alt=""
|
||||
class="h-8 w-8 object-contain"
|
||||
loading="lazy"
|
||||
onerror="this.onerror=null;this.src='{{ $fallbackUrl }}';"
|
||||
style="image-rendering: pixelated; image-rendering: crisp-edges;"
|
||||
/>
|
||||
</div>
|
||||
Reference in New Issue
Block a user