|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438 |
- <template>
- <div class="editor">
- <div id="file_actions">
- <button id="input_button" onclick="document.getElementById('input').click()"></button>
- <button id="output_button" v-on:click="saveFile"></button>
- <input type="file" style="display:none;" id="input" v-on:change="loadFile()">
- </div>
-
-
- <div class="editor-main">
-
- <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
-
- <div>
-
- <div class="menubar char-menubar">
- <ul>
-
- <li>
- Mot
- <ul>
- <li>
- <button
- class="menubar__button"
- :class="{ 'is-active': isActive.customstyle({ type: 'acronym' }) }"
- @click="commands.customstyle({ type: 'acronym' })">
- Acronyme
- </button>
- </li>
- <li>
- <button
- class="menubar__button"
- :class="{ 'is-active': isActive.customstyle({ type: 'foreign' }) }"
- @click="commands.customstyle({ type: 'foreign' })">
- Étranger
- </button>
- </li>
- </ul>
- </li>
-
-
- <li>
- Nom
- <ul>
- <li>
- <button
- class="menubar__button"
- :class="{ 'is-active': isActive.customstyle({ type: 'author-quotation' }) }"
- @click="commands.customstyle({ type: 'author-quotation' })">
- Auteur - Citation
- </button>
- </li>
- <li>
- <button
- class="menubar__button"
- :class="{ 'is-active': isActive.customstyle({ type: 'author-work' }) }"
- @click="commands.customstyle({ type: 'author-work' })">
- Auteur - Œuvre
- </button>
- </li>
- <li>
- <button
- class="menubar__button"
- :class="{ 'is-active': isActive.customstyle({ type: 'brand' }) }"
- @click="commands.customstyle({ type: 'brand' })">
- Marque
- </button>
- </li>
- <li>
- <button
- class="menubar__button"
- :class="{ 'is-active': isActive.customstyle({ type: 'proper-noun' }) }"
- @click="commands.customstyle({ type: 'proper-noun' })">
- Nom propre
- </button>
- </li>
- </ul>
- </li>
-
-
- <li>
- Numéral
- <ul>
- <li>
- <button
- class="menubar__button"
- :class="{ 'is-active': isActive.customstyle({ type: 'century' }) }"
- @click="commands.customstyle({ type: 'century' })">
- Siècle
- </button>
- </li>
- <li>
- <button
- class="menubar__button"
- :class="{ 'is-active': isActive.customstyle({ type: 'date' }) }"
- @click="commands.customstyle({ type: 'date' })">
- Date
- </button>
- </li>
- <li>
- <button
- class="menubar__button"
- :class="{ 'is-active': isActive.customstyle({ type: 'chapter' }) }"
- @click="commands.customstyle({ type: 'chapter' })">
- Chapitre
- </button>
- </li>
- </ul>
- </li>
-
- <li>
- Typo
- <ul>
- <li>
- <button
- class="menubar__button"
- :class="{ 'is-active': isActive.subscriptstyle() }"
- @click="commands.subscriptstyle()">
- Indice
- </button>
- </li>
- <li>
- <button
- class="menubar__button"
- :class="{ 'is-active': isActive.superscriptstyle() }"
- @click="commands.superscriptstyle()">
- Exposant
- </button>
- </li>
- </ul>
- </li>
-
-
- </ul>
- </div>
-
-
- <div class="menubar paragraph-menubar">
-
- <button
- class="menubar__button"
- :class="{ 'is-active': isActive.paragraph() }"
- @click="commands.paragraph">
- ¶
- </button>
-
-
- <button
- class="menubar__button"
- :class="{ 'is-active': isActive.heading({ level: 1 }) }"
- @click="commands.heading({ level: 1 })">
- T1
- </button>
-
- <button
- class="menubar__button"
- :class="{ 'is-active': isActive.heading({ level: 2 }) }"
- @click="commands.heading({ level: 2 })">
- T2
- </button>
-
- <button
- class="menubar__button"
- :class="{ 'is-active': isActive.heading({ level: 3 }) }"
- @click="commands.heading({ level: 3 })">
- T3
- </button>
-
- <button
- class="menubar__button"
- :class="{ 'is-active': isActive.heading({ level: 3 }) }"
- @click="commands.heading({ level: 3 })">
- T4
- </button>
-
- <button
- class="menubar__button"
- :class="{ 'is-active': isActive.blockquote() }"
- @click="commands.blockquote">
- « »
- </button>
-
- </div>
- </div>
- </editor-menu-bar>
-
- <!--
- <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;`"
- >
-
- <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">
- DEL
- </button>
- </form>
-
- <template v-else>
- <button
- class="menububble__button"
- @click="showLinkMenu(getMarkAttrs('link'))"
- :class="{ 'is-active': isActive.link() }"
- >
- <span>{{ isActive.link() ? 'Update Link' : 'Add Link'}}</span>
- LINK
- </button>
- </template>
-
- <button
- class="menubar__button"
- :class="{ 'is-active': isActive.paragraph() }"
- @click="commands.paragraph"
- >
- ¶
- </button>
-
- <button
- class="menubar__button"
- :class="{ 'is-active': isActive.heading({ level: 1 }) }"
- @click="commands.heading({ level: 1 })"
- >
- H1
- </button>
-
- <button
- class="menubar__button"
- :class="{ 'is-active': isActive.heading({ level: 2 }) }"
- @click="commands.heading({ level: 2 })"
- >
- H2
- </button>
-
- <button
- class="menubar__button"
- :class="{ 'is-active': isActive.heading({ level: 3 }) }"
- @click="commands.heading({ level: 3 })"
- >
- H3
- </button>
-
- <button
- class="menubar__button"
- :class="{ 'is-active': isActive.bullet_list() }"
- @click="commands.bullet_list"
- >
- ul
- </button>
-
- <button
- class="menubar__button"
- :class="{ 'is-active': isActive.ordered_list() }"
- @click="commands.ordered_list"
- >
- ol
- </button>
-
- <button
- class="menubar__button"
- :class="{ 'is-active': isActive.blockquote() }"
- @click="commands.blockquote"
- >
- ""
- </button>
-
- <button
- class="menubar__button"
- :class="{ 'is-active': isActive.customstyle({ type: 'dede' }) }"
- @click="commands.customstyle({ type: 'dede' })">DeDe</button>
-
- </div>
- </editor-menu-bubble>
-
- -->
-
- <!--
- <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
-
- <div class="menubar">
-
-
-
- </div>
- </editor-menu-bar>-->
-
- <editor-content class="editor__content" :editor="editor" />
- </div>
- </div>
- </template>
-
- <script>
- import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
- import {
- Blockquote,
- Heading,
- OrderedList,
- BulletList,
- ListItem,
- Link
- } from 'tiptap-extensions'
-
- import CustomStyle from "./extensions/CustomStyle";
- import SubscriptStyle from "./extensions/SubscriptStyle";
- import SuperscriptStyle from "./extensions/SuperscriptStyle";
- export default {
- components: {
- EditorContent,
- EditorMenuBar
- },
- data() {
- return {
- keepInBounds: true,
- editor: new Editor({
- extensions: [
- new Blockquote(),
- new BulletList(),
- new Heading({ levels: [1, 2, 3] }),
- new ListItem(),
- new OrderedList(),
- new Link(),
- new CustomStyle(),
- new SuperscriptStyle(),
- new SubscriptStyle()
- ],
- content: `
- 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>.
- `,
-
- }),
- linkUrl: null,
- linkMenuIsActive: false,
- }
- },
- beforeDestroy() {
- this.editor.destroy()
- },
-
- 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())
- },
- 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()
- }
- }
- }
- </script>
-
- <style lang="scss">
- @import '../assets/menubar.scss';
- @import '../assets/dedediteur.css';
- .menubar{
- text-align: center;
- margin-top: 12px;
- }
-
- #file_actions{
- /*border-bottom : 1px solid #2c3e50;*/
- padding : 12px;
- position: fixed;
- top: 10px;
- left: 10px;
- }
- #output_button, #input_button{
- border : 1px solid black;
- width: 24px;
- height: 24px;
- }
- #input_button{
- background-color: white;
- }
- #output_button{
- background-color: black;
- margin-left: 12px;
- }
-
- /* editor*/
- .editor{
- position: relative;
- }
-
-
- .ProseMirror:read-write:focus {
- outline: none;
- }
-
-
- /*menububble */
- .menububble{
- /*visibility: hidden;*/
- background-color: black;
- border-radius: 5px;
- z-index: 100;
- padding: 5px;
- position: absolute;
- bottom: 25px;
- }
-
- .menububble.is-active{
- visibility: visible;
- }
-
- .menububble button{
- background-color: black;
- border: none;
- color : white;
- border-radius: 5px;
- }
-
-
-
- </style>
|