Your Ad Here

advanced code snippet search

Posted By

jatkins on 12/08/10


Tagged


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

brownrl


WYSIWYG Editor

 / Published in: JavaScript
 
Expand | Embed | Plain Text 
  1. /*
  2.  * Created October 19, 2010 by Josh Atkins
  3.  * Updated December 7, 2010
  4.  * Released into the public domain
  5.  */
  6.  
  7. function get(elmnt) {
  8. 	return document.getElementById(elmnt);
  9. }
  10.  
  11. function find_index(array, string) {
  12. 	i = 0;
  13. 	for(i=0;i<array.length;i++) {
  14. 		if(array[i]==string) break;
  15. 	}
  16. 	return array[i] == string ? i : -1;
  17. }
  18.  
  19. var commands = ['bold', 'italic', 'underline', 'strikethrough', 'justifyleft', 'justifycenter', 'justifyright', 'insertunorderedlist', 'insertorderedlist', 'indent', 'outdent', 'subscript', 'superscript', 'insertlink', 'unlink', 'selectimage', 'inserttable', 'insertrowabove', 'insertrowbelow', 'insertcolumnbefore', 'insertcolumnafter'], titles = ['Bold', 'Italic', 'Underline', 'Strikethrough', 'Left Align', 'Center Align', 'Right Align', 'Insert Bulleted List', 'Insert Numbered List', 'Indent Text', 'Outdent Text', 'Subscript', 'Superscript', 'Insert Link', 'Remove Link', 'Insert Image', 'Insert Table', 'Insert Table Row Above', 'Insert Table Row Below', 'Insert Table Column Before', 'Insert Table Column After'], wysiwygCount = 0, wysiwygs = Array(), currentWYSIWYG = null, i, n, wysiwygContainer, wysiwyg, toolbar, button, buttonLink, buttonImage, cmd_value, cmd_true_or_false, click_code, tableDialog, tableRowsLabel, tableRowsInput, tableColumnsLabel, tableColumnsInput, tableInsertButton, tableHeading, newTable, newTableBody, newTableRow, newTableColumn, tableCount = 0, currentTable, cursorPosition, table, textAreaID, newTitles, commandsLength;
  20.  
  21. function toggleVisibility(elmnt) {
  22. 	get(elmnt).className = get(elmnt).className == 'hidden' ? '' : 'hidden';
  23. 	return get(elmnt).className == '';
  24. }
  25.  
  26. function positionBelow(elmntAbove, elmntBelow) {
  27. 	get(elmntBelow).style.top = get(elmntAbove).offsetTop + get(elmntAbove).offsetHeight + 'px';
  28. 	get(elmntBelow).style.left = get(elmntAbove).offsetLeft + 'px';
  29. 	if(get(elmntBelow).style.position!='absolute')
  30. 		get(elmntBelow).style.position = 'absolute';
  31. }
  32.  
  33. function replaceTextAreaWithWYSIWYG(textArea, onlyCommands, wysiwygWidth, wysiwygHeight) {
  34. 	wysiwygs[wysiwygCount] = textArea; // security issues?
  35. 	wysiwygCount++;
  36. 	wysiwygContainer = document.createElement('div');
  37. 	wysiwygContainer.id = 'wysiwygContainer' + wysiwygCount;
  38. 	wysiwygContainer.className = 'wysiwyg';
  39. 	wysiwyg = document.createElement('iframe');
  40. 	wysiwyg.id = 'WYSIWYG' + wysiwygCount;
  41. 	wysiwyg.className = 'wysiwyg';
  42. 	wysiwyg.frameBorder = '0';
  43. 	tableDialog = document.createElement('fieldset');
  44. 	tableDialog.id = 'fieldsetInsertTable' + wysiwygCount;
  45. 	tableDialog.className = 'hidden';
  46. 	tableHeading = document.createElement('h2');
  47. 	tableHeading.innerHTML = 'Insert Table';
  48. 	tableRowsLabel = document.createElement('label');
  49. 	tableRowsLabel.htmlFor = 'txtRowsInput' + wysiwygCount;
  50. 	tableRowsLabel.innerHTML = 'Number of rows:';
  51. 	tableRowsInput = document.createElement('input');
  52. 	tableRowsInput.type = 'text';
  53. 	tableRowsInput.id = 'txtRowsInput' + wysiwygCount;
  54. 	tableColumnsLabel = document.createElement('label');
  55. 	tableColumnsLabel.htmlFor = 'txtColumnsInput' + wysiwygCount;
  56. 	tableColumnsLabel.innerHTML = 'Number of columns:';
  57. 	tableColumnsInput = document.createElement('input');
  58. 	tableColumnsInput.type = 'text';
  59. 	tableColumnsInput.id = 'txtColumnsInput' + wysiwygCount;
  60. 	tableInsertButton = document.createElement('button');
  61. 	tableInsertButton.innerHTML = 'Insert';
  62. 	tableInsertButton.setAttribute('onclick', 'return insertTable();');
  63. 	insertLinkDialog = document.createElement('fieldset');
  64. 	insertLinkDialog.id = 'fieldsetInsertLink' + wysiwygCount;
  65. 	insertLinkDialog.className = 'hidden';
  66. 	insertLinkLabel = document.createElement('label');
  67. 	insertLinkLabel.id = 'lblLinkLabel' + wysiwygCount;
  68. 	insertLinkLabel.htmlFor = 'txtLinkURL' + wysiwygCount;
  69. 	insertLinkLabel.innerHTML = 'URL:';
  70. 	insertLinkInput = document.createElement('input');
  71. 	insertLinkInput.type = 'text';
  72. 	insertLinkInput.id = 'txtLinkURL' + wysiwygCount;
  73. 	insertLinkButton = document.createElement('button');
  74. 	insertLinkButton.innerHTML = 'Insert';
  75. 	insertLinkButton.setAttribute('onclick', 'wysiwygCommand(get(\'txtLinkURL'+wysiwygCount+'\').value, false, \'createlink\'); get(\'txtLinkURL'+wysiwygCount+'\').value = \'\'; get(\'btn'+wysiwygCount+'cmdinsertlink\').className = toggleVisibility(\'fieldsetInsertLink'+wysiwygCount+'\') ? \'pressed\' : \'\'; return false;');
  76. 	toolbar = document.createElement('ul');
  77. 	toolbar.id = 'ulWYSIWYGToolbar' + wysiwygCount;
  78. 	toolbar.className = 'wysiwyg';
  79. 	if(onlyCommands) {
  80. 		var newCommands = new Array(), commandIndex;
  81. 		newTitles = new Array();
  82. 		for(onlyCommand in onlyCommands) {
  83. 			commandIndex = find_index(commands, onlyCommands[onlyCommand]);
  84. 			newCommands.push(commands[commandIndex]);
  85. 			newTitles.push(titles[commandIndex]);
  86. 		}
  87. 	}
  88. 	commandsLength = newCommands ? newCommands.length : commands.length;
  89. 	for(i=0;i<commandsLength;i++) {
  90. 		button = document.createElement('li');
  91. 		buttonLink = document.createElement('a');
  92. 		buttonLink.href = '#';
  93. 		buttonLink.setAttribute('onclick', 'return false;');
  94. 		buttonImage = document.createElement('img');
  95. 		buttonImage.id = 'btn' + wysiwygCount + 'cmd' + (newCommands ? newCommands[i] : commands[i]);
  96. 		buttonImage.src = '/assets/images/wysiwyg/' + (newCommands? newCommands[i] : commands[i]) + '.gif';
  97. 		buttonImage.alt = newTitles ? newTitles[i] : titles[i];
  98. 		buttonImage.title = newTitles ? newTitles[i] : titles[i];
  99. 		switch(commands[i]) {
  100. 			case 'insertlink':
  101. 				click_function = 'positionBelow(\'btn'+wysiwygCount+'cmdinsertlink\', \'fieldsetInsertLink'+wysiwygCount+'\'); this.className = toggleVisibility(\'fieldsetInsertLink'+wysiwygCount+'\') ? \'pressed\' : \'\';';
  102. 				break;
  103. 			case 'selectimage':
  104. 				click_function = 'positionBelow(\'btn'+wysiwygCount+'cmdselectimage\', \'divImages\'); this.className = toggleVisibility(\'divImages\') ? \'pressed\' : \'\'';
  105. 				break;
  106. 			case 'inserttable':
  107. 				click_function = 'positionBelow(\'btn'+wysiwygCount+'cmdinserttable\', \'fieldsetInsertTable'+wysiwygCount+'\'); this.className = toggleVisibility(\'fieldsetInsertTable'+wysiwygCount+'\') ? \'pressed\' : \'\';';
  108. 				break;
  109. 			case 'insertrowabove':
  110. 				click_function = 'insertRow(true);';
  111. 				break;
  112. 			case 'insertcolumnbefore':
  113. 				click_function = 'insertColumn(true);';
  114. 				break;
  115. 			case 'insertrowbelow':
  116. 				click_function = 'insertRow(false);';
  117. 				break;
  118. 			case 'insertcolumnafter':
  119. 				click_function = 'insertColumn(false);';
  120. 				break;
  121. 			default:
  122. 				click_function = 'textAreaID = \''+textArea+'\'; currentWYSIWYG = this.parentNode.parentNode.parentNode.parentNode.id.substring(16); wysiwygCommand(this.id.substring(3));';
  123. 		}
  124. 		buttonImage.setAttribute('onclick', click_function);
  125. 		buttonImage.setAttribute('onmousedown', renewPageLock);
  126. 		buttonLink.appendChild(buttonImage)
  127. 		button.appendChild(buttonLink);
  128. 		toolbar.appendChild(button);
  129. 	}
  130. 	wysiwygContainer.appendChild(toolbar);
  131. 	wysiwygContainer.appendChild(insertLinkDialog);
  132. 	wysiwygContainer.appendChild(tableDialog);
  133. 	wysiwygContainer.appendChild(wysiwyg);
  134. 	brClear = document.createElement('br');
  135. 	brClear.className = 'clear';
  136. 	wysiwygContainer.appendChild(brClear);
  137. 	get(textArea).parentNode.insertBefore(wysiwygContainer, get(textArea));
  138. 	insertLinkDialog.appendChild(insertLinkLabel);
  139. 	insertLinkDialog.appendChild(insertLinkInput);
  140. 	insertLinkDialog.appendChild(insertLinkButton);
  141. 	tableDialog.appendChild(tableHeading);
  142. 	tableDialog.appendChild(tableRowsLabel);
  143. 	tableDialog.appendChild(tableRowsInput);
  144. 	tableDialog.appendChild(document.createElement('br'));
  145. 	tableDialog.appendChild(tableColumnsLabel);
  146. 	tableDialog.appendChild(tableColumnsInput);
  147. 	tableDialog.appendChild(document.createElement('br'));
  148. 	tableDialog.appendChild(tableInsertButton);
  149. 	textAreaID = textArea;
  150. 	initializeWYSIWYG(wysiwygCount, textAreaID, wysiwygWidth, wysiwygHeight);
  151. }
  152.  
  153. function initializeWYSIWYG(wysiwygID, textArea, wysiwygWidth, wysiwygHeight) {
  154. 	get('WYSIWYG'+wysiwygID).parentNode.style.width = wysiwygWidth || get(textAreaID).offsetWidth + 'px';
  155. 	get('WYSIWYG'+wysiwygID).parentNode.style.height = wysiwygHeight || get(textAreaID).offsetHeight + 'px';
  156. 	get('WYSIWYG'+wysiwygID).contentDocument.write('<br />'+textArea);
  157. 	get('WYSIWYG'+wysiwygID).contentDocument.body.innerHTML = get(textArea).value;
  158. 	get('WYSIWYG'+wysiwygID).contentDocument.body.style.fontFamily = 'Arial';
  159. 	get('WYSIWYG'+wysiwygID).contentDocument.body.style.fontSize = '10pt';
  160. 	get('WYSIWYG'+wysiwygID).contentDocument.designMode = 'on';
  161. 	get('WYSIWYG'+wysiwygID).contentDocument.body.id = 'editor' + wysiwygID;
  162. 	wysiwygs[parseInt(wysiwygID)-1] = textArea;
  163. 	get('WYSIWYG'+wysiwygID).contentDocument.execCommand('styleWithCSS', true, null);
  164. 	get('WYSIWYG'+wysiwygID).height = get('wysiwygContainer'+wysiwygID).offsetHeight - get('ulWYSIWYGToolbar'+wysiwygID).offsetHeight - 58 + 'px';
  165. 	textAreaID = textArea;
  166. 	get(textAreaID).className = 'hidden';
  167. 	get('WYSIWYG'+wysiwygID).contentDocument.addEventListener('mouseup', function() {
  168. 		currentWYSIWYG = this.body.id.substring(6);
  169. 		textAreaID     = wysiwygs[parseInt(this.body.id.substring(6))-1];
  170. 		updateButtonStates();
  171. 	}, false);
  172. 	get('WYSIWYG'+wysiwygID).contentDocument.addEventListener('keyup', function(e) {
  173. 		updateTextArea();
  174. 		updateButtonStates();
  175. 	}, false);
  176. 	get('WYSIWYG'+wysiwygID).contentDocument.addEventListener('keypress', function(e) {
  177. 		currentWYSIWYG = this.body.id.substring(6);
  178. 		textAreaID     = wysiwygs[parseInt(this.body.id.substring(6))-1];
  179. 		handleKeyPress(e);
  180. 		return false;
  181. 	}, true);
  182. }
  183.  
  184. function insertImage(id, name) {
  185. 	wysiwygCommand("<a href=\"/uploads/view/" + id + "\"><img src=\"/uploads/download/" + id + "/resized\" alt=\"" + name + "\" title=\"" + name + "\" /></a>", null, "inserthtml");
  186. 	get('btn'+currentWYSIWYG+'cmdselectimage').className = toggleVisibility('divImages') ? 'pressed' : '';
  187. 	updateTextArea();
  188. }
  189.  
  190. function updateTextArea() {
  191. 	get(textAreaID).value = get('WYSIWYG'+currentWYSIWYG).contentDocument.body.innerHTML;
  192. 	get('WYSIWYG'+currentWYSIWYG).contentWindow.focus();
  193. }
  194.  
  195. function wysiwygCommand(value, true_or_false, called_from_func_cmd) {
  196. 	if(!value)
  197. 		value = null;
  198. 	if(!true_or_false)
  199. 		true_or_false = false;
  200. 	if(called_from_func_cmd)
  201. 		get('WYSIWYG'+currentWYSIWYG).contentDocument.execCommand(called_from_func_cmd, true_or_false, value);
  202. 	else
  203. 		get('WYSIWYG'+currentWYSIWYG).contentDocument.execCommand(value.substring(0, currentWYSIWYG.length+3)==currentWYSIWYG+'cmd' ? value.substring(currentWYSIWYG.length+3) : value, false, null);//cmd_value, cmd_true_or_false);
  204. 	updateButtonStates();
  205. }
  206.  
  207. function updateButtonStates() {
  208. 	for(i=0;i<=13;i++) {
  209. 		if(get('btn'+currentWYSIWYG+'cmd'+commands[i]))
  210. 			try {
  211. 				get('btn'+currentWYSIWYG+'cmd'+commands[i]).className = get('WYSIWYG'+currentWYSIWYG).contentDocument.queryCommandState(commands[i]) ? 'pressed' : '';
  212. 			}
  213. 			catch(err) {
  214. 			}
  215. 		if(i==6) i = 9;
  216. 	}
  217. 	updateTextArea();
  218. }
  219.  
  220. function insertTable() {
  221. 	newTable = document.createElement('table');
  222. 	tableCount++;
  223. 	for(i=0;i<parseInt(get('txtRowsInput'+currentWYSIWYG).value);i++) {
  224. 		newTableRow = document.createElement('tr');
  225. 		for(n=0;n<parseInt(get('txtColumnsInput'+currentWYSIWYG).value);n++) {
  226. 			newTableCell = document.createElement('td');
  227. 			newTableCell.style.border = '1px solid #d3d3d3';
  228. 			newTableCell.style.width = '5em';
  229. 			newTableCell.style.height = '1.8em';
  230. 			newTableCell.style.fontSize = '80%';
  231. 			newTableCell.style.verticalAlign = 'top';
  232. 			newTableRow.appendChild(newTableCell);
  233. 		}
  234. 		newTable.appendChild(newTableRow);
  235. 	}
  236. 	cursorPosition = get('WYSIWYG'+currentWYSIWYG).contentWindow.getSelection().getRangeAt(0).startOffset;
  237. 	get('WYSIWYG'+currentWYSIWYG).contentDocument.body.innerHTML = get('WYSIWYG'+currentWYSIWYG).contentDocument.body.innerHTML.substring(0, cursorPosition) + "<table id=\"table"+tableCount+"\" style=\"border-collapse: collapse; border: 1px solid white; margin: 0.5em;\">" + newTable.innerHTML + "</table>" + get('WYSIWYG'+currentWYSIWYG).contentDocument.body.innerHTML.substring(cursorPosition);
  238. 	get('btn'+currentWYSIWYG+'cmdinserttable').className = toggleVisibility('fieldsetInsertTable'+currentWYSIYWG) ? 'pressed' : '';
  239. 	get('txtRowsInput'+currentWYSIWYG).value = '';
  240. 	get('txtColumnsInput'+currentWYSIWYG).value = '';
  241. 	updateTextArea();
  242. 	return false;
  243. }
  244.  
  245. function insertRow(aboveCurrentRow) {
  246. 	tableRow = get('WYSIWYG'+currentWYSIWYG).contentWindow.getSelection().focusNode.parentNode.parentNode;
  247. 	if(tableRow=='[object HTMLTableRowElement]') {
  248. 		newTableRow = document.createElement('tr');
  249. 		for(i=0;i<tableRow.childNodes.length;i++) {
  250. 			newTableCell = document.createElement('td');
  251. 			newTableCell.style.border = '1px solid #d3d3d3';
  252. 			newTableCell.style.width = '5em';
  253. 			newTableCell.style.height = '1.8em';
  254. 			newTableCell.style.fontSize = '80%';
  255. 			newTableCell.style.verticalAlign = 'top';
  256. 			newTableRow.appendChild(newTableCell);
  257. 		}
  258. 		tableRow.parentNode.insertBefore(newTableRow, aboveCurrentRow==true?tableRow:tableRow.nextSibling);
  259. 	}
  260. }
  261.  
  262. function insertColumn(afterCurrentColumn) {
  263. 	tableRow = get('WYSIWYG'+currentWYSIWYG).contentWindow.getSelection().focusNode.parentNode.parentNode;
  264. 	if(tableRow=='[object HTMLTableRowElement]') {
  265. 		cellIndex = get('WYSIWYG'+currentWYSIWYG).contentWindow.getSelection().focusNode.parentNode.cellIndex;
  266. 		table = tableRow.parentNode;
  267. 		for(i=0;i<table.childNodes.length;i++) {
  268. 			newTableCell = document.createElement('td');
  269. 			newTableCell.style.border = '1px solid #d3d3d3';
  270. 			newTableCell.style.width = '5em';
  271. 			newTableCell.style.height = '1.8em';
  272. 			newTableCell.style.fontSize = '80%';
  273. 			newTableCell.style.verticalAlign = 'top';
  274. 			table.childNodes[i].insertBefore(newTableCell, afterCurrentColumn==true?table.childNodes[i].childNodes[cellIndex]:table.childNodes[i].childNodes[cellIndex].nextSibling);
  275. 		}
  276. 	}
  277. 	updateTextArea();
  278. }
  279.  
  280. function handleKeyPress(keyEvent) {
  281. 	charCode = keyEvent.charCode;
  282. 	if(charCode>97)
  283. 		charCode -= 32;
  284. 	if(keyEvent.ctrlKey) {
  285. 		switch(charCode) {
  286. 			case 66: // bold
  287. 				wysiwygCommand('bold');
  288. 				break;
  289. 			case 73: // italic
  290. 				wysiwygCommand('italic');
  291. 				break;
  292. 			case 85: // underline
  293. 				wysiwygCommand('underline');
  294. 				break;
  295. 			case 76: // left align
  296. 				wysiwygCommand('justifyleft');
  297. 				break;
  298. 			case 69: // center align
  299. 				wysiwygCommand('justifycenter');
  300. 				break;
  301. 			case 82: // right align
  302. 				wysiwygCommand('justifyright');
  303. 				break;
  304. 		}
  305. 		keyEvent.preventDefault();
  306. 	}
  307. }
  308.  
  309. function offsetRight(element) {
  310. 	return document.body.offsetWidth - (document.getElementById(element).offsetLeft + document.getElementById(element).offsetWidth);
  311. }
  312.  
  313. function offsetBottom(element) {
  314. 	return document.getElementById(element).offsetTop + document.getElementById(element).offsetHeight;
  315. }

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: brownrl on April 8, 2011

This looks interesting.... does it work? I tried in a simple html file and it seems no?

I like the coding style, if it works I am sure other devs can extend how they want.

You need to login to post a comment.