Warning

This documentation set is currently work in progress and available in English only!

Pre-Edit¶

Plug-in¶

Overview¶

The ACCEPT Pre-Edit plug-in can be used to improve the quality of text entered by your users. It provides several capabilities including spelling, grammar and style corrections.

There are several reasons why this may be useful to you:

Help your users improve the quality of their submissions. This can help them receive better responses from other users. This is especially useful if they are asking questions.
Help non-native speakers submit quality English submissions
If you wish to use machine translation to provide translations in other languages, improving the quality of the text can lead to better machine translated content.

The ACCEPT Pre-Edit plug-in has been designed so that it can be integrated into any Web based application with a minimum of effort and the focus has been on providing a solution that can be used with ANY input area.

Target Audience¶

Warning

The ACCEPT Pre-Edit plug-in documentation is intended for the following technical audience:

CMS Managers
Forums Managers
Web Site Authors
Professional Web Developers

Dependencies¶

The ACCEPT plug-in is written in JavaScript and uses the jQuery and jQuery UI libraries. These libraries need to be included on any page using the ACCEPT plug-in.

The following versions of JQuery and jQueryUI have been tested:

Library	Version
jQuery	All versions above v1.3.2
jQueryUI	All versions above v1.7.3

Both are included as part of the download package, but you can always download the latest version of jQuery core library and the last version of jQuery UI.

Tip

We recommend jQuery v1.3 or above due to the significant speed increases in several areas.

The jQuery UI library used should match the version of jQuery selected.

JQuery version	JQueryUI version
jQuery v1.3.2 or above	jQuery UI version 1.8.21 (Stable Version)
jQuery 1.3.2	jQuery UI for jQuery 1.3.2 (Stable Version)

The ACCEPT plug-in uses the ACCEPT Pre-Edit API to perform the actual checks. For more information, refer to the API documentation.

Note

Always remember that in order to use the ACCEPT plug-in, JavaScript needs to be set to “Enabled” at the browser level.

Supported Browsers¶

The ACCEPT plug-in uses CORS (Cross Origin Resource Sharing), which confines the plug-in support to the following browsers:

Mozilla Firefox 3.6.28+
Internet Explorer 8+
Safari 4+
Opera 12+
Chrome 20+

Downloading¶

The plug-in can be downloaded here.

The download package contains:

Directory	Contents
/	index.html (this document)
/js	jquery-1.5.1.min.js (jQuery core library), jquery-ui-1.8.24.custom.min.js (jQuery UI library), accept-jquery-plugin-2.0.js (ACCEPT plug-in core file)
/css	jquery-ui.css (jQuery UI CSS), accept.css (ACCEPT plug-in CSS)
/examples	Example1.htm (Use case code example), Example2.htm (Use case code example)
/extra/tinyMce	tiny_mce.js (tiny MCE plug-in core file)
/docs	index.html

Installation¶

Installing the plug-in is relatively straightforward, you just need to include the ACCEPT plug-in CSS and JS files in your Web application.

There are several ways to use the plug-in and depending on the approach you take you may need to include a few more files and make some configuration changes.

This version of the plug-in can be used in the following ways:

Context Menu: Adding right click support to a text area to bring up the ACCEPT menu (Grammar, Spelling, Style).

TinyMCE Integration: Embedding the check option into the Tiny MCE text editor

External Call: Trigger the check option from an external HTML element (pre-existing element or DOM injected in real time) click.

Context Menu¶

With this approach you will need to pass a DOM element selector (element ID or element CSS class) as a parameter so that a mouse (right) click event can be injected which will triggers a context menu.

Besides a close button, this context menu has four options available:

ACCEPT – gets the text from an input area element and performs a style, grammar and spelling checking on it. The results are displayed in a dialog box.

Grammar – gets the text from an input area checks the text grammar. The results are displayed in a dialog box.

Spelling - gets the text from an input area and search for spelling errors in the text. The results are displayed in a dialog box.

Style - gets the text from an input area and evaluates the style of the text. The results are displayed in a dialog box.

pre-edit/plugin/../../_static/simpleContextMenu.png

If you intend to use the plug-in in a simple input area triggered by the mouse right click you need to include the files in your web page:

