When using spell checking in our online editor, dictionaries that are located in the Dictionaries folder of the synchronization service are loaded automatically. That includes all OpenOffice dictionaries and user dictionaries.
This article explains how to enable spell checking for the HTML5-based online editor:
Web.TextControl and Spell Checking
A very common task is to load user specific user dictionaries for each individual user. Therefore, the JavaScript API provides methods to load and save user dictionaries locally. In order to load dictionaries from the server, you will need to retrieve the dictionary from the server and load it into the editor.
In this sample, we created a Web API to handle user dictionaries:
public class DictionaryController : ApiController | |
{ | |
// returns all user dictionaries in the specific folder | |
[System.Web.Http.HttpGet] | |
public HttpResponseMessage UserDictionaryFilenames() | |
{ | |
var sFilenames = System.IO.Directory | |
.EnumerateFiles(System.Web.Hosting.HostingEnvironment.MapPath("~/Dictionaries/"), | |
"*.txd", System.IO.SearchOption.TopDirectoryOnly) | |
.Select(System.IO.Path.GetFileName); | |
return new HttpResponseMessage() | |
{ | |
StatusCode = HttpStatusCode.OK, | |
Content = new ObjectContent<string[]>(sFilenames.ToArray(), | |
new JsonMediaTypeFormatter()) | |
}; | |
} | |
// loads a specific dictionary by filename | |
[System.Web.Http.HttpGet] | |
public HttpResponseMessage LoadUserDictionary(string filename) | |
{ | |
UserDictionary userDictionary = new UserDictionary() { | |
language = "en-US", | |
name = filename | |
}; | |
// read all lines from the dictionary | |
string[] sDictionaryLines = System.IO.File.ReadAllLines( | |
System.Web.Hosting.HostingEnvironment.MapPath("~/Dictionaries/" + filename)); | |
// skip the first entry (encoding) | |
userDictionary.words = sDictionaryLines.Skip(1).ToArray(); | |
// return the object | |
return new HttpResponseMessage() | |
{ | |
StatusCode = HttpStatusCode.OK, | |
Content = new ObjectContent<UserDictionary>(userDictionary, | |
new JsonMediaTypeFormatter()) | |
}; | |
} | |
// saves a specific dictionary | |
[System.Web.Http.HttpPost] | |
public HttpResponseMessage SaveUserDictionary([FromBody] UserDictionary dictionary) | |
{ | |
// get all words and save the dictionary | |
List<string> dictionaryLines = new List<string>(); | |
dictionaryLines.Add("SET iso-8859-1"); | |
dictionaryLines.AddRange(dictionary.words); | |
System.IO.File.WriteAllLines(System.Web.Hosting.HostingEnvironment.MapPath( | |
"~/Dictionaries/" + dictionary.name), dictionaryLines); | |
return new HttpResponseMessage() | |
{ | |
StatusCode = HttpStatusCode.OK, | |
Content = new ObjectContent<string>("UserDictionary " + | |
dictionary.name + " successfully saved.", new JsonMediaTypeFormatter()) | |
}; | |
} | |
} |
The Web API contains 3 endpoints:
- UserDictionaryFilenames
This endpoint returns all user dictionary filenames in the created folder Dictionaries. - LoadUserDictionary
This endpoint loads a specific dictionary by filename. - SaveUserDictionary
This endpoint saves a specific dictionary.
On loading the page, all available dictionaries are listed in a drop-down box:
// get available dictionary names and add them to select element | |
function getUserDictionaryFilenames() { | |
var serviceURL = "/api/Dictionary/UserDictionaryFilenames/"; | |
$.ajax({ | |
type: "GET", | |
url: serviceURL, | |
contentType: 'application/json', | |
success: successFunc, | |
error: errorFunc | |
}); | |
function successFunc(data, status) { | |
data.forEach(function (item) { | |
// append the options | |
$("#availableDictionaries").append("<option>" + item + "</option>"); | |
}); | |
} | |
function errorFunc() { | |
console.log("error"); | |
} | |
} |
If a dictionary is selected and the button Load UserDictionary is clicked, the selected dictionary is loaded asynchronously using JavaScript:
// load a specific user dictionary | |
function loadUserDictionary() { | |
// call Web API endpoint to retrieve the dictionary | |
var serviceURL = "/api/Dictionary/LoadUserDictionary?filename=" | |
+ $("#availableDictionaries").val(); | |
$.ajax({ | |
type: "GET", | |
url: serviceURL, | |
contentType: 'application/json', | |
success: successFunc, | |
error: errorFunc | |
}); | |
function successFunc(data, status) { | |
// enable spell checking | |
TXTextControl.isSpellCheckingEnabled = true; | |
// load user dictionary | |
TXTextControl.Proofing.loadUserDictionary(data.name, data.words, data.language); | |
alert("Dictionary " + data.name + " successfully loaded."); | |
} | |
function errorFunc() { | |
console.log("error"); | |
} | |
} |
If the button Save UserDictionaries is clicked, all dictionaries are saved back on the server:
function saveUserDictionary() { | |
// get information about all user dictionaries | |
TXTextControl.Proofing.getUserDictionaryInfo(function (e) { | |
// loop through all dictionaries | |
e.forEach(function (item) { | |
// save the dictionary | |
TXTextControl.Proofing.saveUserDictionary(item.name, function (name, words) { | |
// create a new dictionary JSON object | |
var userDict = { language : item.language, name : name, words : words }; | |
// call the Web API and pass the dictionary object | |
var serviceURL = "/api/Dictionary/SaveUserDictionary/"; | |
$.ajax({ | |
type: "POST", | |
url: serviceURL, | |
contentType: 'application/json', | |
dataType: "json", | |
data: JSON.stringify(userDict), | |
success: successFunc, | |
error: errorFunc | |
}); | |
function successFunc(data, status) { | |
alert(data); | |
} | |
function errorFunc() { | |
console.log("error"); | |
} | |
}); | |
}); | |
}) | |
} |
The following animation shows this sample in action:
This this on your own and download the sample from our GitHub repository.