Rich Text Editor

The Rich Text Editor component allows users to create html with options for font styles, formats, links, images and more.

Importing

For code splitting optimizations, the Rich Text Editor is exported separately and must be imported as shown here:

import { CiRichTextEditor } from '@ci/stratus-components/build/rich-text-editor'

Usage

Use v-model to bind data to your Rich Text Editor.

Use the placeholder prop to show text before the editor has any content.

Use the fullwidth prop to make your editor fullwidth.

<template>
  <ci-rich-text-editor
    v-model="editor"
    placeholder="Add your text here"
    fullwidth
  />
</template>
<script>
export default {
  data() {
    return {
      editor: ``
    }
  }
}
</script>

Controls

Use the controls prop to define what controls appear in your editor's toolbar and how they are grouped. You can either pass in a string of the preset you want or pass in an array where each item is a group of controls as a string[].

You can also choose from one of the presets: 'all' (default), 'content', or style.

<template>
  <DemoGrid align="left" layout="vertical">
    <ci-rich-text-editor v-model="allEditor" placeholder="preset: all" fullwidth />
    <ci-rich-text-editor v-model="contentEditor" placeholder="preset: content" controls="content" fullwidth />
    <ci-rich-text-editor v-model="styleEditor" placeholder="preset: style" controls="style" fullwidth />
    <ci-rich-text-editor
      v-model="customEditor"
      placeholder="Custom controls"
      :controls="[['bulletList'], ['orderedList'], ['bold'], ['italic']]"
      fullwidth
    />
  </DemoGrid>
</template>
<script>
export default {
  data() {
    return {
      allEditor: ``,
      contentEditor: ``,
      styleEditor: ``,
      customEditor: ``
    }
  }
}
</script>

Secondary Controls

Use the secondary-controls prop to add a second toolbar to your editor. This can be useful on compact screens where all the controls may not fit in one row. This prop has the same options as controls.

<template>
  <ci-rich-text-editor
    v-model="editor"
    controls="content"
    secondary-controls="style"
  />
</template>
<script>
export default {
  data() {
    return {
      editor: ``
    }
  }
}
</script>

Layout

Use the layout prop to choose between controls-top or controls-bottom.

<template>
  <ci-rich-text-editor
    v-model="editor"
    controls="content"
    secondary-controls="style"
    layout="controls-bottom"
  />
</template>
<script>
export default {
  data() {
    return {
      editor: ``
    }
  }
}
</script>

Error

Use the error prop to add an error appearance to your editor. If you pass in a string, it will render under the editor.

Below, we validate the editor and make sure it has content. If it is blank, an error will appear.

<template>
  <div>
    <ci-rich-text-editor
      v-model="editor"
      placeholder="Please create a message"
      :error="error"
      fullwidth
      @input="validateEditor"
    />
    <br>
    <ci-button @click="sendMessage">Send Message</ci-button>
    <br><br>
    <ci-message v-if="sent">
      Message sent
    </ci-message>
  </div>
</template>
<script>
export default {
  data() {
    return {
      editor: ``,
      error: false,
      errorMessage: 'Please add some content.',
      sent: false,
    }
  },
  methods: {
    validateEditor() {
      this.error = !this.editor ? this.errorMessage : false;
    },
    sendMessage() {
      this.validateEditor();
      if (!this.error) {
        this.editor = '';
        this.sent = true;
        setTimeout(() => {
          this.sent = false;
        }, 3000);
      }
    }
  }
}
</script>

Readonly

Use the Readonly prop to disable your editor, hide all controls and render the doc contents as html.

<template>
  <div>
    <ci-toggle v-model="isReadonly" label="Toggle readonly" />
    <br><br>
    <ci-rich-text-editor
      v-model="editor"
      :readonly="isReadonly"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      isReadonly: true,
      editor: `This content is read only.`
    }
  }
}
</script>

Non-editable content

You can included non-editable content in your Rich Text Editor by wrapping it in an <uneditable-area> tag. You must also ensure there are <p> tags anywhere you want users to be able to add content.

If editable content is deleted, you will need to add the <p> tags in the editable area back again. You can use the @cleared event to do this, as shown in the demo below.

<template>
<div>
  <ci-rich-text-editor
    v-model="editor"
    @cleared="resetTemplate"
    placeholder="Add your text here"
    fullwidth
  />
</div>
</template>
<script>
export default {
  data() {
    return {
      editor: `
        <uneditable-area>
          This area is uneditable
        </uneditable-area>
        <p>This area is editable</p>
      `
    }
  },
  methods: {
    resetTemplate () {
      this.editor += '<p></p>';
    }
  }
}
</script>

Events

Event	Arguments	Description
@input	Editor content	Emitted when inputs are made in the editor
@bold	-	When the bold control is toggled on or off
@italic	-	When the italic control is toggled on or off
@bulletList	-	When the bulletList control is toggled on or off
@orderedList	-	When the bold orderedList is toggled on or off
@cleared	-	When the editable area is deleted and is empty
@blur	-	Emitted when user clicks off editor

Usage in IE

Underlying package - TipTap is not supporting IE natively. To make it work on IE - polyfils are required. Please add following code on startup if application requires IE support

// TipTap polyfills for IE support
if (!('remove' in Element.prototype)) {
  Element.prototype.remove = function() {
    if (this.parentNode) {
      this.parentNode.removeChild(this)
    }
  }
}

// TipTap polyfills for IE support
/**
 * ChildNode.append() polyfill
 * https://gomakethings.com/adding-an-element-to-the-end-of-a-set-of-elements-with-vanilla-javascript/
 * @author Chris Ferdinandi
 * @license MIT
 */
(function (elem) {

  // Check if element is a node
  // https://github.com/Financial-Times/polyfill-service
  var isNode = function (object) {

    // DOM, Level2
    if (typeof Node === 'function') {
      return object instanceof Node;
    }

    // Older browsers, check if it looks like a Node instance)
    return object &&
      typeof object === "object" &&
      object.nodeName &&
      object.nodeType >= 1 &&
      object.nodeType <= 12;
  };

  // Add append() method to prototype
  for (var i = 0; i < elem.length; i++) {
    if (!window[elem[i]] || 'append' in window[elem[i]].prototype) continue;
    window[elem[i]].prototype.append = function () {
      var argArr = Array.prototype.slice.call(arguments);
      var docFrag = document.createDocumentFragment();

      for (var n = 0; n < argArr.length; n++) {
        docFrag.appendChild(isNode(argArr[n]) ? argArr[n] : document.createTextNode(String(argArr[n])));
      }

      this.appendChild(docFrag);
    };
  }

})(['Element', 'CharacterData', 'DocumentType']);


// TipTap polyfills for IE support
(function () {
  DOMImplementation.prototype.createHTMLDocumentNative = document.implementation.createHTMLDocument
  DOMImplementation.prototype.createHTMLDocument = function () {
    if (arguments.length === 0) {
      return document.implementation.createHTMLDocumentNative('title')
    } else {
      return document.implementation.createHTMLDocumentNative(arguments[0])
    }
  }
})()