<script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../js/jquery-ui-1.8.24.custom.min.js" type="text/javascript"></script>
<link href="../css/Accept.css" rel="stylesheet" type="text/css" />
<link href="../css/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="../extras/tiny_mce/tiny_mce.js" type="text/javascript"></script>
<script src="../js/accept-jquery-plugin-2.0.js" type="text/javascript"></script>

The following is an example of the code needed.

$(document).ready(function () {
    $("#myTextArea").Accept({
                    configurationType: 'contextMenu',
                    righClickEnable:true,
        AcceptServerPath: "http://www.accept-portal.eu/AcceptApi/Api/v1",
        ApiKey:"ENTER_KEY_HERE",
        Lang: "en",
        imagesPath: "../css/images",
                    requestFormat: "HTML",
                    styleSheetPath: '../css/'
    });
});

TinyMCE Integration¶

With this approach we can embed a right click context menu into the Tiny MCE editor or trigger the check from a button situated in the editor toolbar:

In this case the same options explained above are available and there is an additional button called “ACCEPT” on the TinyMCE toolbar that can be used the same way as the “ACCEPT” option within the context menu.

The following screenshot shows how this will look:

The following is an example of the code needed.

$(document).ready(function () {
    $("#myTextArea").Accept({
        configurationType: 'tinyMceEmbedded',
        AcceptServerPath: "http://www.accept-portal.eu/AcceptApi/Api/v1",
        ApiKey:"ENTER_KEY_HERE",
        Lang: "en",
        imagesPath: "../css/images",
        tinyMceUrl: "../extras/tiny_mce/tiny_mce.js",
                    styleSheetPath: '../css/',
                    requestFormat: "HTML"
    });
});

External Call¶

This approach allows to trigger the content check from a click event bound to any HTML element in the DOM. This HTML element can be part of the existing page or can be added in real time as part of the plug-in configuration process.

The following screenshot shows how this will look:

The following is an example of the code needed.

$(document).ready(function () {
    $("#myTextArea").Accept({
    configurationType: 'externalCall',
    AcceptServerPath: "http://www.accept-portal.eu/AcceptApi/Api/v1",
    ApiKey: "ENTER_KEY_HERE",
    Lang: "en",
    imagesPath: "images",
            injectSelector: "#elementIdFromWhereTheHtmlContentWillBeInjected",
    triggerCheckSelector: "#elementIdFromWhereTheContentCheckCanBeTriggered",
    injectContent: '<img src="http://www.accept-portal.eu/Plugin/v1.0.1/css/images/actions-tools-check-spelling-icon.png" alt="Check Spelling and Grammar">',
    injectWaitingPeriod: 100
    });
});

Configuration¶

Name	Type	Value
configurationType	String	Default: “contextMenu”

Describes how the plug-in should behave. This parameter can only receive two values, contextMenu or tinyMCEEmbedded.

Name	Type	Value
AcceptServerPath	String	Default: “”

The URL for the ACCEPT API.

Name	Type	Value
Lang	String	Default: “en”

Language that will be used for the input text. Can be fr for French, en for English or de for German.

Name	Type	Value
imagesPath	String	Default: ”../css/images”

The path to the directory that contains all the images used by the plug-in.

Name	Type	Value
tinyMceUrl	String	Default: “extra/tiny_mce/tiny_mce.js”

The path to the tiny MCE JavaScript file. This option is mandatory.

Name	Type	Value
LoadInputText	JavaScript Function	Default: see code below

var inputText = "";
inputText = settings.requestFormat == 'TEXT' ? inputText = $("#" + acceptObjectId).val() : inputText = $("#" + acceptObjectId).html();
return inputText;

Customize the way to load the input text. This parameter is consumed as a function, this means is expected that a function be passed, this function should return the text to check. Example:

 function () {
    var inputText =  /* INPUT TEXT or HTML */
    return inputText;
}

Name	Type	Value
SubmitInputText	JavaScript Function	Default: see code below

settings.requestFormat == 'TEXT' ? $('#' + acceptObjectId).val(text) : $('#' + acceptObjectId).html(text);

