Exploring on Word-like Editor on Titanium Mobile Apps

Past few days, I am authoring a Titanium mobile module, a word-like editor (WYSIWYG editor — What you see is what you get), that can be easily integrated into the mobile apps whenever you need it. In order to test the editor functionality, I tried to make a nearly complete document apps, that allows user to create, manage document, and then create the contents by using this word-like editor.

By hitting the ‘+‘ icon on the top right side, the options dialog is opened where you can create a file or folder that manage the document files.

Once you clicked ‘Create a File’, the following word-like editor will be shown. Woaw!

You can edit and formatting the text using ‘Bold‘ or ‘Italic’ icon, insert URL, images, and inserting a bullet list. More editor features will be added.

Aside from the editor feature, in order to make this document apps more useful, I’m also adding in value-added feature such as

1. Previewing the documents in HTML web page.
2. Export the document into PDF format, and then you can email to your friend.
3. Download the web contents from external URL into word editor.
4. Save the document to Dropbox shared folder.

In the future release, I would like to make more feature such as ‘Import from and Export to Office Word format’, in order to make more useful for my sister who is iPad user.

Document conversion in different formats is the most challenging part. I will try my best to make the feature natively worked on local mobile, however some of the conversion job still requiring a server side program.

I planned to publish the word editor module in the future in order to let the other developers to integrate this editor into their mobile apps.

Integrate this word editor into your apps is easy, here is a snippet of code to show how to do it.

// include the editor titanium library
Titanium.include('/source/lib/editor/editor_titanium.js');
// initialize the editor titanium library class
var ed = new editor_titanium();
// initialize the editor feature and getting an editor handler
var editor = ed.init_editor({
// setting width and height of the editor, set as auto it will try to fit the window
width : 'auto',
height : 'auto',

// this method will be called when editor.save() had been called
// content = the fetched document content string you can use
success : function(content) {
saveContentToDatabase(content);
}

,

load : function() {
var content = getContentFromDatabase();
editor.setContent(content);
}
);

// to include the editor into your Windows, or views
win.add(editor.editor);
// or
view.add(editor.editor);

// to save the document explicitly
editor.save(); // then success callback will be called

// to set document content explicitly
editor.setContent('hello this text will be set to document');

// to get document content explicitly
var content = editor.getContent();

It worked like a charm.

Conclusion

I explored a word like editor module that can be integrated into Titanium mobile apps. I planned to publish the module into Appcelerator Marketplace for other developers to integrate it into their apps. I had shown a snippet of code on how to use this editor.

Author: fyhao

Jebsen & Jessen Comms Singapore INTI University College Bsc (Hon) of Computer Science, Coventry University View all posts by fyhao