mirror of
https://git.imnavajas.es/jjimenez/safekat.git
synced 2025-07-25 22:52:08 +00:00
wiki
This commit is contained in:
amazuecos
@ -1,6 +1,5 @@
|
||||
|
||||
|
||||
|
||||
export const alertConfirmationDelete = (title, type = "primary") => {
|
||||
return Swal.fire({
|
||||
title: '¿Está seguro?',
|
||||
@ -63,4 +62,54 @@ export const toastPresupuestoSummary = (value, target = 'body') => {
|
||||
timerProgressBar: false,
|
||||
stopKeydownPropagation: false,
|
||||
})
|
||||
}
|
||||
export const alertSuccess = (value, target = 'body') => {
|
||||
return Swal.mixin({
|
||||
toast: true,
|
||||
position: 'bottom-end',
|
||||
html: `
|
||||
<span class="badge badge-label-primary fs-big">${value}</span>`,
|
||||
customClass: {
|
||||
popup: 'bg-success text-white',
|
||||
},
|
||||
icon : 'success',
|
||||
iconColor: 'white',
|
||||
target: target,
|
||||
showConfirmButton: false,
|
||||
timer: 2000,
|
||||
timerProgressBar: true,
|
||||
})
|
||||
}
|
||||
export const alertError = (value, target = 'body') => {
|
||||
return Swal.mixin({
|
||||
toast: true,
|
||||
position: 'bottom-end',
|
||||
html: `<span class="badge badge-label-error fs-big">${value}</span>`,
|
||||
customClass: {
|
||||
popup: 'bg-error text-white',
|
||||
},
|
||||
icon : 'error',
|
||||
iconColor: 'white',
|
||||
target: target,
|
||||
showConfirmButton: false,
|
||||
timer: 2000,
|
||||
timerProgressBar: true,
|
||||
})
|
||||
}
|
||||
export const alertWarning = (value, target = 'body') => {
|
||||
return Swal.mixin({
|
||||
toast: true,
|
||||
position: 'bottom-end',
|
||||
html: `
|
||||
<span class="badge badge-label-warning fs-big">${value}</span>`,
|
||||
customClass: {
|
||||
popup: 'bg-warning text-white',
|
||||
},
|
||||
icon : 'warning',
|
||||
iconColor: 'white',
|
||||
target: target,
|
||||
showConfirmButton: false,
|
||||
timer: 2000,
|
||||
timerProgressBar: true,
|
||||
})
|
||||
}
|
||||
170
httpdocs/assets/js/safekat/components/editorjs/WikiEditor.js
Normal file
170
httpdocs/assets/js/safekat/components/editorjs/WikiEditor.js
Normal file
@ -0,0 +1,170 @@
|
||||
|
||||
import { es } from './lang/es.js';
|
||||
import EditorJS from '../../../../../themes/vuexy/js/editorjs.mjs';
|
||||
import '../../../../../../themes/vuexy/js/editorjs/header.js';
|
||||
import '../../../../../themes/vuexy/js/editorjs/list.js';
|
||||
import '../../../../../../themes/vuexy/js/editorjs/alert.js';
|
||||
import '../../../../../../themes/vuexy/js/editorjs/drag-drop.js';
|
||||
import '../../../../../../themes/vuexy/js/editorjs/image.js';
|
||||
import '../../../../../themes/vuexy/js/editorjs/table.js';
|
||||
import '../../../../../themes/vuexy/js/editorjs/tune.js';
|
||||
|
||||
|
||||
import Ajax from '../ajax.js'
|
||||
import { alertError, alertSuccess, alertWarning } from '../alerts/sweetAlert.js';
|
||||
|
||||
class WikiEditor {
|
||||
constructor() {
|
||||
this.sectionId = $("#wiki-section-id").val();
|
||||
this.editor = new EditorJS({
|
||||
holder: 'editorjs',
|
||||
i18n: es,
|
||||
autofocus: true,
|
||||
placeholder: 'Empieza a diseñar aquí',
|
||||
readOnly: true,
|
||||
tunes: {
|
||||
alignment: {
|
||||
class: AlignmentBlockTune,
|
||||
},
|
||||
},
|
||||
tools: {
|
||||
|
||||
header: {
|
||||
class: Header,
|
||||
tunes : ['alignment'],
|
||||
config: {
|
||||
placeholder: 'Introduce un encabezado ...',
|
||||
levels: [1, 2, 3, 4],
|
||||
defaultLevel: 3
|
||||
},
|
||||
},
|
||||
nestedchecklist: {
|
||||
class: editorjsNestedChecklist ,
|
||||
config : {
|
||||
maxLevel : 1,
|
||||
}
|
||||
},
|
||||
alert: {
|
||||
class: Alert,
|
||||
inlineToolbar: true,
|
||||
tunes : ['alignment'],
|
||||
shortcut: 'CMD+SHIFT+W',
|
||||
config: {
|
||||
alertTypes: ['primary', 'secondary', 'info', 'success', 'warning', 'danger', 'light', 'dark'],
|
||||
defaultType: 'primary',
|
||||
messagePlaceholder: 'Introduzca texto',
|
||||
},
|
||||
},
|
||||
image: {
|
||||
class: ImageTool,
|
||||
tunes : ['alignment'],
|
||||
config: {
|
||||
features: {
|
||||
border: false,
|
||||
caption: 'optional',
|
||||
stretch: false
|
||||
},
|
||||
endpoints: {
|
||||
byFile: `/wiki/file/upload/${this.sectionId}`, // Your backend file uploader endpoint
|
||||
byUrl: 'fetchUrl', // Your endpoint that provides uploading by Url
|
||||
}
|
||||
}
|
||||
},
|
||||
table: {
|
||||
class: Table,
|
||||
tunes : ['alignment'],
|
||||
inlineToolbar: true,
|
||||
config: {
|
||||
rows: 2,
|
||||
cols: 3,
|
||||
maxRows: 5,
|
||||
maxCols: 5,
|
||||
},
|
||||
},
|
||||
alignment: {
|
||||
class:AlignmentBlockTune,
|
||||
config:{
|
||||
default: "left",
|
||||
blocks: {
|
||||
header: 'left',
|
||||
list: 'left'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
})
|
||||
}
|
||||
async init() {
|
||||
try {
|
||||
await this.editor.isReady;
|
||||
new DragDrop(this.editor);
|
||||
/** Do anything you need after editor initialization */
|
||||
$('#save-editor').on('click', () => {
|
||||
this.editor.save().then(outputData => {
|
||||
console.log("Data saved", outputData)
|
||||
this.handleSaveContent(outputData)
|
||||
})
|
||||
})
|
||||
$('#preview-editor').on('click', () => {
|
||||
this.editor.readOnly.toggle()
|
||||
$('#edit-editor').removeClass('d-none')
|
||||
$('#preview-editor').addClass('d-none')
|
||||
})
|
||||
$('#edit-editor').on('click', () => {
|
||||
$('#edit-editor').addClass('d-none')
|
||||
$('#preview-editor').removeClass('d-none')
|
||||
this.editor.readOnly.toggle()
|
||||
})
|
||||
this.handleGetData();
|
||||
} catch (reason) {
|
||||
console.log(`Editor.js initialization failed because of ${reason}`)
|
||||
}
|
||||
}
|
||||
|
||||
handleGetData() {
|
||||
const ajax = new Ajax(`/wiki/section/${this.sectionId}`,
|
||||
null,
|
||||
null,
|
||||
this.handleGetDataSuccess.bind(this),
|
||||
this.handleGetDataError.bind(this))
|
||||
ajax.get()
|
||||
}
|
||||
handleGetDataSuccess(response) {
|
||||
if (response.data.contents) {
|
||||
alertSuccess(response.message).fire()
|
||||
this.renderContent(response.data.contents.editor_data)
|
||||
} else {
|
||||
alertWarning('No hay contenido').fire()
|
||||
|
||||
}
|
||||
}
|
||||
handleGetDataError(error) {
|
||||
console.log(error)
|
||||
}
|
||||
renderContent(content) {
|
||||
try {
|
||||
let parsedContent = JSON.parse(content)
|
||||
this.editor.render(parsedContent)
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
handleSaveContent(data) {
|
||||
|
||||
const ajax = new Ajax(`/wiki/save/${this.sectionId}`,
|
||||
data,
|
||||
null,
|
||||
this.handleSaveContentSuccess.bind(this),
|
||||
this.handleSaveContentError.bind(this))
|
||||
ajax.post()
|
||||
}
|
||||
handleSaveContentSuccess(response) {
|
||||
this.handleGetData()
|
||||
// alertSuccess(response.message).fire()
|
||||
}
|
||||
handleSaveContentError(response) { }
|
||||
|
||||
}
|
||||
export default WikiEditor
|
||||
@ -1,76 +1,13 @@
|
||||
import { es } from './lang/es.js';
|
||||
import '../../../../../themes/vuexy/js/editorjs/list.js';
|
||||
import '../../../../../themes/vuexy/js/editorjs/header.js';
|
||||
import EditorJS from '../../../../../themes/vuexy/js/editorjs.mjs';
|
||||
import '../../../../../themes/vuexy/js/editorjs/alert.js';
|
||||
import '../../../../../themes/vuexy/js/editorjs/drag-drop.js';
|
||||
import '../../../../../themes/vuexy/js/editorjs/image.js';
|
||||
import { dataExample } from './demo.js';
|
||||
import WikiEditor from "../../components/editorjs/WikiEditor.js"
|
||||
|
||||
|
||||
const editor = new EditorJS({
|
||||
holder : 'editorjs',
|
||||
i18n : es,
|
||||
autofocus: true,
|
||||
placeholder : 'Empieza a diseñar aquí',
|
||||
readOnly : true,
|
||||
tools: {
|
||||
header: {
|
||||
class: Header,
|
||||
config: {
|
||||
placeholder: 'Introduce un encabezado ...',
|
||||
levels: [1,2, 3,4],
|
||||
defaultLevel: 3
|
||||
},
|
||||
},
|
||||
list: {
|
||||
class: EditorjsList,
|
||||
inlineToolbar: true,
|
||||
config: {
|
||||
defaultStyle: 'unordered'
|
||||
},
|
||||
},
|
||||
alert: {
|
||||
class: Alert ,
|
||||
inlineToolbar: true,
|
||||
shortcut: 'CMD+SHIFT+W',
|
||||
config: {
|
||||
alertTypes: ['primary', 'secondary', 'info', 'success', 'warning', 'danger', 'light', 'dark'],
|
||||
defaultType: 'primary',
|
||||
messagePlaceholder: 'Introduzca texto',
|
||||
},
|
||||
},
|
||||
image: {
|
||||
class: ImageTool,
|
||||
config: {
|
||||
endpoints: {
|
||||
byFile: 'http://localhost:8008/uploadFile', // Your backend file uploader endpoint
|
||||
byUrl: 'http://localhost:8008/fetchUrl', // Your endpoint that provides uploading by Url
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
try {
|
||||
await editor.isReady;
|
||||
new DragDrop(editor);
|
||||
editor.render(dataExample)
|
||||
/** Do anything you need after editor initialization */
|
||||
$('#save-editor').on('click',() => {
|
||||
editor.save().then(outputData => {
|
||||
console.log("Data saved",outputData)
|
||||
})
|
||||
})
|
||||
$('#preview-editor').on('click',() => {
|
||||
editor.readOnly.toggle()
|
||||
$('#edit-editor').removeClass('d-none')
|
||||
$('#preview-editor').addClass('d-none')
|
||||
})
|
||||
$('#edit-editor').on('click',() => {
|
||||
$('#edit-editor').addClass('d-none')
|
||||
$('#preview-editor').removeClass('d-none')
|
||||
editor.readOnly.toggle()
|
||||
})
|
||||
} catch (reason) {
|
||||
console.log(`Editor.js initialization failed because of ${reason}`)
|
||||
}
|
||||
|
||||
$(async() => {
|
||||
|
||||
try {
|
||||
const editor = new WikiEditor()
|
||||
await editor.init()
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user