Integration On Websites

This wiki has been moved to https://dev.languagetool.org - this page is archived and is not updated anymore

You can offer a text area for proofreading texts on your own web page, just like we do on our homepage. This will make use of our public REST service so you don't have to install anything but a few files. The text will be sent to our server, and the result will be send back to the user's browser where potential errors will be underlined.

These are only two steps needed to integrate LanguageTool on a web page:

  1. Add Javascript includes and initialization code of the textarea in the <head> section of your page
  2. Add HTML code for the textarea

We will now describe the installation in detail.

Javascript includes and initialization code

First, add this code to your HTML's <head> section:

<script type="text/javascript"
    src="https://www.languagetool.org/js/jquery-1.7.0.min.js"></script>
<script type="text/javascript"
    src="https://www.languagetool.org/online-check/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript"
    src="https://www.languagetool.org/online-check/tiny_mce/plugins/atd-tinymce/editor_plugin2.js"></script>
 
<script language="javascript" type="text/javascript">  
  tinyMCE.init({
     mode : "textareas",
     plugins : "AtD,paste",
     paste_text_sticky : true,
     setup : function(ed) {
         ed.onInit.add(function(ed) {
             ed.pasteAsPlainText = true;
         });
     },  
     /* translations: */
     languagetool_i18n_no_errors : {
         // "No errors were found.":
         "de-DE": "Keine Fehler gefunden."
     },
     languagetool_i18n_explain : {
         // "Explain..." - shown if there is an URL with a detailed description:
         "de-DE": "Mehr Informationen..."
     },
     languagetool_i18n_ignore_once : {
         // "Ignore this error":
         "de-DE": "Hier ignorieren"
     },
     languagetool_i18n_ignore_all : {
         // "Ignore this kind of error":
         "de-DE": "Fehler dieses Typs ignorieren"
     },
     languagetool_i18n_rule_implementation : {
         // "Rule implementation":
         "de-DE": "Implementierung der Regel"
     },
 
     languagetool_i18n_current_lang :
         function() { return document.checkform.lang.value; },
     /* The URL of your LanguageTool server.
        If you use your own server here and it's not running on the same domain 
        as the text form, make sure the server gets started with '--allow-origin ...' 
        and use 'https://your-server/v2/check' as URL: */
     languagetool_rpc_url                 : "https://languagetool.org/api/v2/check",
     /* edit this file to customize how LanguageTool shows errors: */
     languagetool_css_url :
         "https://www.languagetool.org/online-check/" +
         "tiny_mce/plugins/atd-tinymce/css/content.css",
     /* this stuff is a matter of preference: */
     theme                              : "advanced",
     theme_advanced_buttons1            : "",
     theme_advanced_buttons2            : "",
     theme_advanced_buttons3            : "",
     theme_advanced_toolbar_location    : "none",
     theme_advanced_toolbar_align       : "left",
     theme_advanced_statusbar_location  : "bottom",
     theme_advanced_path                : false,
     theme_advanced_resizing            : true,
     theme_advanced_resizing_use_cookie : false,
     gecko_spellcheck                   : false
  });
 
  function doit() {
     var langCode = document.checkform.lang.value;
     tinyMCE.activeEditor.execCommand("mceWritingImprovementTool", langCode);
  }
</script>

If you're using your own LanguageTool server and it's not running on the same domain as the page with the check from, make sure it gets started with --allow-origin '*'. If it doesn't, the browser will not be able to connect it for security reasons.

To be robust against changes on our server, you might want to download the files linked in the script elements and adapt the code accordingly. You can add translations for your language in the "translations" section.

HTML code for the textarea

Add this code at the place where you want the textarea to show up:

<form name="checkform" action="http://community.languagetool.org" method="post">
 
  <p id="checktextpara">
      <textarea id="checktext" name="text" style="width: 100%"
        rows="6">Paste your own text here... or check check this text.</textarea>
  </p>
 
  <div>
      <select name="lang" id="lang">
          <option value="en-US">English</option>
          <option value="de-DE">German</option>
          <option value="it">Italian</option>
      </select>
      <input type="submit" name="_action_checkText"
          value="Check Text" onClick="doit();return false;"> Powered by <a href="https://languagetool.org">languagetool.org</a>
      <div id="feedbackErrorMessage" style="color: red;"></div>
  </div>
 
</form>
  • You can add as many languages as you want to the select element - see the list of languages supported by LanguageTool.
  • This textarea requires Javascript to work - if Javascript is not activated in the user's browser or there's some other technical problem, the user will not get underlined errors but will instead be redirected to community.languagetool.org where the check result will be shown.
  • When using our public server, we expect you to link back to languagetool.org.

Done!

That's it - your page should now show a text area with the default text and as soon as you click the "Check Text" button, errors detected by LanguageTool should become underlined. If you experience problems, please visit our forum and post a description of your issue, including an URL where your page can be found.

Finally, we'd like you to be aware of the fact that we provide the LanguageTool service for free and that we cannot give any guarantees about its availability.

Examples

Some pages that use this kind of integration of LanguageTool:

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License