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#
Usage#
Content- Add a textarea.
- Add the following javascript after having the textarea declared or updated with initial content:
- Use
tinymce.activeEditor.getContent()
to get the content to save at the BuildFire datastore or your own remote location when editing is complete.
#
Widget- Add a container div.
- Retrieve the content and assign it to the inner html of the div.
For more advanced usage please refer to TinyMCE.
#
Using Angular#
Content- Add the following script tags to the head tag.
- Add a textarea to body with attribute
ui-tinymce
- Make sure that
ui.tinymce
is included in your module definition.
- Save your model to the BuildFire datastore or your own remote location when editing is complete.
#
Widget- Add the angular strict contextual escaping service (
$sce
) in your controller
2- Add a container div with the ng-bind-html
attribute set to your model property
3- Retrieve the model and assign your model property with the angular
trustAsHtml
function
For more advanced usage please refer to the angular directive ui-tinymce and TinyMCE.
#
Gotcha In widgetswidget\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).