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.

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.

Gotcha In widgets#

widget\index.html make sure you call buildfire.navigation.makeSafeLinks after assigning the data to your inner html for forcing the external links in your data to open up using 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).