Configure In-Context Editor

After setting up In-Context Editor for your web application, there are several configurable options to customize the editor and make it work seamlessly with your technology.

Enable & Disable In-Context Editor

This setting is only available when using the phraseapp-in-context-editor-ruby gem

You can enable or disable In-Context Editor explicitely. This will affect the inclusion of the JavaScript snippet (when using the view helper) and the rendering of the decorated key names in your views:

PhraseApp::InContextEditor.enabled = true|false

For example you can bind the flag to an environment variable:

PhraseApp::InContextEditor.enabled = (ENV["IN_CONTEXT_EDITING"] == "1")

Please note that the In-Context Editor is disabled by default.

Ignored keys

This setting is only available when using the phraseapp-in-context-editor-ruby gem

If you want to exclude keys from being rendered with the In-Context Editor. When working with Rails those could be keys such as error messages or date/time format keys.

To exclude these keys from being handled automatically by the phraseapp-in-context-editor-ruby gem, simply add an array of the keys to your phraseapp_in_context_editor.rb initializer. You can use wildcards as well:

PhraseApp::InContextEditor.configure do |config|
  config.ignored_keys = ["date.*", "forbidden.key", "errors.messages*"]
end

Keys matching one of these patterns will not be made accessible to the In-Context Editor but rendered normally.

Customize the key decorators

When using In-Context Editor you typically wrap the key name with decorators (curly braces by default) to generate a unique identification key in context of your document:

{{__phrase_YOUR.KEY__}}

However, this can cause conflicts with other libraries (e.g. client-side template engines such as AngularJS or Ember.js) that use a similar syntax.

If you encounter this problem, you might want to change the PhraseApp In-Context Editor decorator pre- and suffix in your setup. To tell the In-Context Editor which decorators the parser should look for, simply add the following configuration values before the JavaScript snippet:

window.PHRASEAPP_CONFIG = {
  prefix: '[[__',
  suffix: "__]]"
}

This will tell the editor to look for tags beginning with [[__ and ending with __]], e.g.

[[__phrase_YOUR.KEY__]]

If you’re using the phraseapp-in-context-editor-ruby gem to provide In-Context Editor functionality, make sure to configure decorators there as well:

PhraseApp::InContextEditor.configure do |config|
  config.prefix = "[[__"
  config.suffix = "__]]"
end

If you don’t use the gem, please make sure you adjust the key name exposure pattern in your custom code.

Debug mode

To enable debug mode, simply add the following configuration value before the JavaScript snippet:

window.PHRASEAPP_CONFIG = {
  debugMode: true
}

Ajax mode

PhraseApp In-Context Editor supports Ajax and DOM manipulation (i.e. via JavaScript) out of the box. To achieve this, we use mutation observers. However, they are only supported by modern browsers.

Ajax mode can cause problems in some cases and result in severe performance issues when using In-Context Editor. To disable Ajax mode, simply add the following configuration before the JavaScript snippet:

window.PHRASEAPP_CONFIG = {
  ajaxObserver: false
}

Auto lowercase

By default, the In-Context Editor document parser will convert all keys to lowercase. If you’re experiencing issues with this behavior and want to use case-sensitive keys within the In-Context Editor, you should consider disabling the auto lowercase feature:

window.PHRASEAPP_CONFIG = {
  autoLowercase: false
}

Force locale

To set a specific locale explicitly when starting up the In-Context Editor you can use the forceLocale setting.

This can make sense if you want to pre-select the locale currently displayed in your web application in the In-Context Editor as well.

window.PHRASEAPP_CONFIG = {
  forceLocale: "pt-BR"
}