Component: CustomCodeEditor

Custom Code Editor component for ApostropheCMS version 3 module

mounted :
  • Intialized Ace Editor JS
mounted :
  • Set Default `this.next` value
beforeDestroy :
  • Destroy clipboardJS Initialized

Members

Data

innerace Object components/CustomCodeEditor.vue, line 105

Ace Objects

ace: {
     theme: <String>,
     modes: <Object[]>,
     options : <Object[]>,
     defaultMode: <String>,
     optionsTypes: <Object[]>,
     aceEditor: ace.edit(element) || null,
     aceModePath: <String>,
     aceThemePath: <String>,
     cache: <Object[]>,
     config: <Object[]>
}

inneraceEditor aceEditor components/CustomCodeEditor.vue, line 140

Ace Editor JS store

ace.aceEditor: ace.edit(element) || null

inneraceModePath String components/CustomCodeEditor.vue, line 147

Default Mode path for AceJS

ace.aceModePath: <String>
Default Value:
  • 'ace/mode/'

inneraceThemePath String components/CustomCodeEditor.vue, line 154

Default Theme path for AceJS

ace.aceThemePath: <String>
Default Value:
  • 'ace/theme/'

innercache Array.<Object> components/CustomCodeEditor.vue, line 161

Store Cache when initialize Ace Editor Options

ace.cache: <Object[]>
Default Value:
  • []

innerdropdownClick Boolean components/CustomCodeEditor.vue, line 189

For Dropdown click trigger

innerlog console.log components/CustomCodeEditor.vue, line 197

For logging template value

innermodes Array.<Object> components/CustomCodeEditor.vue, line 113

Ace JS Modes

ace.modes: <Object[]>

innermoreOptionsClick Boolean components/CustomCodeEditor.vue, line 185

For 'three dots' button trigger

inneroptions Array.<Object> components/CustomCodeEditor.vue, line 120

Ace Options

ace.options : <Object[]>
Default Value:
  • {}

inneroptionsClick Boolean components/CustomCodeEditor.vue, line 181

For options clicked trigger

inneroriginalValue String components/CustomCodeEditor.vue, line 177

Original value storage for editor.getValue()

Default Value:
  • ''

innersearchOptions String components/CustomCodeEditor.vue, line 193

For input search value

Default Value:
  • ''

innertheme String components/CustomCodeEditor.vue, line 106

Theme String

ace.theme: <String>

Computed

innercomputedCheck String components/CustomCodeEditor.vue, line 205

config optionsCustomizer object is enable or not

innercomputedcheckDropdown Boolean components/CustomCodeEditor.vue, line 217

Check whether module options for dropdown is configured or not

innercomputedcheckDropdownColor String components/CustomCodeEditor.vue, line 236

Arrow Color for Dropdown Config

innercomputeddropdownComponentSwitch String components/CustomCodeEditor.vue, line 225

Switch dropdown icon component

innercomputedgetTitle String components/CustomCodeEditor.vue, line 247

Get title from modes

Methods

inneroptionsEvents(e) components/CustomCodeEditor.vue, line 331

Trigger reference to optionsContainerComponent to trigger buttonOptionsClick method

Parameters:
Name Type Description
e Event

inneroptionsScroll(e) components/CustomCodeEditor.vue, line 368

Deactivate moreOptionsClick whenever the options container is scrolled

Parameters:
Name Type Description
e Event

HTML Event

innerresetCacheValue() components/CustomCodeEditor.vue, line 340

Reset data for ace.cache value

innerupdateCacheValue(ObjectValue) components/CustomCodeEditor.vue, line 348

Update cache value event

Parameters:
Name Type Description
ObjectValue Object 
updateCacheValue({property, value})

innerupdateOptionsTypesValue() components/CustomCodeEditor.vue, line 379

Update options Types module value

Parameters:
Type Description
Object

innervalidate(value) → {String | Boolean} components/CustomCodeEditor.vue, line 314

Method provide by ApostropheCMS3 to validate value from server

Parameters:
Name Type Description
value object

Value return from ApostropheCMS self.validate