TTS. DocsPanel Design System
1.4.0
Forms

Text editor

Contents

The TinyMCE editor provides a powerful and customizable rich text editing experience, making it ideal for content creation, form inputs, and structured document editing.

If you are using it with vue, you should import import Editor from '@tinymce/tinymce-vue' by npm i @tinymce/tinymce-vue

Introduction

TinyMCE (v6 and below) is a WYSIWYG (What You See Is What You Get) text editor that allows users to format content effortlessly. It supports advanced text styling, media embedding, custom plugins, and real-time collaboration.

Code Structure

The following example demonstrates the basic setup of TinyMCE within a webpage:

                    
 HTML
                      
                    
<textarea class="js-tinymce" placeholder="اكتب رسالتك هنا…"></textarea>

Example

View Mode 
                          
 HTML
                            
                          
<textarea class="js-tinymce" placeholder="ابدأ بكتابة محتوى الصفحة هنا…"></textarea>
<!-- Usage Example -->
<TextEditor
  v-model="textData"
  label="عنوان الحملة"
  placeholder="ابدأ بكتابة محتوى الصفحة هنا…"
/>
<!-- Vue Component Code Block -->
<template>
  <label class="form-label">
    {{ label }}<span v-if="required" class="text-danger">*</span>
  </label>
  <editor
    :placeholder="placeholder"
    :value="modelValue"
    :required="required"
    @input="$emit('update:modelValue', $event.target.value)"
    :name="name"
    :id="id"
    api-key="no-api-key"
    :init="{
      language: 'ar_SA',
      language_url: 'js/tinymce/langs/ar_SA.js',
      promotion: false,
      menubar: false,
      plugins: 'lists link image emoticons fullscreen media',
      toolbar:
        'bold italic underline | alignright aligncenter alignleft alignjustify | numlist bullist | link image media emoticons | undo redo | fullscreen',
      directionality: 'rtl',
      height: 300,
      branding: false,
      statusbar: false,
      content_style: `@font-face {font-family: 'HacenMaghreb';font-style: normal;font-weight: 400;src: url('../fonts/hacen-maghreb/HacenMaghrebLt.eot');src: url('../fonts/hacen-maghreb/HacenMaghrebLt.eot?#iefix') format('embedded-opentype'),url('../fonts/hacen-maghreb/HacenMaghrebLt.woff2') format('woff2'),url('../fonts/hacen-maghreb/HacenMaghrebLt.woff') format('woff');} .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {color: var(--tt-text-disabled);opacity: 1;font-family: 'HacenMaghreb', sans-serif;font-weight: 400; color: #8C8593;font-size: 14px;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} .mce-content-body {font-family: 'HacenMaghreb', sans-serif; font-size: 13px; color: #736C7A}`,
    }"
  />
</template>
<script setup>
import Editor from '@tinymce/tinymce-vue'
defineProps({
  label: String,
  placeholder: String,
  modelValue: String,
  required: Boolean,
  className: String,
  name: String,
  id: String,
})
 
defineEmits(['update:modelValue'])
</script>
Last updated 3 months ago