|
- <template>
- <div class="editor">
-
- <div class="bottom-bar">
- <div>
- <label>Paragraphes :</label><span>{{nbParagraphs}}</span>
- <label>Phrases :</label><span>{{nbSentences}}</span>
- <label>Mots :</label><span>{{nbWords}}</span>
- </div>
- <div class="env-select" >
- <!--<label>Environnement </label>-->
- <select v-model="environmentName" @change="loadEnvironment()">
- <option value="ar">AR</option>
- <option value="basic">Basic</option>
- <option value="basicplus">Basic +</option>
- </select>
- </div>
- </div>
-
-
- <div id="file_actions">
- <button title="Ouvrir un fichier" id="input_button"
- onclick="document.getElementById('input').click()"></button>
- <button title="Enregistrer" id="output_button" v-on:click="saveFile"></button>
- <input type="file" style="display:none;" id="input" v-on:change="loadFile()">
- <a style="display:none;" id="download_link" download="dedediteur-export-demo.html" href=”” >Download as Text File</a>
- <button title="Export PDF" id="pdf_button" v-on:click="pdfExport"></button>
- </div>
-
-
- <div class="editor-main">
-
- <!--<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">-->
- <editor-menu-bubble class="menububble" :editor="editor" @hide="hideLinkMenu"
- v-slot="{ commands, isActive, getMarkAttrs, menu }">
- <div
- class="menububble"
- :class="{ 'is-active': menu.isActive }"
- :style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`"
- >
-
-
- <div class="menubar char-menubar">
-
- <div v-bind:key="opt.label" v-for="opt in environment.getCharacterOptions()" class="dropdown">
- <button class="dropbtn border-left">{{opt.label}}</button>
- <div class="dropdown-content">
- <a v-for="style in opt.styles" v-bind:key="style.label">
- <button
- class="menubar__button"
- :class="{ 'is-active': isActive.customstyle({ type: style.class }) }"
- @click="commands.customstyle({ type: style.class })">
- {{style.label}}
- </button>
- </a>
- </div>
- </div>
-
-
-
- <form class="menububble__form" v-if="linkMenuIsActive"
- @submit.prevent="setLinkUrl(commands.link, linkUrl)">
- <input class="menububble__input" type="text" v-model="linkUrl" placeholder="https://"
- ref="linkInput" @keydown.esc="hideLinkMenu"/>
- <button class="menububble__button" @click="setLinkUrl(commands.link, null)" type="button">
- Supprimer le lien
- </button>
- </form>
-
- <template v-else>
- <button id="link__button"
- class="menububble__button"
- @click="showLinkMenu(getMarkAttrs('link'))"
- :class="{ 'is-active': isActive.link() }"
- >
- <span>{{ isActive.link() ? 'Modifier le lien' : 'Lien'}}</span>
- </button>
- </template>
- </div>
- </div>
- </editor-menu-bubble>
-
-
- <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
- <div class="menubar paragraph-menubar">
-
- <button
- class="menubar__button"
- :class="{ 'is-active': isActive.paragraph() }"
- @click="commands.paragraph">
- ¶
- </button>
-
-
- <button v-if="environment.hasParagraphOption('T1')"
- class="menubar__button"
- :class="{ 'is-active': isActive.heading({ level: 1 }) }"
- @click="commands.heading({ level: 1 })">
- T1
- </button>
-
- <button v-if="environment.hasParagraphOption('T2')"
- class="menubar__button"
- :class="{ 'is-active': isActive.heading({ level: 2 }) }"
- @click="commands.heading({ level: 2 })">
- T2
- </button>
-
- <button v-if="environment.hasParagraphOption('T3')"
- class="menubar__button"
- :class="{ 'is-active': isActive.heading({ level: 3 }) }"
- @click="commands.heading({ level: 3 })">
- T3
- </button>
-
- <button v-if="environment.hasParagraphOption('T4')"
- class="menubar__button"
- :class="{ 'is-active': isActive.heading({ level: 3 }) }"
- @click="commands.heading({ level: 3 })">
- T4
- </button>
-
- <button v-if="environment.hasParagraphOption('quote')"
- class="menubar__button"
- :class="{ 'is-active': isActive.blockquote() }"
- @click="commands.blockquote">
- « »
- </button>
-
- </div>
-
- </editor-menu-bar>
-
-
-
- <editor-content id="dedediteur" class="editor__content" :editor="editor"/>
- </div>
- </div>
- </template>
-
- <script>
- import {Editor, EditorContent, EditorMenuBar, EditorMenuBubble} from 'tiptap'
- import Countable from 'countable'
- import {
- Blockquote,
- Heading,
- OrderedList,
- BulletList,
- ListItem,
- Link
- } from 'tiptap-extensions'
-
-
- import Environment from "../environments/Environement"
- import CustomStyle from "./extensions/CustomStyle"
-
-
- export default {
- components: {
- EditorContent,
- EditorMenuBar,
- EditorMenuBubble
- },
- data() {
- return {
- nbWords : 0,
- nbParagraphs: 0,
- nbSentences : 0,
- environmentName: 'ar',
- environment : new Environment(),
- keepInBounds: true,
- editor: new Editor({
- extensions: [
- new Blockquote(),
- new BulletList(),
- new Heading({levels: [1, 2, 3]}),
- new ListItem(),
- new OrderedList(),
- new Link(),
- new CustomStyle()
- ],
- content: `
- <p>Soit un <a href="https://fr.wiktionary.org/wiki/moment">moment</a> de <a href="https://fr.wikipedia.org/wiki/Perception">perception</a> & son ouverture <a href="https://fr.wikipedia.org/wiki/Philosophie_de_la_perception">philosophique</a>. Pour cela, avoir accès à une connexion <a href="https://fr.wikipedia.org/wiki/Internet">internet</a> & installer, sur l’ordinateur exploité pour s’y connecter, un <a href="https://fr.wikipedia.org/wiki/Navigateur_web">navigateur</a> pour consulter le [web](<a href="https://fr.wikipedia.org/wiki/World_Wide_Web">World Wide Web — Wikipédia</a>). Cette consultation se concrétise par la surface d’un écran où nous sont perceptibles des pages d’informations de diverses natures (iconographique, vidéo ou <a href="https://fr.wiktionary.org/wiki/textuel">textuelle</a>) dédiées à notre <a href="https://fr.wiktionary.org/wiki/aspectus#la"><em>aspectus</em></a>. Ces informations nous sont disponibles dans l’espace de l’écran sous différents <a href="https://fr.wiktionary.org/wiki/aspect">aspects</a>, résultats de la <a href="https://fr.wiktionary.org/wiki/mani%C3%A8re">manière</a> dont elles ont été <a href="https://fr.wiktionary.org/wiki/former">formées</a>.
- </p><p>Soit un <a href="https://fr.wiktionary.org/wiki/moment">moment</a> de <a href="https://fr.wikipedia.org/wiki/Perception">perception</a> & son ouverture <a href="https://fr.wikipedia.org/wiki/Philosophie_de_la_perception">philosophique</a>. Pour cela, avoir accès à une connexion <a href="https://fr.wikipedia.org/wiki/Internet">internet</a> & installer, sur l’ordinateur exploité pour s’y connecter, un <a href="https://fr.wikipedia.org/wiki/Navigateur_web">navigateur</a> pour consulter le [web](<a href="https://fr.wikipedia.org/wiki/World_Wide_Web">World Wide Web — Wikipédia</a>). Cette consultation se concrétise par la surface d’un écran où nous sont perceptibles des pages d’informations de diverses natures (iconographique, vidéo ou <a href="https://fr.wiktionary.org/wiki/textuel">textuelle</a>) dédiées à notre <a href="https://fr.wiktionary.org/wiki/aspectus#la"><em>aspectus</em></a>. Ces informations nous sont disponibles dans l’espace de l’écran sous différents <a href="https://fr.wiktionary.org/wiki/aspect">aspects</a>, résultats de la <a href="https://fr.wiktionary.org/wiki/mani%C3%A8re">manière</a> dont elles ont été <a href="https://fr.wiktionary.org/wiki/former">formées</a>.
- </p><p>Soit un <a href="https://fr.wiktionary.org/wiki/moment">moment</a> de <a href="https://fr.wikipedia.org/wiki/Perception">perception</a> & son ouverture <a href="https://fr.wikipedia.org/wiki/Philosophie_de_la_perception">philosophique</a>. Pour cela, avoir accès à une connexion <a href="https://fr.wikipedia.org/wiki/Internet">internet</a> & installer, sur l’ordinateur exploité pour s’y connecter, un <a href="https://fr.wikipedia.org/wiki/Navigateur_web">navigateur</a> pour consulter le [web](<a href="https://fr.wikipedia.org/wiki/World_Wide_Web">World Wide Web — Wikipédia</a>). Cette consultation se concrétise par la surface d’un écran où nous sont perceptibles des pages d’informations de diverses natures (iconographique, vidéo ou <a href="https://fr.wiktionary.org/wiki/textuel">textuelle</a>) dédiées à notre <a href="https://fr.wiktionary.org/wiki/aspectus#la"><em>aspectus</em></a>. Ces informations nous sont disponibles dans l’espace de l’écran sous différents <a href="https://fr.wiktionary.org/wiki/aspect">aspects</a>, résultats de la <a href="https://fr.wiktionary.org/wiki/mani%C3%A8re">manière</a> dont elles ont été <a href="https://fr.wiktionary.org/wiki/former">formées</a>.
- </p><p>Soit un <a href="https://fr.wiktionary.org/wiki/moment">moment</a> de <a href="https://fr.wikipedia.org/wiki/Perception">perception</a> & son ouverture <a href="https://fr.wikipedia.org/wiki/Philosophie_de_la_perception">philosophique</a>. Pour cela, avoir accès à une connexion <a href="https://fr.wikipedia.org/wiki/Internet">internet</a> & installer, sur l’ordinateur exploité pour s’y connecter, un <a href="https://fr.wikipedia.org/wiki/Navigateur_web">navigateur</a> pour consulter le [web](<a href="https://fr.wikipedia.org/wiki/World_Wide_Web">World Wide Web — Wikipédia</a>). Cette consultation se concrétise par la surface d’un écran où nous sont perceptibles des pages d’informations de diverses natures (iconographique, vidéo ou <a href="https://fr.wiktionary.org/wiki/textuel">textuelle</a>) dédiées à notre <a href="https://fr.wiktionary.org/wiki/aspectus#la"><em>aspectus</em></a>. Ces informations nous sont disponibles dans l’espace de l’écran sous différents <a href="https://fr.wiktionary.org/wiki/aspect">aspects</a>, résultats de la <a href="https://fr.wiktionary.org/wiki/mani%C3%A8re">manière</a> dont elles ont été <a href="https://fr.wiktionary.org/wiki/former">formées</a>.
- </p><p>Soit un <a href="https://fr.wiktionary.org/wiki/moment">moment</a> de <a href="https://fr.wikipedia.org/wiki/Perception">perception</a> & son ouverture <a href="https://fr.wikipedia.org/wiki/Philosophie_de_la_perception">philosophique</a>. Pour cela, avoir accès à une connexion <a href="https://fr.wikipedia.org/wiki/Internet">internet</a> & installer, sur l’ordinateur exploité pour s’y connecter, un <a href="https://fr.wikipedia.org/wiki/Navigateur_web">navigateur</a> pour consulter le [web](<a href="https://fr.wikipedia.org/wiki/World_Wide_Web">World Wide Web — Wikipédia</a>). Cette consultation se concrétise par la surface d’un écran où nous sont perceptibles des pages d’informations de diverses natures (iconographique, vidéo ou <a href="https://fr.wiktionary.org/wiki/textuel">textuelle</a>) dédiées à notre <a href="https://fr.wiktionary.org/wiki/aspectus#la"><em>aspectus</em></a>. Ces informations nous sont disponibles dans l’espace de l’écran sous différents <a href="https://fr.wiktionary.org/wiki/aspect">aspects</a>, résultats de la <a href="https://fr.wiktionary.org/wiki/mani%C3%A8re">manière</a> dont elles ont été <a href="https://fr.wiktionary.org/wiki/former">formées</a>.
- </p><p>Soit un <a href="https://fr.wiktionary.org/wiki/moment">moment</a> de <a href="https://fr.wikipedia.org/wiki/Perception">perception</a> & son ouverture <a href="https://fr.wikipedia.org/wiki/Philosophie_de_la_perception">philosophique</a>. Pour cela, avoir accès à une connexion <a href="https://fr.wikipedia.org/wiki/Internet">internet</a> & installer, sur l’ordinateur exploité pour s’y connecter, un <a href="https://fr.wikipedia.org/wiki/Navigateur_web">navigateur</a> pour consulter le [web](<a href="https://fr.wikipedia.org/wiki/World_Wide_Web">World Wide Web — Wikipédia</a>). Cette consultation se concrétise par la surface d’un écran où nous sont perceptibles des pages d’informations de diverses natures (iconographique, vidéo ou <a href="https://fr.wiktionary.org/wiki/textuel">textuelle</a>) dédiées à notre <a href="https://fr.wiktionary.org/wiki/aspectus#la"><em>aspectus</em></a>. Ces informations nous sont disponibles dans l’espace de l’écran sous différents <a href="https://fr.wiktionary.org/wiki/aspect">aspects</a>, résultats de la <a href="https://fr.wiktionary.org/wiki/mani%C3%A8re">manière</a> dont elles ont été <a href="https://fr.wiktionary.org/wiki/former">formées</a>.
- </p><p>Soit un <a href="https://fr.wiktionary.org/wiki/moment">moment</a> de <a href="https://fr.wikipedia.org/wiki/Perception">perception</a> & son ouverture <a href="https://fr.wikipedia.org/wiki/Philosophie_de_la_perception">philosophique</a>. Pour cela, avoir accès à une connexion <a href="https://fr.wikipedia.org/wiki/Internet">internet</a> & installer, sur l’ordinateur exploité pour s’y connecter, un <a href="https://fr.wikipedia.org/wiki/Navigateur_web">navigateur</a> pour consulter le [web](<a href="https://fr.wikipedia.org/wiki/World_Wide_Web">World Wide Web — Wikipédia</a>). Cette consultation se concrétise par la surface d’un écran où nous sont perceptibles des pages d’informations de diverses natures (iconographique, vidéo ou <a href="https://fr.wiktionary.org/wiki/textuel">textuelle</a>) dédiées à notre <a href="https://fr.wiktionary.org/wiki/aspectus#la"><em>aspectus</em></a>. Ces informations nous sont disponibles dans l’espace de l’écran sous différents <a href="https://fr.wiktionary.org/wiki/aspect">aspects</a>, résultats de la <a href="https://fr.wiktionary.org/wiki/mani%C3%A8re">manière</a> dont elles ont été <a href="https://fr.wiktionary.org/wiki/former">formées</a>.
- </p>
- `,
-
- onInit: () => {
-
- //Countable.count(document.getElementById('dedediteur'), counter => this.updateCountInfos(counter), {stripTags: true})
- },
- onUpdate: () => {
-
- Countable.count(document.getElementById('dedediteur'), counter => this.updateCountInfos(counter), {stripTags: false})
-
- }
-
- }),
- linkUrl: null,
- linkMenuIsActive: false,
- }
- },
- beforeDestroy() {
- this.editor.destroy()
- },
-
- mounted(){
- let self = this;
- fetch('/dedediteur/sample-mounier.html').then(function (response) {
- return response.text();
- }).then(function (html) {
- self.editor.setContent(html);
- self.$nextTick().then(() => {
- Countable.count(document.getElementById('dedediteur'), counter => self.updateCountInfos(counter), {stripTags: false})
- })
- }).catch(function (err) {
- // There was an error
- console.warn('Something went wrong.', err);
- });
-
-
- // const area = document.getElementById('dedediteur')
- //
- // const callback = counter => this.updateCountInfos(counter)
- // Countable.on(area, callback, {stripTags: true})
-
- },
-
- methods: {
- loadFile: function () {
- let ed = this.editor;
- let fr = new FileReader();
- fr.onload = function () {
- console.log(fr.result);
- ed.setContent(fr.result)
- };
- fr.readAsText(document.getElementById('input').files[0]);
-
- },
-
- saveFile: function () {
- //console.log(this.editor.getHTML())
- var text = this.editor.getHTML()
- var data = new Blob([text], {type: 'text/html'});
- var url = window.URL.createObjectURL(data);
- document.getElementById('download_link').href = url;
- document.getElementById('download_link').click()
- },
- showLinkMenu(attrs) {
- this.linkUrl = attrs.href
- this.linkMenuIsActive = true
- this.$nextTick(() => {
- this.$refs.linkInput.focus()
- })
- },
- hideLinkMenu() {
- this.linkUrl = null
- this.linkMenuIsActive = false
- },
- setLinkUrl(command, url) {
- command({href: url})
- this.hideLinkMenu()
- },
-
-
- loadEnvironment(){
- let self = this;
- Environment.loadEnvironment(this.environmentName).then(function(env){
- self.environment = env;
- })
- },
-
- updateCountInfos(counter){
- console.log(counter);
- this.nbWords = counter.words;
- this.nbSentences = counter.sentences;
- this.nbParagraphs = document.getElementById("dedediteur").querySelectorAll('p').length;
- },
-
- pdfExport(){
- window.print();
- //link rel="stylesheet" type="text/css" href=
- // let cssPrintElt = document.createElement("link");
- // cssPrintElt.setAttribute('rel', 'stylesheet');
- // cssPrintElt.setAttribute('type', 'text/css');
- // cssPrintElt.setAttribute('media','print');
- // cssPrintElt.setAttribute('href', './print.css');
- // document.head.appendChild(cssPrintElt);
- // printJS('dedediteur', 'html')
- //printJS({printable:'docs/xx_large_printjs.pdf', type:'pdf', showModal:true})
- // var element = document.getElementById('dedediteur');
- // var opt = {
- // margin: 1,
- // filename: 'dedediteur-export.pdf',
- // image: { type: 'jpeg', quality: 0.98 },
- // html2canvas: { scale: 2 },
- // jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
- //};
-
-
- // New Promise-based usage:
- // html2pdf().set(opt).from(element).save();
-
- }
-
- }
- }
- </script>
-
- <style lang="scss">
- @import '../assets/_vars';
- @import '../assets/menuchar';
- @import '../assets/menupara';
- @import '../assets/dedediteur.css';
-
- .bottom-bar{
- position: fixed;
- width: 100vw;
- height: 25px;
- background-color: $bg-color;
- bottom: 0px;
- z-index: 50;
- border-top:1px solid #ccc;
- font-size: 0.8rem;
- display: flex;
- align-items: center;
- div {
- display: flex;
- span {
- margin-right: 10px;
- padding-left : 5px;
- }
- }
- }
- .env-select{
- font-size: 0.8rem;
- position : fixed;
- right : 2px;
- bottom:2px;
- z-index: 100;
- select {
- min-width: 80px;
- border: $button-border;
- background-color: $bg-color;
- }
- }
-
- #file_actions {
- /*border-bottom : 1px solid #2c3e50;*/
- padding: 12px;
- position: fixed;
- top: 10px;
- left: 10px;
- z-index: 200;
- }
-
- #output_button, #input_button, #pdf_button {
- border: 1px solid black;
- width: 24px;
- height: 24px;
- cursor: pointer;
- outline:none;
- &:focus {
- outline: none;
- }
- }
-
- #input_button {
- background-color: white;
- }
-
- #output_button {
- background-color: black;
- margin-left: 12px;
- }
- #pdf_button{
- background-color: red;
- margin-left: 12px;
- }
-
- /* editor*/
- .editor {
- position: relative;
- }
-
-
- .ProseMirror:read-write:focus {
- outline: none;
- }
-
-
-
-
-
- </style>
|