diff --git a/public/env/basic.json b/public/env/basic.json
new file mode 100644
index 0000000..3534778
--- /dev/null
+++ b/public/env/basic.json
@@ -0,0 +1,40 @@
+{
+  "name" : "basic",
+  "characters" : [
+    {
+      "label" : "mot",
+      "styles": [
+        {
+          "label" : "étranger",
+          "class" : "foreign"
+        },
+        {
+          "label" : "acronyme",
+          "class" : "acronym"
+        }
+      ]
+    },
+
+    {
+      "label" : "numéral",
+      "styles": [
+        {
+          "label" : "siècle",
+          "class" : "century"
+        },
+        {
+          "label" : "date",
+          "class" : "date"
+        }
+      ]
+    }
+  ],
+
+  "paragraphs": {
+    "T1": true,
+    "T2": false,
+    "T3": false,
+    "T4": false,
+    "quote" : false
+  }
+}
diff --git a/public/env/basicplus.json b/public/env/basicplus.json
new file mode 100644
index 0000000..d56d2a7
--- /dev/null
+++ b/public/env/basicplus.json
@@ -0,0 +1,40 @@
+{
+  "name" : "basicplus",
+  "characters" : [
+    {
+      "label" : "mot",
+      "styles": [
+        {
+          "label" : "étranger",
+          "class" : "foreign"
+        },
+        {
+          "label" : "acronyme",
+          "class" : "acronym"
+        }
+      ]
+    },
+
+    {
+      "label" : "numéral",
+      "styles": [
+        {
+          "label" : "siècle",
+          "class" : "century"
+        },
+        {
+          "label" : "date",
+          "class" : "date"
+        }
+      ]
+    }
+  ],
+
+  "paragraphs": {
+    "T1": true,
+    "T2": true,
+    "T3": true,
+    "T4": false,
+    "quote" : false
+  }
+}
diff --git a/src/components/Dedediteur.vue b/src/components/Dedediteur.vue
index bd1ce64..b4c1016 100644
--- a/src/components/Dedediteur.vue
+++ b/src/components/Dedediteur.vue
@@ -1,439 +1,398 @@
 <template>
-  <div class="editor">
-    <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()">
-    </div>
+    <div class="editor">
+        <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 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 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>
         </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 class="editor-main">
 
-        </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() }"
+            <!--<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;`"
                 >
-                  <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 class="menubar char-menubar">
+
+                        <div class="dropdown">
+                            <button class="dropbtn border-left">Mot</button>
+                            <div class="dropdown-content">
+                                <a href="#">
+                                    <button
+                                            class="menubar__button"
+                                            :class="{ 'is-active': isActive.customstyle({ type: 'acronym' }) }"
+                                            @click="commands.customstyle({ type: 'acronym' })">
+                                        Acronyme
+                                    </button>
+                                </a>
+                                <a href="#">
+                                    <button
+                                            class="menubar__button"
+                                            :class="{ 'is-active': isActive.customstyle({ type: 'foreign' }) }"
+                                            @click="commands.customstyle({ type: 'foreign' })">
+                                        Étranger
+                                    </button>
+                                </a>
+                            </div>
+                        </div>
+
+                        <div class="dropdown">
+                            <button class="dropbtn">Nom</button>
+                            <div class="dropdown-content">
+                                <a href="#">
+                                    <button
+                                            class="menubar__button"
+                                            :class="{ 'is-active': isActive.customstyle({ type: 'author-quotation' }) }"
+                                            @click="commands.customstyle({ type: 'author-quotation' })">
+                                        Auteur - Citation
+                                    </button>
+                                </a>
+                                <a href="#">
+                                    <button
+                                            class="menubar__button"
+                                            :class="{ 'is-active': isActive.customstyle({ type: 'author-work' }) }"
+                                            @click="commands.customstyle({ type: 'author-work' })">
+                                        Auteur - Œuvre
+                                    </button>
+                                </a>
+                                <a href="#">
+                                    <button
+                                            class="menubar__button"
+                                            :class="{ 'is-active': isActive.customstyle({ type: 'brand' }) }"
+                                            @click="commands.customstyle({ type: 'brand' })">
+                                        Marque
+                                    </button>
+                                </a>
+                                <a href="#">
+                                    <button
+                                            class="menubar__button"
+                                            :class="{ 'is-active': isActive.customstyle({ type: 'proper-noun' }) }"
+                                            @click="commands.customstyle({ type: 'proper-noun' })">
+                                        Nom propre
+                                    </button>
+                                </a>
+                            </div>
+                        </div>
+
+
+                        <div class="dropdown">
+                            <button class="dropbtn">Numéral</button>
+                            <div class="dropdown-content">
+                                <a href="#">
+                                    <button
+                                            class="menubar__button"
+                                            :class="{ 'is-active': isActive.customstyle({ type: 'century' }) }"
+                                            @click="commands.customstyle({ type: 'century' })">
+                                        Siècle
+                                    </button>
+                                </a>
+                                <a href="#">
+                                    <button
+                                            class="menubar__button"
+                                            :class="{ 'is-active': isActive.customstyle({ type: 'date' }) }"
+                                            @click="commands.customstyle({ type: 'date' })">
+                                        Date
+                                    </button>
+                                </a>
+                                <a href="#">
+                                    <button
+                                            class="menubar__button"
+                                            :class="{ 'is-active': isActive.customstyle({ type: 'chapter' }) }"
+                                            @click="commands.customstyle({ type: 'chapter' })">
+                                        Chapitre
+                                    </button>
+                                </a>
+                            </div>
+                        </div>
+
+
+                        <div class="dropdown">
+                            <button class="dropbtn  border-right">Typo</button>
+                            <div class="dropdown-content">
+                                <a href="#">
+                                    <button
+                                            class="menubar__button"
+                                            :class="{ 'is-active': isActive.subscriptstyle() }"
+                                            @click="commands.subscriptstyle()">
+                                        Indice
+                                    </button>
+                                </a>
+                                <a href="#">
+                                    <button
+                                            class="menubar__button"
+                                            :class="{ 'is-active': isActive.superscriptstyle() }"
+                                            @click="commands.superscriptstyle()">
+                                        Exposant
+                                    </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 class="editor__content" :editor="editor"/>
         </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> &amp; 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> &amp; 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>.
+    import {Editor, EditorContent, EditorMenuBar, EditorMenuBubble} from 'tiptap'
+
+    import {
+        Blockquote,
+        Heading,
+        OrderedList,
+        BulletList,
+        ListItem,
+        Link
+    } from 'tiptap-extensions'
+
+    import Environment from "../environments/Environement"
+    import CustomStyle from "./extensions/CustomStyle";
+    import SubscriptStyle from "./extensions/SubscriptStyle";
+    import SuperscriptStyle from "./extensions/SuperscriptStyle";
+
+    export default {
+        components: {
+            EditorContent,
+            EditorMenuBar,
+            EditorMenuBubble
+        },
+        data() {
+            return {
+                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(),
+                        new SuperscriptStyle(),
+                        new SubscriptStyle()
+                    ],
+                    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> &amp; 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> &amp; 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> &amp; 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> &amp; 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> &amp; 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> &amp; 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> &amp; 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> &amp; 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> &amp; 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> &amp; 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> &amp; 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> &amp; 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> &amp; 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> &amp; 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>
         `,
 