Customize the way the input text is submitted from the dialog box back into the text editor. This parameter is also consumed as a function, in this case the plug-in expects to pass the text as an input parameter. Example:

function (textParameter) { /* SEND THE TEXT OR HTML BACK TO THE TEXT INPUT AREA */ }

Name	Type	Value
languageUi	String	Default: “en”

Language to use for the UI labels.

Currently the following languages are supported:

en = English

fr = French

de = German

Name	Type	Value
requestFormat	String	Default: “TEXT”

Format of the text input, which can be TEXT for text content or HTML for text containing markup language.

Name	Type	Value
Rule	String	Default: The language-specific rule set.

Optional rule set that should be used by the Acrolinx server to check the content. By default, a language-specific rule set will be used.

Name	Type	Value
checkingLevels	String Array	Default: []

Instead of defining the :make:var`Rule` setting above it is also possible to define multiple rule sets by using the checkingLevels setting. The rule names provided will then be interpreted as checking levels where the first rule name provided is used to perform the first content check. Subsequent checks can then be triggered by clicking the remaining check level buttons.

Name	Type	Value
rightClickEnable	Boolean	Default: false

Indicates whether the right-click context menu should be active.

Name	Type	Value
showFixAll	Boolean	Default: false

Indicates whether the Replace All button should be active.

Name	Type	Value
isModal	Boolean	Default: true

Indicates whether the dialog box that shows the results should behave as a modal.

Name	Type	Value
isModal	Boolean	Default: true

Indicates whether the dialog box that shows the results can be dragged.

Name	Type Value
dialogHeight	Number/String	Default: “auto”

Height (in pixels) of the dialog box that shows the results. Alternatively the value can set to the string auto.

Name	Type Value
dialogWidth	Number/String	Default: “auto”

Width (in pixels) of the dialog box that shows the results. Alternatively the value can set to the string auto.

Name	Type	Value
placeHolderMaxHeight	Number/String	Default: $(window).height()

Maximum height (in pixels) of the dialog box that shows the results.

Name	Type	Value
placeHolderMaxWidth	Number/String	Default: $(window).width()

Maximum width (in pixels) of the dialog box that shows the results.

Name	Type	Value
placeHolderMinHeight	Number/String	Default: 100

Minimum height (in pixels) of the dialog box that shows the results.

Name	Type	Value
placeHolderMinWidth	Number/String	Default: 380

Minimum width (in pixels) of the dialog box that shows the results.

Name	Type	Value
showManualCheck	Boolean	Default: false

When set to true this button allows the user to manual re-check the content.

Name	Type	Value
styleSheetPath	String	Default: ”../css”

Path to the Accept.css file. This path needs to be correctly set in order to inject the necessary styles in the tinyMCE iframe (rendered within the dialog).

Name	Type	Value
htmlBlockElements	String	Default: “p ,h1 ,h2 ,h3 ,h4 ,h5 ,h6 ,ol ,ul ,li ,pre ,address ,blockquote ,dl ,div ,fieldset ,form ,hr ,noscript ,table”

List of block level HTML elements the plug-in should consider. A control node is added after each HTML element in this list to simulate a line break in the content to check. These nodes are removed before the content is applied back to the source placeholder.

Name	Type	Value
refreshStatusAttempts	Number	Default: 5

Number of attempts the plug-in will take to check if the response containing the results for the content sent to check are ready. If the attempts’ value reaches the threshold limit, subsequent manual triggers might be needed by the user.

Name	Type	Value
editorWidth	Number/String	Default: “380px”

Initial width of the dialog inline editor.

Name	Type	Value
editorHeight	Number/String	Default: “80px”

Initial height of the dialog inline editor.

Name	Type	Value
getSessionUser	JavaScript/Function	Default: function () { return “”; }

It is possible to configure the plug-in to search for end user information (login name, etc...) and attach that info as part of the metadata collected. This can be achieved by writing the necessary code to search and then mandatorily return a string value representative of the desired information.

Name	Type	Value
injectSelector	jQuery Selector/String	Default: null

When the plug-in is configured in the External Call mode, this setting combined with the injectContent setting is used to inject extra HTML code on the page. The idea here is to trigger the content check from one element injected by the combination of these properties. The value expected is a jQuery selector, the selector being used to find at least one existing DOM element where the new HTML code (provided via the injectContent setting value) is injected.

