var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-semver="1.2.17"></script>
<script src="app.js"></script>
<script src="instants.js"></script>
<script src="editor.js"></script>
</head>
<body ng-controller="MainCtrl">
<form method="post" name="postform">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr valign="middle" align="left">
<td colspan="2">
<input type="button" accesskey="b" name="addbbcode0" value=" B " style="font-weight:bold; width: 30px;" onclick="bbstyle(0)" />
<input type="button" accesskey="i" name="addbbcode2" value=" i " style="font-style:italic; width: 30px;" onclick="bbstyle(2)" />
<input type="button" accesskey="u" name="addbbcode4" value=" u " style="text-decoration: underline; width: 30px;" onclick="bbstyle(4)" />
<input type="button" accesskey="q" name="addbbcode6" value="Quote" style="width: 50px" onclick="bbstyle(6)" />
<input type="button" accesskey="l" name="addbbcode10" value="List" style="width: 40px" onclick="bbstyle(8)" />
<input type="button" accesskey="o" name="addbbcode12" value="List=" style="width: 40px" onclick="bbstyle(10)" />
<input type="button" accesskey="y" name="addlitsitem" value="[*]" style="width: 40px" onclick="bbstyle(-1)" />
<input type="button" accesskey="p" name="addbbcode14" value="Img" style="width: 40px" onclick="bbstyle(12)" />
<input type="button" accesskey="w" name="addbbcode16" value="URL" style="text-decoration: underline; width: 40px" onclick="bbstyle(14)" />
<input type="button" name="addbbcode22" value="MORE" onclick="bbstyle(16)" />
<input type="button" name="addbbcode24" value="OOC" onclick="bbstyle(18)" />
</td>
</tr>
<tr>
<td valign="top" style="width: 100%;">
<textarea name="message" rows="15" cols="76" tabindex="3" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" onfocus="initInsertions();" style="width: 100%"></textarea>
</td>
</tr>
</table>
</form>
</body>
</html>
/* Put your css in here */
// Startup variables
var imageTag = false;
var theSelection = false;
var bbcodeEnabled = true;
// Check for Browser & Platform for PC & IE specific bits
// More details from: http://www.mozilla.org/docs/web-developer/sniffer/browser_type.html
var clientPC = navigator.userAgent.toLowerCase(); // Get client info
var clientVer = parseInt(navigator.appVersion); // Get browser version
var is_ie = ((clientPC.indexOf('msie') != -1) && (clientPC.indexOf('opera') == -1));
var is_win = ((clientPC.indexOf('win') != -1) || (clientPC.indexOf('16bit') != -1));
var baseHeight;
/**
* Fix a bug involving the TextRange object. From
* http://www.frostjedi.com/terra/scripts/demo/caretBug.html
*/
function initInsertions()
{
var doc;
if (document.forms[form_name])
{
doc = document;
}
else
{
doc = opener.document;
}
var textarea = doc.forms[form_name].elements[text_name];
if (is_ie && typeof(baseHeight) != 'number')
{
textarea.focus();
baseHeight = doc.selection.createRange().duplicate().boundingHeight;
if (!document.forms[form_name])
{
document.body.focus();
}
}
}
/**
* bbstyle
*/
function bbstyle(bbnumber)
{
if (bbnumber != -1)
{
bbfontstyle(bbtags[bbnumber], bbtags[bbnumber+1]);
}
else
{
insert_text('[*]');
document.forms[form_name].elements[text_name].focus();
}
}
/**
* Apply bbcodes
*/
function bbfontstyle(bbopen, bbclose)
{
theSelection = false;
var textarea = document.forms[form_name].elements[text_name];
textarea.focus();
if ((clientVer >= 4) && is_ie && is_win)
{
// Get text selection
theSelection = document.selection.createRange().text;
if (theSelection)
{
// Add tags around selection
document.selection.createRange().text = bbopen + theSelection + bbclose;
document.forms[form_name].elements[text_name].focus();
theSelection = '';
return;
}
}
else if (document.forms[form_name].elements[text_name].selectionEnd && (document.forms[form_name].elements[text_name].selectionEnd - document.forms[form_name].elements[text_name].selectionStart > 0))
{
mozWrap(document.forms[form_name].elements[text_name], bbopen, bbclose);
document.forms[form_name].elements[text_name].focus();
theSelection = '';
return;
}
//The new position for the cursor after adding the bbcode
var caret_pos = getCaretPosition(textarea).start;
var new_pos = caret_pos + bbopen.length;
// Open tag
insert_text(bbopen + bbclose);
// Center the cursor when we don't have a selection
// Gecko and proper browsers
if (!isNaN(textarea.selectionStart))
{
textarea.selectionStart = new_pos;
textarea.selectionEnd = new_pos;
}
// IE
else if (document.selection)
{
var range = textarea.createTextRange();
range.move("character", new_pos);
range.select();
storeCaret(textarea);
}
textarea.focus();
return;
}
/**
* Insert text at position
*/
function insert_text(text, spaces, popup)
{
var textarea;
if (!popup)
{
textarea = document.forms[form_name].elements[text_name];
}
else
{
textarea = opener.document.forms[form_name].elements[text_name];
}
if (spaces)
{
text = ' ' + text + ' ';
}
if (!isNaN(textarea.selectionStart))
{
var sel_start = textarea.selectionStart;
var sel_end = textarea.selectionEnd;
mozWrap(textarea, text, '');
textarea.selectionStart = sel_start + text.length;
textarea.selectionEnd = sel_end + text.length;
}
else if (textarea.createTextRange && textarea.caretPos)
{
if (baseHeight != textarea.caretPos.boundingHeight)
{
textarea.focus();
storeCaret(textarea);
}
var caret_pos = textarea.caretPos;
caret_pos.text = caret_pos.text.charAt(caret_pos.text.length - 1) == ' ' ? caret_pos.text + text + ' ' : caret_pos.text + text;
}
else
{
textarea.value = textarea.value + text;
}
if (!popup)
{
textarea.focus();
}
}
function split_lines(text)
{
var lines = text.split('\n');
var splitLines = new Array();
var j = 0;
for(i = 0; i < lines.length; i++)
{
if (lines[i].length <= 80)
{
splitLines[j] = lines[i];
j++;
}
else
{
var line = lines[i];
do
{
var splitAt = line.indexOf(' ', 80);
if (splitAt == -1)
{
splitLines[j] = line;
j++;
}
else
{
splitLines[j] = line.substring(0, splitAt);
line = line.substring(splitAt);
j++;
}
}
while(splitAt != -1);
}
}
return splitLines;
}
/**
* From http://www.massless.org/mozedit/
*/
function mozWrap(txtarea, open, close)
{
var selLength = (typeof(txtarea.textLength) == 'undefined') ? txtarea.value.length : txtarea.textLength;
var selStart = txtarea.selectionStart;
var selEnd = txtarea.selectionEnd;
var scrollTop = txtarea.scrollTop;
if (selEnd == 1 || selEnd == 2)
{
selEnd = selLength;
}
var s1 = (txtarea.value).substring(0,selStart);
var s2 = (txtarea.value).substring(selStart, selEnd);
var s3 = (txtarea.value).substring(selEnd, selLength);
txtarea.value = s1 + open + s2 + close + s3;
txtarea.selectionStart = selStart + open.length;
txtarea.selectionEnd = selEnd + open.length;
txtarea.focus();
txtarea.scrollTop = scrollTop;
return;
}
/**
* Caret Position object
*/
function caretPosition()
{
var start = null;
var end = null;
}
/**
* Get the caret position in an textarea
*/
function getCaretPosition(txtarea)
{
var caretPos = new caretPosition();
// simple Gecko/Opera way
if(txtarea.selectionStart || txtarea.selectionStart == 0)
{
caretPos.start = txtarea.selectionStart;
caretPos.end = txtarea.selectionEnd;
}
// dirty and slow IE way
else if(document.selection)
{
// get current selection
var range = document.selection.createRange();
// a new selection of the whole textarea
var range_all = document.body.createTextRange();
range_all.moveToElementText(txtarea);
// calculate selection start point by moving beginning of range_all to beginning of range
var sel_start;
for (sel_start = 0; range_all.compareEndPoints('StartToStart', range) < 0; sel_start++)
{
range_all.moveStart('character', 1);
}
txtarea.sel_start = sel_start;
// we ignore the end value for IE, this is already dirty enough and we don't need it
caretPos.start = txtarea.sel_start;
caretPos.end = txtarea.sel_start;
}
return caretPos;
}
var bbcode = [];
var bbtags = new Array('[b]','[/b]','[i]','[/i]','[u]','[/u]','[quote]','[/quote]','[list]','[/list]','[list=]','[/list]','[img]','[/img]','[url]','[/url]', '[MORE]', '[/MORE]', '[OOC]', '[/OOC]');
var imageTag = false;
var form_name = 'postform';
var text_name = 'message';