-      }),
-      linkUrl: null,
-      linkMenuIsActive: false,
+                }),
+                linkUrl: null,
+                linkMenuIsActive: false,
+            }
+        },
+        beforeDestroy() {
+            this.editor.destroy()
+        },
+
+        mounted(){
+          //console.log(Environment.loadAvailablesEnvironments());
+        },
+
+        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;
+                })
+            }
+
+        }
     }
-  },
-  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;
-    z-index: 200;
-}
-#output_button, #input_button{
-    border : 1px solid black;
-    width: 24px;
-    height: 24px;
-    cursor: pointer;
-}
-#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;
-  }
+    @import '../assets/_vars';
+    @import '../assets/menuchar';
+    @import '../assets/menupara';
+    @import '../assets/dedediteur.css';
+
+    .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 {
+        border: 1px solid black;
+        width: 24px;
+        height: 24px;
+        cursor: pointer;
+    }
+
+    #input_button {
+        background-color: white;
+    }
+
+    #output_button {
+        background-color: black;
+        margin-left: 12px;
+    }
+
+    /* editor*/
+    .editor {
+        position: relative;
+    }
+
+
+    .ProseMirror:read-write:focus {
+        outline: none;
+    }
+
+
 
 
 
diff --git a/src/environments/Environement.js b/src/environments/Environement.js
new file mode 100644
index 0000000..5aa302c
--- /dev/null
+++ b/src/environments/Environement.js
@@ -0,0 +1,68 @@
+
+const  defaultEnvName = "ar";
+
+export default class Environment {
+
+
+
+
+    constructor(options = {}) {
+        this.name = options.name ? options.name : defaultEnvName;
+        this.defaultOptions = {
+            paragraphs: {
+                T1: true,
+                T2: true,
+                T3: true,
+                T4: true,
+                quote : true
+            },
+
+            characters : {}
+        }
+
+        this.setOptions({
+            ...this.defaultOptions,
+            ...options,
+        })
+    }
+
+
+    setOptions(options) {
+        this.options = {
+            ...this.options,
+            ...options,
+        }
+
+    }
+
+
+    hasParagraphOption(optionKey){
+        return this.options.paragraphs[optionKey] | false;
+    }
+
+    hasCharOption(optionKey){
+        return this.options.characters[optionKey] | false;
+    }
+
+
+    static async loadEnvironment(envName) {
+        if(envName === defaultEnvName)
+            return new Environment();
+        else
+            return Environment.loadEnvironmentFromJSONFile('/env/' + envName + '.json')
+
+    }
+
+    static async loadEnvironmentFromJSONFile(filePath) {
+        let res = await fetch(filePath);
+        let json = await res.json();
+        return Environment.loadEnvironmentFromJSON(json);
+
+
+    }
+
+    static loadEnvironmentFromJSON(json) {
+        return new Environment(json);
+    }
+
+}