Name	Type	Value
injectContent	HTML/String	Default: null

The HTML content that is injected in the element(s) found by the jQuery selector provided in the setting injectSelector.

Name	Type	Value
injectWaitingPeriod	Number	Default: 100

Value in milliseconds the plug-in should wait to inject the HTML content from the injectContent setting into the DOM elements matched in the jQuery selector provided by the injectSelector setting.

Name	Type	Value
triggerCheckSelector	jQuery Selector/String	Default: null

Expects a jQuery selector. This value is used to find the DOM element from where a mouse click will trigger the content check.

Name	Type	Value
timeoutWaitingTime	Number	Default: 7000

Value in milliseconds that Ajax requests will take before fall into a timeout exception.

Theme¶

By default the ACCEPT plug-in has the basic JQueryUI UI. However it will inherit any JQueryUI styling you are already using on your site. You can also skin it using the jQuery UI theme rollover.

Examples¶

For a better understanding on how the plug-in code can be added to your web application we are going to walk through four examples.

Note

You can find the full code for these examples within the download package in the examples folder.

Example 1 (Right Click Context Menu)¶

You own a Web site that has a forum where users can drop questions and you want improve the text quality of your users input. For this case you decide that you don’t want to compromise your current site UI with fancy text editors and you decide to use the ACCEPT plug-in by attaching it to the very basic text area you already have in place.

This way when a user right clicks over your text area it will trigger the options available for checking the text just like is showed in the Installation section. Below is the full explanation for the code you can find within the examples folder:

JavaScript Code¶

Before injecting jQuery or JavaScript actions over your DOM, you should wait for the DOM to be completely loaded. Using jQuery this can be achieved using the following syntax:

$(document).ready(function ()
{
    //Your code here
});

Now add the accept plug-in code:

$(document).ready(function () {
$("#myTextArea").Accept({
        configurationType: 'contextMenu',
        righClickEnable:true,
        AcceptServerPath: "http://www.accept-portal.eu/AcceptApi/Api/v1",
        ApiKey:"ENTER_KEY_HERE",
        Lang: "en",
        imagesPath: "../css/images",
        requestFormat: "HTML",
        styleSheetPath: '../css/'
});
});

HTML Code¶

The HTML code for this example is really simple, all you need is to have an identified text area so that all the plug-in logic be integrated.

<textarea id="myTextArea" rows="10" cols="40" >
this is an test
<textarea>

That’s it. You now have the ACCEPT Plug-in working on your site. Here is the full code snippet:

<script src="http://www.accept-portal.eu/Plugin/v2.0/js/jquery-1.5.1.min.js"></script>
<script src="http://www.accept-portal.eu/Plugin/v2.0/js/jquery-ui-1.8.24.custom.min.js"></script>
<link href="http://www.accept-portal.eu/Plugin/v2.0/css/Accept.css" rel="stylesheet" type="text/css" />
<link href="http://www.accept-portal.eu/Plugin/v2.0/css/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://www.accept-portal.eu/Plugin/v2.0/extras/tiny_mce/tiny_mce.js"></script>
<script src="http://www.accept-portal.eu/Plugin/v2.0/js/accept-jquery-plugin-2.0.js?v=9"></script>
<script type="text/javascript">
    $(document).ready(function () {
    $("#myTextArea").Accept({
    configurationType: 'contextMenu',
    righClickEnable:true,
    AcceptServerPath: "http://www.accept-portal.eu/AcceptApi/Api/v1",
    ApiKey:"ENTER_KEY_HERE",
    Lang: "en",
    imagesPath: "../css/images",
    requestFormat: "HTML",
    styleSheetPath: '../css/'
    });
    });
</script>

Example 2 (TinyMCE Embedded)¶

Let’s take the same situation as Example 1 but this time you are using the Tiny MCE embedded editor.

JavaScript Code¶

The JavaScript code is very similar to the one in Example 1, the only value that changes is the value for the parameter configurationType - from “contextMenu” to “tinyMceEmbedded” and the addition of a extra parameter containing the location of your Tiny MCE .JS file. Here’s the code:

