dhtmlx Editor Sample

by ecropolis

HTML

<script src="https://googledrive.com/host/0B4bedT44-LokaV9tODJoX29BVFk"></script>
<link rel="stylesheet" href="https://googledrive.com/host/0B4bedT44-LokVFBFUXlaVEthaFE?t=.css">
<div id='myparent'>
<div id="editorObj"></div>
<div id="logsHere">Logs here:</div>
</div>

CSS

div#editorObj {
		 	 width: 100%;
		 	 height: 300px;
		 	 border: 1px solid #dfdfdf;
		 }
		 div#logsHere {
			position: relative;
			width: auto;
			height: 180px;
			padding: 2px;
			border: 1px solid #dfdfdf;
			font-family: Roboto, Arial, Helvetica;
			font-size: 14px;
			color: #404040;
			margin-top: 10px;
			overflow: auto;
		}

JavaScript

var myEditor;
function doOnLoad() {
  myEditor = new dhtmlXEditor({
    parent: "editorObj",
    content: "<b>Lorem ipsum </b>dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud <u>exercitation ullamco laboris nisi ut aliquip ex ea commodo </u>consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <i>Excepteur sint occaecat cupidatat non proident</i>, sunt in culpa qui officia deserunt mollit anim id est laborum."
  });
  myEditor.attachEvent("onAccess", function(name, ev){
    writeLog("onAccess event fired, name: "+name);
    //console.log(ev);
    console.log(this.cell.cell);
    console.log($(this.cell.cell).closest('div#myparent').attr('id'))
  });
}
function writeLog(text) {
  document.getElementById("logsHere").innerHTML += "<br>"+text;
  document.getElementById("logsHere").scrollTop = document.getElementById("logsHere").scrollHeight;
}
doOnLoad();