Apart from the content created in CrossEditor, a hidden object which will be transmitted as a form is needed.
Usually <input type="hidden" ...> and <textarea id=""...> are used for the hidden object, but it is recommended that a textarea be used to transmit content created by CrossEditor without any errors.
Also, in environments where JavaScript is disabled and CrossEditor cannot used to create text, it is recommended that a textarea be used to create text in order to increase web accessibility.
<textarea id="editorValue" name="editorValue" style="display: none"></textarea>
When transmitting a form, you may need to determine if there is any content. To do this, you can use the IsDirty or GetTextValue methods provided by CrossEditor.
The IsDirty method returns "true" if a document has been modified and "false" if it has not.
You must use them after setting up the "SetDirty" Method while the editor is loading.
The SetFocusEditor method is used to set the focus on CrossEditor.
var CrossEditor = new NamoSE('namoeditor1');
CrossEditor.EditorStart();
CrossEditor.SetDirty(); //Initialize current document editing status
if(!CrossEditor.IsDirty()){ // Check if content has been entered in the editor
alert("Please enter some content in the editor!!");
CrossEditor.SetFocusEditor(); // Move focus to CrossEditor
return false;
}
Because the GetTextValue method returns the text of the document, it can be used for the same purpose as the IsDirty method.
if(CrossEditor.GetTextValue () == ""){ // Check if content has been entered in the editor
alert("Please enter some content in the editor!!");
CrossEditor.SetFocusEditor(); // Move focus to CrossEditor
return false;
}
To get the content created in CrossEditor, use the GetValue or GetBodyValue API.
The content can be in HTML or XHTML form.
document.getElementById("contents").value = CrossEditor.GetValue();
document.getElementById("contents").value = CrossEditor.GetValue("XHTML");
document.getElementById("contents").value = CrossEditor.GetBodyValue();
document.getElementById("contents").value = CrossEditor.GetBodyValue("XHTML");
To insert content into CrossEditor, you can use the SetValue or SetBodyValue API methods.
The method which inserts the content into CrossEditor must be the same as the method which retreived it from CrossEditor.
If you used GetValue, use SetValue. If you used GetBodyValue, use SetBodyValue.
If you call the method as soon as the editor is initialized, it may not work correctly. Because of this, is it recommended that you use the OnInitCompleted event to call the method.
var contentValue = document.getElementById("contents").value; // Hidden value reference
var CrossEditor = new NamoSE('namoeditor1');
CrossEditor.EditorStart();
function OnInitCompleted(e){
e.editorTarget.SetValue(contentValue); // Insert content into editor
}
var contentValue = document.getElementById("contents").value; // Hidden value references
var CrossEditor = new NamoSE('namoeditor1');
CrossEditor.EditorStart();
function OnInitCompleted(e){
e.editorTarget.SetBodyValue(contentValue); // Insert only content from the body into the editor
}
As an HTML editor, CrossEditor cannot determine if the content created by the user is malicious or not.
However, through its API, it can restrict the use of scripts, iframes, and attributes like onclick and onload.
CrossEditor.params.AllowContentIframe = false;
CrossEditor.params.AllowContentScript = false;
CrossEditor.params.TagBlockList = ["form", "option"]; //A list of restricted tags
CrossEditor.params.AttributeBlockList = ["onclick", "onload", "onchange"]; //A list of restricted attributes
CrossEditor.EditorStart();
If you use these API properties, CrossEditor will check for restricted items when switching tabs in the editor and block the user from proceeding if needed. In the HTML tab, it will check values retrieved through GetValue and GetBodyValue and block them if needed.
You may want to hide CrossEditor when it is first run for business logic or other purposes.
If you do so, the height of CrossEditor will not be calculated and CrossEditor will not appear correctly if it is shown on the screen.
If CrossEditor does not appear on the screen, the focus of CrossEditor does not need to be set, and SetFocus can be used to remove the focus setting.
In CrossEditor, the focus can be set with the params' SetFocus.
SetFocus:
true -> CrossEditor focus is set
false -> CrossEditor focus is not set
var CrossEditor = new NamoSE('namoeditor1');
CrossEditor.params.SetFocus = false; // Set editor focus
CrossEditor.EditorStart();
To not display CrossEditor when it is first run, use DisplayNoneTarget provided by the params to specify the element to which you will apply "display None" (e.g. a DIV layer which wraps around CrossEditor).
<div id="crossEditor" style="display: none">
<script language="javascript">
var CrossEditor = new NamoSE('namoeditor1');
CrossEditor.params.SetFocus = false; // Set editor focus
CrossEditor.params.DisplayNoneTarget = document.getElementById("crossEditor");
// Layer which wraps CrossEditor
CrossEditor.editorStart();
</script>
</div>
It is a simple example of dynamically creating and removing CrossEditor.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Namo CrossEditor</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="./js/namo_scripteditor.js"></script>
<script type="text/javascript" language="javascript">
var CrossEditor = null;
function loadEvn(){
CrossEditor = new NamoSE('namoeditor');
}
function OnInitCompleted(e){
e.editorTarget.SetBodyValue("<p>text</p>");
}
function startEditor(){
CrossEditor.params.Width = "100%";
CrossEditor.params.ParentEditor = document.getElementById("editor1");
CrossEditor.EditorStart();
}
function endEditor(){
CrossEditor.destroyEditor();
document.getElementById("editor1").innerHTML = "";
}
</script>
</head>
<body onload="loadEvn()">
<div style="width:800px; height:500px;" id="editor1"></div>
<input type="button" value="startEditor" onclick="startEditor()" />
<input type="button" value="endEditor" onclick="endEditor()" />
</body>
</html>