$(document).ready(function ()
{
    $("#myTextArea").Accept({
       configurationType: 'tinyMceEmbedded',
        AcceptServerPath: "http://www.accept-portal.eu/AcceptApi/Api/v1",
        ApiKey:"ENTER_KEY_HERE",
        Lang: "en",
        imagesPath: "../css/images",
        tinyMceUrl: "../extras/tiny_mce/tiny_mce.js",
        styleSheetPath: '../css/',
        requestFormat: "HTML"
    });
});

HTML Code¶

The HTML code is exactly the same as Example 1, once again just an identified text area is needed:

<textarea id="myTextArea" rows="10" cols="40" >
this is an test
<textarea>

Example 3 (A more difficult integration)¶

Sometimes it can be a bit more difficult to integrate the plug-in with an existing embedded text editor. One approach is to integrate the ACCEPT plug-in by injecting a right click event over the existing text editor. To do this a bit more work its needed. Notice that in both Example 1 and 2 we used a simple text area element as a place holder for our plug-in, but in this case there is a text editor already embedded within the text area.

What do we do? Well no big deal, lets follow a few steps.

STEP 1¶

<textarea class="lia-form-tiny-mce-editor-input" id="tinyMceEditor" name="tinyMceEditor"></textarea>
<iframe id="tinyMceEditor_ifr" src='javascript:""' frameborder="0" title="Rich Text Area. Press ALT F10 for toolbar. Press ALT 0 for help." style="width: 100%; height: 206px; ">
<html><head xmlns="http://www.w3.org/1999/xhtml"><meta http-equiv="X-UA-Compatible" content="IE=7">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="http://website1/html/js/lib/tinymce/3.4.1/themes/advanced/skins/default/content.css">
<link type="text/css" rel="stylesheet" href="http:// website1/skins/358241/5F4439F43AFCD2AFDF49DA5622800B40/example734965398.css">
</head>
<body id="tinymce" class="mceContentBody lia-message-editor" spellcheck="false" dir="ltr">
<p>eewrwerwer</p>
</body>
</html>
</iframe>

Looking at the code we can see by the name and identifier of the text area that the editor plug-in used is Tiny MCE (to be honest this doesn’t matter, it could just as easily be any other editor and the procedure would be the same), what really matters is for us to understand how we can integrate our ACCEPT plug-in into the existing code.

Looking carefully at the previous code snippet we can see that there is an IFRAME being used.

Note

Using a Web debug tool we can better understand where the text is being displayed:

pre-edit/plugin/../../_static/devToolScreenShot.png

Generally, all the rich web text editors behave the same way, they inject an IFRAME over the text source (in this case the text area identified in red as “tinyMceEditor”).

As the IFRAME is where a user will write, we need to inject our plug-in behaviour into the IFRAME instead of the text area as we did before.

STEP 2¶

Now we need to include the ACCEPT plug-in files in the page header:

<script src="http://www.accept-portal.eu/Plugin/v2.0/js/jquery-1.5.1.min.js"></script>
<script src="http://www.accept-portal.eu/Plugin/v2.0/js/jquery-ui-1.8.24.custom.min.js"></script>
<link href="http://www.accept-portal.eu/Plugin/v2.0/css/Accept.css" rel="stylesheet" type="text/css" />
<link href="http://www.accept-portal.eu/Plugin/v2.0/css/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://www.accept-portal.eu/Plugin/v2.0/extras/tiny_mce/tiny_mce.js"></script>
<script src="http://www.accept-portal.eu/Plugin/v2.0/js/accept-jquery-plugin-2.0.js?v=9"></script>

STEP 3¶

Next the plug-in configuration with a few tweaks:

<script type="text/javascript">
     $(document).ready(function () {
         ("#tinyMceEditor").Accept({
        configurationType: 'contextMenu',
        righClickEnable:true,
        AcceptServerPath: " http://www.accept-portal.eu/AcceptApi/Api/v1",
        ApiKey: "ENTER_KEY_HERE",
        Lang: "en",
        textEditorPlaceHolderId: "tinyMceEditor_ifr" ,
        imagesPath: http://www.accept-portal.eu /Plugin/css/images,
        tinyMceUrl: "../extras/tiny_mce/tiny_mce.js",
        styleSheetPath: '../css/'
     });
 });
