Skip to content
Joel Parke edited this page Dec 3, 2016 · 8 revisions

This page lists all the attribute options for the directives.

textAngular

Required

  • ngModel: The variable to store the html content in.

Optional

  • serial: A unique identifier, defaults to a random number.
  • name: A unique name to identify the editor, defaults to "textAngularEditor" + attrs.serial
  • taDefaultWrap: The name of a HTML tag that will wrap each line by default.
  • taShowHtml: If this evaluates to true on load then the raw html editor will be displayed by default.
  • taFocussedClass: The class to be added to the textAngular element when edited, defaults to value in taOptions.
  • taTextEditorClass: The class to be added to the textAngular WYSYWYG element, defaults to value in taOptions.
  • taHtmlEditorClass: The class to be added to the textAngular HTML editor element, defaults to value in taOptions.
  • taTextEditorSetup: Evaluates to a function on the scope, this function is passed the WYSWYG editor element before compilation such that additional directives/attributes can be added.
  • taHtmlEditorSetup: Evaluates to a function on the scope, this function is passed the HTML editor element before compilation such that additional directives/attributes can be added.
  • taFileDrop: Evaluates to a function on the scope, this function is called whenever a file is dropped onto the editor.
  • taUnsafeSanitizer: If this is defined then the sanitiser will be disabled. IMPORTANT Only enable this where you trust the users that will be inputting data, this allows ALL tags so is vulnerable to XSS.
  • tabIndex: Passes the tabIndex onto the inputs.
  • placeholder: Creates a placeholder onto the editors.
  • taDisabled: This value is watched on the scope, if it evaluates to true then the editors are all set to read-only mode.
  • required: Turns on form validation whereby content is required.
  • taTargetToolbars: Evaluates to an array of toolbar names, all of these will be activated when the editor is focussed and will act on the editor.
  • taPaste: Passes the pasted HTML through the expression as $html, the result of this expression is what the pasted html becomes. e.g. ta-paste="modifyHtml($html)"
  • taResizeForceAspectRatio: If this is defined then fixed aspect ratios are maintained for all image resizing.
  • taResizeMaintainAspectRatio: If this evaluates to true then fixed aspect ratios are maintained during resizing unless the Shift key is pressed.
  • taMaxText: Validates whether the content length is not more than the specified value.
  • taKeepStyles: Normally when html is pasted into the editor, taFixChrome removes the following styles: [font-family: inherit, line-height: color: inherit, color: rgb(#{3}), background-color: rgb(#{3})] But when taKeepStyles === "true", these are kept.

The following are available when the default toolbar is used and will be passed onto it;

  • taToolbar
  • taToolbarClass
  • taToolbarGroupClass
  • taToolbarButtonClass
  • taToolbarActiveButtonClass
  • taFocussedClass

taToolbar

Optional

  • taToolbar: Evaluates to an array of arrays of names of tools to put on the toolbar, e.g. "[['h1','h2','h3'],['bold','italics']]". Defaults to value in taOptions.
  • taToolbarClass: The class to apply to the toolbar, defaults to taOptions.classes.toolbar.
  • taToolbarGroupClass: The class to apply to the toolbar group, defaults to taOptions.classes.toolbarGroup.
  • taToolbarButtonClass: The class to apply to the toolbar buttons, defaults to taOptions.classes.toolbarButton.
  • taToolbarActiveButtonClass: The class to apply to the when a button is active (i.e. italics text is selected, italics button should be active), defaults to taOptions.classes.toolbarButtonActive.
  • taFocussedClass: The class to apply to the toolbar when it is focussed/active, defaults to taOptions.classes.focussed.