first

documentation/plugins/ckeditor/CKEditor-basic-documentation.md

@@ -0,0 +1,36 @@
+### CKEditor
+
+Every application needs a rich text editor component. Vuero is bundled with
+the [CK Editor](https://ckeditor.com/docs/ckeditor5/latest/index.html)
+plugin. The example below shows the default editor mode. There are many more,
+but the plugin doesn't support importing all editor variations. You have to
+chose one and keep on with it. Other available layouts can be found [here](https://ckeditor.com/docs/ckeditor5/latest/index.html).
+
+<!--code-->
+
+```vue
+<script setup lang="ts">
+import CKE from '@ckeditor/ckeditor5-vue'
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
+
+const CKEditor = CKE.component
+const content = ref(`<h2>Your HTML Content</h2>`)
+const config = {
+  fontFamily: {
+    options: ['"Montserrat Variable", sans-serif', '"Roboto Flex Variable", sans-serif'],
+  },
+}
+</script>
+
+<template>
+  <div class="content">
+    <CKEditor
+      v-model="content"
+      :editor="ClassicEditor"
+      :config="config"
+    />
+  </div>
+</template>
+```
+
+<!--/code-->