Page History
Excerpt | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
1. Initialization OptionsThere are several several options letting you initialize WProofreader functionality in your web app, namely using:
The WEBSPELLCHECKER_CONFIG (further CONFIG) can be added in a script or loaded from the file as mentioned in Get Started with WProofreader Server (autoSearch) guide for Server version and Get Started with WProofreader Cloud (autoSearch). After you have initialized WProofreader, you can customize the above-mentioned settings using WebSpellChecker WProofreader API.
Below you can find the samples showing how different WProofreader initialization approaches work depending on the integration and expected launch behavior.
1.1: InitializingInitializing using autoSearchinfoThe autoSearch feature enables detecting new editable fields on the page and proofreading the text they contain automatically on hover selectionin focus. If you choose this option, WProofreader is enabled in the selected WYSIWYG editor or HTML editable control, and no additional actions are required.
Initialization using inline attributes is suitable and useful if you want to have a single script with basic optionsoption definitions. When you initialize WProofreader using this method, you need to declare the container where WProofreader should be started in init () method. The options are to be obtained from the settings. Example 1.1. Initializing using CONFIGThis is an example of the WProofreader initialization with the autoSearch functionality turned on. All the configuration options are defined using CONFIG.
Example A: Initializing WProofreader with autoSearch and configuration options in CONFIG
ExampleB: Initializing WProofreader with autoSearch and defining configuration options1.2. Initializing using inline data attributesThis is an example of the WProofreader initialization with the autoSearch functionality turned on. All the configuration options are defined using inline data attributes. In this case, the naming of the options are formed as follows: data-wsc-option_name=”value”. For details, refer to the list of available options in WProofreader API documentation.
2. Initializing using init() methodThe
Initializing WProofreader using init() method in a defined container (div element) on the page and specifying configuration options directly in the init() function:
1.2: Initialization using init() methodWhen you initialize WProofreader using this method, you declare the container where WProofreader should be started. The options are to be obtained from the settings. The init() method is a reasonable choice when you clearly know in which control you want to initialize in WProofreader. More than that you are aware of your page controls, and additional controls do not appear dynamically.
Example 2.1:. InitializingWProofreaderin HTML element using init() methodInitializing WProofreader This is an example of WProofreader initialization in HTML contenteditable element (div) using init() method in a defined container (div element) on the page and specifying . The configuration options are specified directly in the init() function:.
Example 2:.2. InitializatingWProofreaderin multiple HTML elements using init() methodInitializing WProofreader This is an example of WProofreader initialization in HTML contenteditable element (div) and HTML editable element (textarea) using init() method in a defined container(s) on the page and specifying configuration options in WEBSPELLCHECKER_CONFIG is shown in the sample below. You can see two containers, namely, div and textarea which use a single configuration script:. The configuration options for both controls are defined separately in a single CONFIG.
Example3: Initializing WProofreader in HTML elements using data-wsc-autocreateThis is an example of WProofreader initialization in HTML editable elements and elements with and contenteditable attribute set to true using data-wsc-autocreate="true". The configuration options are to be defined separately in WEBSPELLCHECKER_CONFIG. This approach is similar to initializing WProofreader using init() method.
2.3. Initializing in WYSIWYG editors using init() methodThere is an option to explicitly initialize WProofreader in such Rich rich text editors as Froala Editor 3, CKEditor 4, and CKEditor 5 using init() method. However, it is strongly recommended to use this method with autoSearch and autoDestroy options in WEBSPELLCHECKER_ CONFIG. Turn Turned on/enabled autoDestroy parameter to monitor will bemonitoring the state of the WEBSPELLCHECKER instance and handle handling its destroy after removal (deleted or hidden) of an editable container from the page. At the same time enabled autoSearch parameter will restore an instance when it is needed. It can be useful for example, when switching to the code editing mode in the editor, WEBSPELLCHECKER instance must be deleted and then restored after returning back to the editor. Thus, it is the autoSearch that restores it. Initializing WProofreader using init() in Froala Editor
3. Initializing using data-wsc-autocreateThis approach is similar to initializing WProofreader using init() method. Example 3.1. Initializing in HTML elements using data-wsc-autocreateThis is an example of WProofreader initialization in HTML contenteditable element (div) and HTML editable element (textarea) using data-wsc-autocreate="true". The configuration options are to be defined separately in CONFIG.
Initializing WProofreader using init() in CKEditor 5
|