How to install the In-Context Editor for your technology of choice
Introduction
There are two basic steps to installing the Phrase In-Context Editor:
- Expose the key names of your template
- Add our JavaScript snippet to render the editor interface
We provide ready-to-use adapters for common web frameworks. If we do not yet offer an adapter for your technology, you can easily implement one yourself by following the instructions for custom integrations.
Installation
Ruby on Rails (i18n)
Screencast
This short screencast will show you how to easily set up the In-Context Editor for your Rails app.
Add the gem
Add the phraseapp-in-context-editor-ruby gem to the environment you want to use the In-Context Editor with:
group :development do
gem 'phraseapp-in-context-editor-ruby'
end
and install it by executing the bundle command:
$ bundle install
Initialize the gem
Install the phraseapp-in-context-editor-ruby gem by executing the Rails generator:
$ bundle exec rails generate phraseapp_in_context_editor:install --access-token=YOUR_ACCESS_TOKEN --project-id=YOUR_PROJECT_ID
--access-token
You can create and manage access tokens in your profile settings or via the Authorizations API.
--project-id
You can find the ID of your project in your project settings in the Translation Center.
This will create an initialization file with some configuration options.
Activate the In-Context Editor
Enable the In-Context Editor in your phraseapp_in_context_editor.rb initialization file:
config.enabled = true
Add the JavaScript
Add the JavaScript snippet to your application layout within the <head> tag by using the phraseapp_in_context_editor_js helper:
<head>
...
<%= phraseapp_in_context_editor_js %>
...
</head>
Test the editor
Open your application in any web browser to see the In-Context Editor applied to your app. You can sign in with any user on your Phrase account.
Turbolinks
The In-Context Editor currently does not work with Turbolinks, because Turbolinks will remove all In-Context Editor UI elements from the page on every page fetch.
To solve this, we recommend disabling Turbolinks when using the In-Context Editor by adding the data-no-turbolink attribute to your <body> tag, like this:
<body <%= PhraseApp::InContextEditor.enabled? ? "data-no-turbolink" : "" %>>
View phraseapp-in-context-editor-ruby on GitHub
AngularJS (angular-translate)
Install angular-phrase
Install angular-phrase via Bower (or download it manually):
$ bower install angular-phrase
Add the module to your AngularJS application
Add the angular-phrase module to your existing AngularJS application after loading the angular-translate module:
var myApp = angular.module("myApp", ['pascalprecht.translate', 'phrase']);
Configure
Configure the module:
myApp.value("phraseProjectId", "YOUR-PROJECT-ID");
myApp.value("phraseEnabled", true);
myApp.value("phraseDecoratorPrefix", "");
You can find the ID of your project in your project settings in the Translation Center.
Refer to the In-Context Editor setup guide for more information on the available configuration options.
Add the JavaScript snippet
Add the phrase-javascript directive within your application. It’s usually best to place it inside the <head> tag:
<phrase-javascript></phrase-javascript>
Test the editor
Open your application in any web browser to see the In-Context Editor applied to your app. You can sign in with any user on your Phrase account.
More information
Angular 2+ (ngx-translate)
We provide an adapter to use the In-Context Editor with ngx-translate. If you're using a different localization library along with Angular 2+, check out our guide for custom integrations.
Installation
More information
React
We provide adapters to use the In-Context Editor with react-i18next and react-intl. If you're using a different localization library along with React, check out our guide for custom integrations.
Installation
Follow the installation instructions for your i18n library of choice:
- react-intl-phraseapp (for use with react-intl)
- react-i18next-phraseapp (for use with react-i18next)
More information
- Demo application for react-i18next-phraseapp on GitHub
- Demo application for react-intl-phraseapp on GitHub
Vue I18n
Please find detailed setup instructions here:
https://phrase.github.io/vue-i18n-phrase-in-context-editor/guide/getting-started/#installation
Symfony 2.x
Create a new environment
We recommend creating a new environment in which the In-Context Editor will run. In this example, we’ll call the new environment translation.
Start by creating a new configuration file:
# app/config/config_translation.yml
imports:
- { resource: config.yml }
parameters:
translator.class: Acme\YourBundle\Translation\PhraseTranslator
The environment should be accessible in the browser, so let’s create a front controller for it:
# web/app_translation.php
<?php
require_once __DIR__.'/../app/bootstrap.php.cache';
require_once __DIR__.'/../app/AppKernel.php';
use Symfony\Component\HttpFoundation\Request;
$kernel = new AppKernel('translation', false);
$kernel->handle(Request::createFromGlobals())->send();
Extending the base translator
You need to override the standard translation method in order to expose the key names to the In-Context Editor:
# Acme/YourBundle/Translation/PhraseTranslator.php
<?php
namespace Acme\YourBundle\Translation;
use Symfony\Bundle\FrameworkBundle\Translation\Translator as BaseTranslator;
class PhraseTranslator extends BaseTranslator
{
public function trans($id, array $parameters = array(), $domain = 'messages', $locale = null)
{
$prefix = "";
if (!isset($locale)) {
$locale = $this->getLocale();
}
if (!isset($this->catalogues[$locale])) {
$this->loadCatalogue($locale);
}
if ($domain == 'routes') {
// Return translated values for 'routes' domain
return strtr($this->catalogues[$locale]->get((string) $id, $domain), $parameters);
} else {
// Return PhraseApp translation keys for all other domains
return $prefix.$id.$suffix;
}
}
}
Add the JavaScript snippet
To load the In-Context Editor, you need to add the JavaScript snippet to your layout:
# Acme/YourBundle/Resources/views/layout.html.twig
Test the editor
Start translating your app by accessing your front controller in the browser.
The code in this tutorial was created by Malte Marx from marxbeck
More information
Symfony 3.x
Create a new environment
We recommend creating a new environment in which the In-Context Editor will run. In this example, we’ll call the new environment translation.
Start by creating a new configuration file:
# app/config/config_translation.yml
imports:
- { resource: config.yml }
The environment should be accessible in the browser, so let’s create a front controller for it:
# web/app_translation.php
<?php
use Symfony\Component\HttpFoundation\Request;
$loader = require __DIR__.'/../app/autoload.php';
$kernel = new AppKernel('translation', true);
$kernel->loadClassCache();
$request = Request::createFromGlobals();
$response = $kernel->handle($request);
$response->send();
$kernel->terminate($request, $response);
Extending the base translator
You need to override the standard translation method in order to expose the key names to the In-Context Editor:
# src/AppBundle/Translation/PhraseTranslator.php
<?php
namespace AppBundle\Translation;
use Symfony\Bundle\FrameworkBundle\Translation\Translator as BaseTranslator;
class PhraseTranslator extends BaseTranslator
{
public function trans($id, array $parameters = array(), $domain = 'messages', $locale = null)
{
$prefix = "";
if (null === $domain) {
$domain = 'messages';
}
// Return ID of translation key with pre- and suffix for PhraseApp
return $prefix.$id.$suffix;
}
}
Creating a compiler pass
Next, to make sure the class is always overridden when your bundle is used, you can create a compiler pass:
# src/AppBundle/DependencyInjection/Compiler/OverrideServiceCompilerPass.php
<?php
namespace AppBundle\DependencyInjection\Compiler;
use Symfony\Component\DependencyInjection\Compiler\CompilerPassInterface;
use Symfony\Component\DependencyInjection\ContainerBuilder;
class OverrideServiceCompilerPass implements CompilerPassInterface
{
public function process(ContainerBuilder $container)
{
$definition = $container->getDefinition('translator.default');
$definition->setClass('AppBundle\Translation\PhraseTranslator');
}
}
When using separate compiler passes, you’ll need to register them in the build() method of the bundle class:
# src/AppBundle/AppBundle.php
<?php
namespace AppBundle;
use Symfony\Component\HttpKernel\Bundle\Bundle;
use Symfony\Component\DependencyInjection\ContainerBuilder;
use AppBundle\DependencyInjection\Compiler\OverrideServiceCompilerPass;
class AppBundle extends Bundle
{
public function build(ContainerBuilder $container)
{
parent::build($container);
if($container->getParameter("kernel.environment") == 'translation') {
$container->addCompilerPass(new OverrideServiceCompilerPass());
};
}
}
Add the JavaScript snippet
To load the In-Context Editor, you need to add the JavaScript snippet to your layout (and don't forget to set your project ID):
# src/YourBundle/Resources/views/layout.html.twig
Test the editor
Start translating your app by accessing your front controller in the browser.
The code in this tutorial was created by Malte Marx from marxbeck
More information
Django
Add the package
Install the django-phrase package with pip:
$ pip install django-phrase
Next, add Phrase to the list of installed apps:
INSTALLED_APPS = (
'phrase',
)
Extend the template
You can now use the phrase_i18n template tag in your templates:
{% load phrase_i18n %}
Note: In order to let django-phrase override the translation methods, you must load phrase_i18n after you load i18n.
Add the JavaScript snippet
Add the JavaScript snippet to your base layout file. This should go inside the <head> tag in your template file:
{% phrase_javascript %}
Configuration
You can configure the In-Context Editor for your project by using these options:
PHRASE_ENABLED = True
PHRASE_PROJECT_ID = 'YOUR_PROJECT_ID'
PHRASE_PREFIX = '{{__'
PHRASE_SUFFIX = '__}}'
Test the editor
Open your application in any web browser to see the In-Context Editor applied to your application. You can sign in with any user on your Phrase account.
More
Spring Framework
Copy the source code
Make sure the package com.phraseapp.incontexteditor is available in your app. You can check it out on GitHub.
Configure your Project ID
Set the correct project ID and adjust the other parameters in PhraseAppConfiguration.class.
Apply Phrase as your MessageSource
To render all translations through Phrase, add the bean to your application:
@Bean
@Conditional(PhraseAppEnabledCondition.class)
public MessageSource messageSource() {
return new PhraseAppMessageSource();
}
Add the Javascript
Provide the required JavaScript helper in your templates by exposing the helper as a bean:
@Bean
public PhraseAppJavascriptHeader phraseAppJavascriptHeader() {
return new PhraseAppJavascriptHeader();
}
Then, add the <script> tag to your templates within each page’s <head> tag:
<head>
<script th:utext="${@phraseAppJavascriptHeader.getHeader()}"></script>
</head>
Restart the application and sign in with your Phrase user credentials.
More
- Example application source code on GitHub
- Full Article: How To Localize Spring Applications Like A Pro
- Spring Boot starter package (provided by ePages)
Other
If there is no ready-to-use adapter for your technology yet, you can easily implement one yourself by following the instructions for custom integrations.
FAQs
We are using a firewall in our company network. Can I still use the In-Context editor?
As long as the following two pages are not blocked, the feature will work:
https://app.phrase.com/assets/in-context-editor/2.0/app.js
https://api.phrase.com