bshamblen:autoform-ace

A custom field type for the aldeed:autoform Meteor package that renders the Ace code editor.

Prerequisites

You may use this package with or without the Bootstrap library. The only prerequisite is the aldeed:autoform package, which can add at your Meteor app`s root directory with the following command:

meteor add aldeed:autoform

Installation

In the root directory of your Meteor app, enter:

meteor add vansonhk:autoform-ace

Usage

This input type is intended to be used with type: String schema keys.

Example SimpleSchema

1var schema = new SimpleSchema({
2	title: {
3		type: String
4	},
5	codeBlock: {
6		type: String,
7		autoform: {
8			type: 'ace'
9		}
10	}
11});

Options

By default the height of the Ace editor field will be set to 300px, with the xcode theme, in javascript mode. You may adjust these settings by using any of the following options:

Attribute	Description	Default
data-ace-height	Allows you to adjust the height of the editor window. Use any standard CSS height measument string ('300px', '10em'...)	300px
data-ace-theme	The name of the theme you want to use to style the editor window. There are about 30 themes to pick from. For a full list of themes, please consult the Ace editor Github repository.	xcode
data-ace-mode	The name of the mode you want to use to lint your code. The Ace editor will display syntax errors and highlight code based on the mode you select. For a complete list of modes, please consult the Ace editor Github repository	javascript

Example HTML attributes

If you prefer to set the attributes on a case-by-case basis, you may apply the options in your HTML, like so:

1{{> afQuickField
2		name='codeBlock'
3		data-ace-height="500px"
4		data-ace-theme="clouds"
5		data-ace-mode="html"
6}}

Example SimpleSchema attributes

If you prefer to set the attributes at a global level, for the schema, you may apply the options in your SimpleSchema definition, like so:

1var schema = new SimpleSchema({
2	...
3	codeBlock: {
4		type: String,
5		autoform: {
6			type: 'ace',
7			'data-ace-height': '500px',
8			'data-ace-theme': 'clouds',
9			'data-ace-mode': 'html'
10		}
11	}
12	...
13});

Contributing

Please feel free to contribute to this package. Before you fork, please open an issue to check to see if anyone else is already working on your proposed changes.