</script>

Notice that in the last snippet we are still passing the text area ID as a DOM element for the plug-in:

$("#tinyMceEditor").Accept({ … })

but as the IFRAME is where the user text is kept and our plug-in doesn’t have a way to magically find it, we need to pass the information about the area where our context menu should be displayed, and we did that when we added the IFRAME ID as an extra parameter:

textEditorPlaceHolderId: "tinyMceEditor_ifr"

Now when refreshing our page we can see our right-click functionality being displayed.

pre-edit/plugin/../../_static/Example3working.png

Now everything should be working fine, but when clicking any of the checking options we get an “enter some text” message - this means that no text was passed to our plug-in.

Why is this happening?

The reason is related to the version and pre-configuration of the Tiny MCE plug-in.

For some reason the input text is not updating the text area element! Remember that we passed the text area ID to the ACCEPT plug-in expecting to get the text from it:

<textarea class="lia-form-tiny-mce-editor-input" id="tinyMceEditor" name="tinyMceEditor">NO TEXT HERE! :( </textarea>

So do we need to update the plug-in code according the text editor configuration? Fortunately no, the ACCEPT plug-in allows you to pass two extra parameters where you can write your own code to get and set the text content. We now need to add a custom text loader and text submitter.

STEP 4¶

In order to customize the way your text is loaded and submitted back we need to pass two extra parameters (these are actually interpreted as functions):

LoadInputText: function ()
{
    try
    {
        var inputText = tinymce.get('tinyMceEditor').getContent();
        return inputText;
    }
    catch (error) {
        return "";
    }
}

The parameter LoadInputText will pass the input text to be checked and in the case of the Tiny MCE text editor there is a built in method to get the text from the editor, so we can use that one:

var inputText = tinymce.get('tinyMceEditor').getContent();

Note that a try/catch block is needed because during the page load our plug-in will immediately run the “LoadInputText” method and we have no guarantees that “tinymce.get” method is already loaded.

Now we need a similar approach to send the text from our ACCEPT dialog back the editor:

SubmitInputText: function (text)
{
    try
    {
       tinymce.get('tinyMceEditor').setContent(text);
    }
    catch (error) {    }

}

The ACCEPT plug-in should now be working!!! Here is the full code snippet:

<script src="http://www.accept-portal.eu/Plugin/v2.0/js/jquery-1.5.1.min.js"></script>
<script src="http://www.accept-portal.eu/Plugin/v2.0/js/jquery-ui-1.8.24.custom.min.js"></script>
<link href="http://www.accept-portal.eu/Plugin/v2.0/css/Accept.css" rel="stylesheet" type="text/css" />
<link href="http://www.accept-portal.eu/Plugin/v2.0/css/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://www.accept-portal.eu/Plugin/v2.0/extras/tiny_mce/tiny_mce.js"></script>
<script src="http://www.accept-portal.eu/Plugin/v2.0/js/accept-jquery-plugin-2.0.js?v=9"></script>
  <script type="text/javascript">

  $(document).ready(function () {

  $("#tinyMceEditor").Accept({
                  configurationType: 'contextMenu',
                  righClickEnable:true,
                  AcceptServerPath: " http://www.accept-portal.eu/AcceptApi/Api/v1",
                  ApiKey: "ENTER_KEY_HERE",
                  Lang: "en",
                  textEditorPlaceHolderId: "tinyMceEditor_ifr" ,
                  imagesPath: http://www.accept-portal.eu /Plugin/css/images,
                  tinyMceUrl: "../extras/tiny_mce/tiny_mce.js",
                  styleSheetPath: '../css/',
  LoadInputText: function () {
  try {
          var inputText = tinymce.get('tinyMceEditor').getContent();
          return inputText;
      }
      catch (error)
      {
          return "";
      }
  },
  SubmitInputText: function (text)
  {
     try {
              tinymce.get('tinyMceEditor').setContent(text);
         }catch (error){   }   }
      });
  });

</script>

Example 4 (External Call Integration)¶

An external call integration allows us to use an existing HTML element in the Web page (or even inject a new HTML element) to trigger the plug-in dialog. This is best approach for situations where there is an existing embedded text editor in place and any minor change on the Web page style is undesired.

Note

For this use case we are using the simple editor example from the Yahoo! UI 2 download package.

Let’s suppose this HTML page is actually the environment where we want to integrate the ACCEPT Pre-Edit plug-in.

STEP 1¶

The first action to perform is always to identify what is the text source we want to target. In this example we want the same element used by the Yahoo editor.

Note

Using a Web debug tool we can better understand the Web page structure and find whatever we are looking for:

pre-edit/plugin/../../_static/examples_yahoo_2.PNG

Now we know that the element with the editor ID is the text area where the Yahoo editor is being used and as such the one where we want to implement the ACCEPT Pre-Edit plug-in. The plug-in configuration starts with:

$('#editor').Accept({
configurationType: 'externalCall',
...

Now we need to take a closer look at the Web page and try to understand from where (which HTML button, HTML image, etc) we could trigger the plug-in dialog:

pre-edit/plugin/../../_static/examples_yahoo_1.PNG

Looking at the image we can easily conclude that ideally the ACCEPT Pre-Edit dialog could be triggered from a button located in the editor toolbar. Since there are no available buttons we need to set up the ACCEPT Pre-Edit plug-in to magically create a new HTML element for us.

STEP 2¶

To add a new HTML element to the toolbar, we need first to identify what is the HTML element that contains all toolbar elements.

pre-edit/plugin/../../_static/examples_yahoo_3.PNG

As shown above, the div element selected is actually the container for all elements in the editor toolbar. Therefore this div element works perfectly as a placeholder for the new element. Now that we know what the element is, we also need to find a way to identify it, but the div does not have any id attribute. Is this a problem? No it is not because the plug-in can use any valid jQuery selector to find the placeholder. In this case, we know that the CSS class attribute is unique for this element. We can use it to “teach” the ACCEPT Pre-Edit plug-in how to find it:

$('#editor').Accept({
configurationType: 'externalCall',
injectSelector: '.yui-toolbar-subcont',
...

STEP 3¶

At this stage we know the text area where to use the plug-in and the toolbar element where we want to add new HTML content, so now we need to decide what HTML content we want to add. For this example, we will inject a div element containing the ACCEPT ABC icon.

<div style="float: right;margin-top: 20px;">
<img id="triggerInjectedACCEPTbutton" style="cursor:pointer;height:24px;width:24px;float:right;" src="http://www.accept-portal.eu/Plugin/v2.0/css/images/actions-tools-check-spelling-icon.png">
</div>

This needs to be added under the injectContent setting as part of the plug-in configuration:

$('#editor').Accept({
configurationType:'externalCall',
injectSelector:'.yui-toolbar-subcont',
injectContent:'<div style="float: right;margin-top: 20px;"><img id="triggerInjectedACCEPTbutton" style="cursor:pointer;height:24px;width:24px;float:right;" src="http://www.accept-portal.eu/Plugin/v2.0/css/images/actions-tools-check-spelling-icon.png"></div>',
...

STEP 4¶

In this step, we need to identify the HTML element from where the click event that displays the ACCEPT dialog is triggered. In STEP 3, we injected code in the page with the aim of having an extra element to act as the element we are now looking for. Looking carefully at STEP 3 we can see that the img element is an ID property we made up for this purpose, so this is the value we want to use for the triggerCheckSelector setting, as shown below:

$('#editor').Accept({
configurationType:'externalCall',
injectSelector:'.yui-toolbar-subcont',
injectContent:'<div style="float: right;margin-top: 20px;"><img id="triggerInjectedACCEPTbutton" style="cursor:pointer;height:24px;width:24px;float:right;" src="http://www.accept-portal.eu/Plugin/v2.0/css/images/actions-tools-check-spelling-icon.png"></div>',
triggerCheckSelector: '#triggerInjectedACCEPTbutton',
...

STEP 5¶

The main steps are now completed, but in this case they are not sufficient. If we went ahead and tried to run this example with the current configuration, the plug-in would not work because the text content to check is not loaded into the dialog or properly submitted back to the source. This is due to the same reason explained in STEP 4 of Example 3. Basically the Yahoo! UI editor does not keep the text content in the text area where it was installed but instead within an iframe built during the initialization. This is actually the most common behavior nowadays in WYSIWYG editors. Let’s take a closer look:

pre-edit/plugin/../../_static/examples_yahoo_4.PNG

What do we need to do in order to correct this issue? As part of the plug-in configuration, we need to provide custom methods to get the content into the dialog box and set it back to the source, in this case the iframe with an editor_editor ID. Here is the code:

$('#editor').Accept({
configurationType:'externalCall',
injectSelector:'.yui-toolbar-subcont',
injectContent:'<div style="float: right;margin-top: 20px;"><img id="triggerInjectedACCEPTbutton" style="cursor:pointer;height:24px;width:24px;float:right;" src="http://www.accept-portal.eu/Plugin/v2.0/css/images/actions-tools-check-spelling-icon.png"></div>',
LoadInputText:function()
{
    return $(document).contents().find('#editor_editor').contents().find('body').html();
},
SubmitInputText:function(text)
{
            $(document).contents().find('#editor_editor').contents().find('body').html(myContent);
}
...

The ACCEPT Pre-Edit plug-in should now be working! Here is how it should look and below the full code snippet:

pre-edit/plugin/../../_static/examples_yahoo_5.PNG

<script src="http://www.accept-portal.eu/Plugin/v2.0/js/jquery-1.5.1.min.js"></script>
<script src="http://www.accept-portal.eu/Plugin/v2.0/js/jquery-ui-1.8.24.custom.min.js"></script>
<link href="http://www.accept-portal.eu/Plugin/v2.0/css/Accept.css" rel="stylesheet" type="text/css" />
<link href="http://www.accept-portal.eu/Plugin/v2.0/css/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://www.accept-portal.eu/Plugin/v2.0/extras/tiny_mce/tiny_mce.js"></script>
<script src="http://www.accept-portal.eu/Plugin/v2.0/js/accept-jquery-plugin-2.0.js?v=9"></script>
<script type="text/javascript">
$(document).ready(function(){
     $('#editor').Accept({
            configurationType:'externalCall',
            injectSelector:'.yui-toolbar-subcont',
            injectContent:'<div style="float: right;margin-top: 20px;"><img id="triggerInjectedACCEPTbutton" style="cursor:pointer!important;height:24px;width:24px;float:right;" src="http://www.accept-portal.eu/Plugin/v2.0/css/images/actions-tools-check-spelling-icon.png"></div>',
            triggerCheckSelector: '#triggerInjectedACCEPTbutton',
            LoadInputText:function()
            {
                return $(document).contents().find('#editor_editor').contents().find('body').html();
            },
            SubmitInputText:function(text)
            {
                $(document).contents().find('#editor_editor').contents().find('body').html(myContent);
            },
            AcceptServerPath:"http://www.accept-portal.eu/AcceptApiStg/Api/v1",
            ApiKey:"APIKEY",
            Lang:"en",
            Rule:"Preediting_Forum",
            imagesPath:"http://www.accept-portal.eu/Plugin/v2.0/css/images",
            requestFormat:"HTML",
            languageUi:'en',
            showFixAll:true,
            isModal:false,
            editorWidth:'480px',
            styleSheetPath:'http://www.accept-portal.eu/Plugin/v2.0/css',
            showManualCheck:true
        });
});

Navigation

Pre-Edit¶

Plug-in¶

Overview¶

Target Audience¶

Dependencies¶

Supported Browsers¶

Downloading¶

Installation¶

Context Menu¶

TinyMCE Integration¶

External Call¶

Configuration¶

Theme¶

Examples¶

Example 1 (Right Click Context Menu)¶

JavaScript Code¶

HTML Code¶

Example 2 (TinyMCE Embedded)¶

JavaScript Code¶

HTML Code¶

Example 3 (A more difficult integration)¶

STEP 1¶

STEP 2¶

STEP 3¶

STEP 4¶

Example 4 (External Call Integration)¶

STEP 1¶

STEP 2¶

STEP 3¶

STEP 4¶

STEP 5¶

Table Of Contents

Navigation