Skip to main content

WYSIWYG Editor

The WYSIWYG ("What You See Is What You Get") editor allows users to add rich formatted text and images in the app widget the same way it appears on the plugin content.

Buildfire provides direct access to the TinyMCE WYSIWYG editor library.

tip

You can use the Buildfire datastore to persist the content and load it in the widget.

Requirements​

Content​

<head>
  <!-- JS -->
  <script src="../../../../scripts/tinymce/tinymce.min.js"></script>
</head>

Usage​

Content​

  1. Add a textarea.
<body>
  <textarea id="wysiwygContent" name="content"></textarea>
</body>
  1. Add the following javascript after having the textarea declared or updated with initial content:
tinymce.init({
  selector: "#wysiwygContent",
});
  1. Use tinymce.activeEditor.getContent() to get the content to save at the Buildfire datastore or your own remote location when editing is complete.
tip

It is preferable to add change and keyUp eventListeners when initializing tinymce. For example, the change event would catch adding images or buttons, while keyUp would catch keystrokes.

Example​

let timerDelay = null;
tinymce.init({
  selector: "#wysiwygContent",
  setup: (editor) => {
    editor.on("change keyUp", (e) => { // use change and keyUp to cover all cases
      if (timerDelay) clearTimeout(timerDelay);
      timerDelay = setTimeout(() => { // use timer delay to avoid handling too many WYSIWYG updates
          let wysiwygContent = tinymce.activeEditor.getContent();
          // add logic here to handle content updates
      }, 500);
    });
    editor.on("init", () => {
      // any initialization logic goes here  
    });
  }
});

Widget​

  1. Add a container div.
<div id="my_container_div"></div>
  1. Retrieve the content and assign it to the inner html of the div.
document.getElementById("my_container_div").innerHTML =
  data.content.your_model_property;

For more advanced usage please refer to TinyMCE.

Using Angular​

Content​

  1. Add the following script tags to the head tag.
<head>
  <!-- ... -->
  <script src="../../../../scripts/tinymce/tinymce.min.js"></script>
  <script src="../../../../scripts/tinymce/ui-tinymce.js"></script>
</head>
  1. Add a textarea to body with attribute ui-tinymce
<textarea
  id="text"
  ui-tinymce
  ng-model="data.content.your_model_property"
></textarea>
  1. Make sure that ui.tinymce is included in your module definition.
angular.module("textPlugin", ["ui.tinymce"]);
  1. Save your model to the Buildfire datastore or your own remote location when editing is complete.

Widget​

  1. Add the angular strict contextual escaping service ($sce) in your controller
var textPluginApp = angular.module("textPlugin", []);
textPluginApp.controller("textPluginCtrl", [
  "$scope",
  "$sce",
  function ($scope, $sce) {},
]);

2- Add a container div with the ng-bind-html attribute set to your model property

<div ng-bind-html="data.content.your_model_property"></div>

3- Retrieve the model and assign your model property with the angular trustAsHtml function

$scope.data.content.your_model_property = $sce.trustAsHtml(
  $scope.data.content.your_model_property
);

For more advanced usage please refer to the angular directive ui-tinymce and TinyMCE.

In widget\index.html, make sure you call buildfire.navigation.makeSafeLinks after assigning the data to your inner html. This will force the external links in your data to open in the InAppBrowser.

Otherwise it will open a link in the app itself, and the user can't find a way to go back to the app. For more advanced details please refer to Navigation (buildfire.navigation.makeSafeLinks).