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

CKEditor

Every application needs a rich text editor component. Vuero is bundled with the CK Editor 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.

<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>