Textbox.io 2.x Documentation : HTML Code View

Textbox.io includes the ability for users to directly edit HTML via code view. This provides power users with more flexibility over the content they create and includes features such as automatic tag completion and matching.

When enabled, the user can toggle between code view and design view by clicking on the icon in the bottom right corner of the editor container

Editor container with code view enabled. The user can toggle between code and design views by clicking the icon in the bottom right corner. 

Switching between code view and design view programmatically

The Textbox.io API provides functionality to toggle between code and design views via editor.mode.set(mode).

var editor = textboxio.replace('#id');
editor.mode.set('code'); 				// switches the editor into HTML markup editing mode
editor.mode.set('design'); 				// switches the editor into WYSIWYG ('design') mode
var currentMode = editor.mode.get(); 	//returns the current mode, either 'design' or 'code'.

Hiding the code view button

If you wish to switch between code view and design view programmatically, you may wish to disable the code view button. To disable the code view button but leave the code view feature enabled, set the configuration codeview.showButton property to false.

var config = {
	codeview: {
		showButton : false	// Hides the code view button, default is true (shown)
	}
};
 
var editor = textboxio.replace('#id', config); 

Disabling code view

In some instances, you may need to disable code view feature via the configuration codeview.enabled property.

When you disable the code view feature, the button is also removed from the Textbox.io UI. 

var config = {
	codeview: {
		enabled : false	// Disables code view feature, default is true (enabled)
	}
};
 
var editor = textboxio.replace('#id', config); 

Filtering

Toggling between code and design views triggers filter logic (both external and potentially via plugins) to be executed on editor content. This is necessary to sanitize content and remove superfluous UI (such as spelling underlines, etc) from content when switching. 

Logic is as follows:

• Switching from design to code view - code view's content is run through the output filter chain
• Switching from code view to design view - the design view's content is run through the input filter chain

See Filtering Content for more information on content filtering.

See also:

• API reference
• Filtering Content
• Customizing the Editor