How to use the WYSIWYG editor

⚠️⚠️⚠️

This sdk documentation is deprecated and will not be updated. Check out our new docs at https://sdk.buildfire.com/docs/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 which you can use as follows:

In these examples you can use the BuildFire datastore to persist the content and load it in the widget as explained in How to use the Datastore.

---

Using Javascript:

content\index.html

1- Add the following script tags to the head assuming the path for your control is plugins\[your plugin]\control\content\index.html.

<script src="../../../../scripts/tinymce/tinymce.min.js"></script>

2- Add a textarea.

<textarea name="content"></textarea>

3- Add the following javascript after having the textarea declared or updated with initial content:

tinymce.init({ selector: "textarea" });

4- Use tinymce.activeEditor.getContent() to get the content to save at the BuildFire datastore or your own remote location when editing is complete.

widget\index.html

1- Add a container div.

<div id="my_container_div"></div>

2- 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\index.html

1- Add the following script tags to the head tag assuming the path for your control is plugins\[your plugin]\control\content\index.html.

<script src="../../../../scripts/tinymce/tinymce.min.js"></script>
<script src="../../../../scripts/tinymce/ui-tinymce.js"></script>

2- Add to the html a textarea with attribute ui-tinymce.

<textarea id="text" ui-tinymce ng-model="data.content.your_model_property" ></textarea>

3- Make sure that ui.tinymce is included in your module definition.

angular.module('textPlugin', ['ui.tinymce']);

4- Save your model to the BuildFire datastore or your own remote location when editing is complete.

widget\index.html

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 How to use Navigation (buildfire.navigation.makeSafeLinks).