jsdoc de una sola cosa
parent
94b24195bb
commit
9429ffb57c
@ -1,104 +1,102 @@
|
||||
<script>
|
||||
import {onMount} from 'svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { title, heading, subtitle, content, date, address } from '$lib/stores/store';
|
||||
|
||||
import { title, heading, subtitle, content, date, address } from '$lib/stores/store';
|
||||
/** @type {HTMLDivElement} */ let editor;
|
||||
let innerHTML;
|
||||
|
||||
let editor;
|
||||
let innerHTML;
|
||||
const handleSubmit = async () => {
|
||||
console.log('submit');
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
console.log('submit');
|
||||
};
|
||||
const getContent = () => {
|
||||
if (!editor) {
|
||||
console.log('no hay editor');
|
||||
return;
|
||||
}
|
||||
$content = editor.firstChild.innerHTML;
|
||||
};
|
||||
|
||||
const getContent = () => {
|
||||
if (!editor) {
|
||||
console.log("no hay editor");
|
||||
return
|
||||
const quillOptions = {
|
||||
modules: {
|
||||
toolbar: [['bold', 'italic']]
|
||||
},
|
||||
theme: 'snow'
|
||||
};
|
||||
$content = editor.firstChild.innerHTML;
|
||||
}
|
||||
|
||||
const quillOptions = {
|
||||
modules: {
|
||||
toolbar: [
|
||||
['bold', 'italic'],
|
||||
]
|
||||
},
|
||||
theme: 'snow'
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
const {default: Quill } = await import("quill");
|
||||
|
||||
let quill = new Quill(editor, {
|
||||
modules: {
|
||||
toolbar: quillOptions
|
||||
},
|
||||
theme: 'snow',
|
||||
placeholder: 'contenido'
|
||||
});
|
||||
});
|
||||
|
||||
onMount(async () => {
|
||||
const { default: Quill } = await import('quill');
|
||||
|
||||
let quill = new Quill(editor, {
|
||||
modules: {
|
||||
toolbar: quillOptions
|
||||
},
|
||||
theme: 'snow',
|
||||
placeholder: 'contenido'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<form on:submit|preventDefault={handleSubmit}>
|
||||
<div class="form-group">
|
||||
<label for="heading">Antetítulo</label>
|
||||
<input bind:value={$heading} type="text" name="heading" placeholder="Antetítulo" />
|
||||
</div>
|
||||
|
||||
<div clasS="form-group">
|
||||
<label for="title">Título</label>
|
||||
<input bind:value={$title} type="text" name="title" placeholder="Título" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="subtitle">Subtítulo</label>
|
||||
<input bind:value={$subtitle} type="text" name="subtitle" placeholder="Subtítulo" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="content">Contenido</label>
|
||||
<div id="editor" on:click={getContent}><div on:click={getContent} on:keyup={getContent} bind:this={editor} ></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="date">Fecha</label>
|
||||
<input bind:value={$date} type="datetime-local" name="date" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="address">Dirección</label>
|
||||
<input bind:value={$address} type="text" name="address" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="heading">Antetítulo</label>
|
||||
<input bind:value={$heading} type="text" name="heading" placeholder="Antetítulo" />
|
||||
</div>
|
||||
|
||||
<div clasS="form-group">
|
||||
<label for="title">Título</label>
|
||||
<input bind:value={$title} type="text" name="title" placeholder="Título" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="subtitle">Subtítulo</label>
|
||||
<input bind:value={$subtitle} type="text" name="subtitle" placeholder="Subtítulo" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="content">Contenido</label>
|
||||
<div id="editor" on:click={getContent}>
|
||||
<div on:click={getContent} on:keyup={getContent} bind:this={editor} />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="date">Fecha</label>
|
||||
<input bind:value={$date} type="datetime-local" name="date" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="address">Dirección</label>
|
||||
<input bind:value={$address} type="text" name="address" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<style>
|
||||
.form-group {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
form {
|
||||
margin: 1rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-size: 1rem;
|
||||
font-family: monospace;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
font-family: monospace;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
#editor {
|
||||
background-color: white;
|
||||
}
|
||||
.form-group {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
form {
|
||||
margin: 1rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-size: 1rem;
|
||||
font-family: monospace;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
font-family: monospace;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
#editor {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
|
Loading…
Reference in New Issue