OrangeBiblioEditor

In this example below you will see how to do a OrangeBiblioEditor with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by sarat, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright sarat ©
  • HTML
  • CSS
  • JavaScript
    <html>
<head>
<title>BiblioEditor</title>
</head>
<body>
<div class="biblioeditor">
<h1>Orange BiblioEditor</h1>
<div class="menu" id="menubar">
<h2>BiblioTag</h2>
<div class="item">
<ul>
<li><a href="#" onclick="applyTag(document.getElementById('bibliotag'), 'cite')">cite</a></li>
<li><a href="#" onclick="applyTag(document.getElementById('bibliotag'), 'cite')">citepartial</a></li>
<li><a href="#" onclick="applyTag(document.getElementById('bibliotag'), 'author')">author</a></li>
<li><a href="#" onclick="applyTag(document.getElementById('bibliotag'), 'editor')">editor</a></li>
<li><a href="#" onclick="applyTag(document.getElementById('bibliotag'), 'translator')">translator</a></li>
<li><a href="#" onclick="applyTag(document.getElementById('bibliotag'), 'firstname')">firstname</a></li>
<li><a href="#" onclick="applyTag(document.getElementById('bibliotag'), 'lastname')">lastname</a></li>
<li><a href="#" onclick="applyTag(document.getElementById('bibliotag'), 'surname')">surname</a></li>
<li><a href="#" onclick="applyTag(document.getElementById('bibliotag'), 'middlename')">middlename</a></li>
<li><a href="#" onclick="applyTag(document.getElementById('bibliotag'), 'stringname')">stringname</a></li>
<li><a href="#" onclick="applyTag(document.getElementById('bibliotag'), 'book-title')">book-title</a></li>
<li><a href="#" onclick="applyTag(document.getElementById('bibliotag'), 'chapter-title')">chapter-title</a></li>
<li><a href="#" onclick="applyTag(document.getElementById('bibliotag'), 'artical-title')">artical-title</a></li>
<li><a href="#" onclick="applyTag(document.getElementById('bibliotag'), 'volume')">volume</a></li>
<li><a href="#" onclick="applyTag(document.getElementById('bibliotag'), 'issue')">issue</a></li>
<li><a href="#" onclick="applyTag(document.getElementById('bibliotag'), 'edition')">edition</a></li>
<li><a href="#" onclick="applyTag(document.getElementById('bibliotag'), 'publisher')">publisher</a></li>
<li><a href="#" onclick="applyTag(document.getElementById('bibliotag'), 'journal')">journal</a></li>
<li><a href="#" onclick="applyTag(document.getElementById('bibliotag'), 'publisher-loc')">publisher-loc</a></li>
<li><a href="#" onclick="applyTag(document.getElementById('bibliotag'), 'publisher-name')">publisher-name</a></li>
<li><a href="#" onclick="applyTag(document.getElementById('bibliotag'), 'place')">place</a></li>
<li><a href="#" onclick="applyTag(document.getElementById('bibliotag'), 'year')">year</a></li>
<li><a href="#" onclick="applyTag(document.getElementById('bibliotag'), 'date')">date</a></li>
<li><a href="#" onclick="applyTag(document.getElementById('bibliotag'), 'month')">month</a></li>
<li><a href="#" onclick="applyTag(document.getElementById('bibliotag'), 'page')">page</a></li>
<li><a href="#" onclick="applyTag(document.getElementById('bibliotag'), 'fpage')">fpage</a></li>
<li><a href="#" onclick="applyTag(document.getElementById('bibliotag'), 'lpage')">lpage</a></li>
<li><a href="#" onclick="applyTag(document.getElementById('bibliotag'), 'other')">other</a></li>
</ul>
</div>
</div>
<div class="editor" id="bibliotheme">
<h2>Bibliography<span class="transparent"><input type="checkbox" name="check" value="check" onClick="check()" id="checked"/>Transparent</span></h2>
<textarea id="bibliotag" value="" onkeydown="document.all.line.innerHTML = 0 + countLines()" onkeyup="LimtCharacters(this,0,'column');" spellcheck="false"></textarea>
<div class="footer"><p class="lefttext"><span class="sidetext">Line:</span><span id="line">0</span><span class="sidetext">Column:</span><span id="column">0</span></p></div>
<div class="basicsetting">
<ul>
<li><a href="#" onclick="applyTag(document.getElementById('bibliotag'), 'i')" title="Italic">I</a></li>
<li><a href="#" onclick="applyTag(document.getElementById('bibliotag'), 'em')" title="Emphasized">E</a></li>
<li><a href="#" onclick="applyTag(document.getElementById('bibliotag'), 'b')" title="Bold">B</a></li>
<li><a href="#" onclick="applyTag(document.getElementById('bibliotag'), 'strong')" title="Strong">S</a></li>
</ul>
</div>
</div>
<div class="setting">
<ul>
<li><a href="#" onclick="sizesmall()" id="small" title="small"><small><small>A</small></small></a></li>
<li><a href="#" onclick="sizemedium()" id="medium" title="medium"><small>A</small></a></li>
<li><a href="#" onclick="sizelarge()" id="large" title="large">A</a></li>
</ul>
</div>
</div>
</body>
</html>


/*Downloaded from https://www.codeseek.co/sarat/orangebiblioeditor-gbQoyX */
    /*scrollbar*/
::-webkit-scrollbar
{
	width:5px;
	height:5px;
	background-color:#FFFFFF;
	border-radius:20px;
}
::-webkit-scrollbar-thumb
{
	background-color:#FFA500;
	border-radius:20px;
}	
::-webkit-scrollbar-thumb:hover
{
	background-color:#FF4500;
}
::-moz-scrollbar
{
	width:5px;
	height:5px;
	background-color:#FFFFFF;
	border-radius:20px;
}
::-moz-scrollbar-thumb
{
	background-color:#FFA500;
	border-radius:20px;
}	
::-moz-scrollbar-thumb:hover
{
	background-color:#FF4500;
}
body
{
	background-color:#FFA500;
		background-image:url("http://www.wallpaperglow.com/wp-content/uploads/2014/11/Orange-Fruit-Hd-Wallpapers-013.jpg");
}
.biblioeditor
{
	margin-left:10px;
	
}
h1
{
	text-align:center;
	color:#FFFFFF;
	font-weight:bold;
	border-bottom:2px solid #FFA500;
	width:80%;
	margin:0 auto;
	margin-bottom:5px;
	margin-top:0px;
}
div.menu
{
	padding:5px;
	width:200px;
	height:540px;
	box-shadow:0px 0px 15px 0px #FF4500;
	float:left;
	border-radius:10px;
	background-color:#FF0000;
}
div.item
{
	margin-top:10px;
	width:200px;
	height:480px;
	overflow:scroll;
	overflow-x:hidden;
}
div.editor
{
	margin-left:5px;
	width:1080px;
	height:570px;
	box-shadow:0px 0px 15px 0px #FF4500;
	float:left;
	border-radius:10px;
	background-color:#FF0000;
}
#bibliotag
{
	width:1070px;
	height:485px;
	resize:none;
	padding:5px;
	font-size:20px;
	font-family:sans-serif;
	font-weight:normal;
	outline:none;
	border-color:#FFFFFF;
	-webkit-transition: font 1s linear;
	transition: font 1s linear;
	-moz-transition: font 1s linear;
	margin-top:0px;
}
div.menu h2
{
	text-align:center;
	color:#FFFFFF;
	font-weight:bold;
	border-bottom:2px solid #FFA500;
	padding-bottom:5px;
	margin-bottom:5px;
	margin-top:5px;
}
div.editor h2
{
	text-align:center;
	color:#FFFFFF;
	font-weight:bold;
	border-bottom:2px solid #FFA500;
	width:80%;
	margin:0 auto;
	padding-bottom:5px;
	margin-bottom:5px;
	margin-top:5px;
}
.transparent
{
	float:right;
	font-size:18px;
	border-bottom:1px solid #FFA500;
}
ul
{
	margin-left:20px;
	margin-right:20px;
	padding:0px;
}
ul li
{
	list-style-type:none;
}
ul li a
{
	text-decoration:none;
	font-size:20px;
	color:#FFFFFF;
	font-weight:normal;
	display:inline-block;
	width:160px;
	border-bottom:1px solid #FFA500;
	font-weight:bold;
	font-family:arial;
	padding-left:10px;
	-webkit-transition: background 1s linear;
	transition: background 1s linear;
	-moz-transition: background 1s linear;
}

ul li a:hover
{
	background-color:#FFA500;	
}
/*fontsize*/
.setting
{
	width:30px;
	height:100px;
	padding:5px;
	margin-top:150px;
	float:left;
}
/*fontsizelist*/
.setting ul li a
{
 background-color:#FFA500;
 width:20px;
 text-align:center;
 font-size:20px;
 padding:5px;
 font-family:sans-serif;
 border:none;
 margin-bottom:5px;
 color:white;
 box-shadow:0px 0px 15px 0px #FF0000;
 -webkit-transition: background 1s linear;
	transition: background 1s linear;
	-moz-transition: background 1s linear;
}
.setting ul li #small
{
	background-color:#FF0000;	
	
}
.setting ul
{
	margin-left:0px;
	margin-top:0px;
}
.setting a:hover
{
	background-color:#FF0000;
}
.sidetext
{
	font-size:18px;
	margin-right:5px;
	color:#FFFFFF;
	font-weight:bold;
	
}
.lefttext
{
	font-size:18px;
	margin-right:10px;
	margin-top:0px;
	margin-bottom:0px;
	margin-left:20px;
}
#line, #column
{
	margin-right:10px;
	color:#FFFFFF;
	font-weight:bold;
}
.footer
{
	clear:both;
	height:20px;
	margin-top:0px;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	float:left;
}
.basicsetting
{
	float:right;
	bottom:16px;
	position:relative;
}
.basicsetting ul li
{
	display:inline-block;
}
.basicsetting ul li a
{
	width:auto;
	padding-left:5px;
	padding-right:5px;
	height:20px;
	background-color:#FF0000;	
	border:1px solid #FF0000;
}
.basicsetting a:hover
{
	background-color:#FFA500;
}



/*Downloaded from https://www.codeseek.co/sarat/orangebiblioeditor-gbQoyX */
    function applyTag(obj, tag)
{
	wrapText(obj, '<'+tag+'>', '</'+tag+'>');
}
function wrapText(obj, beginTag, endTag)
{
	if(typeof obj.selectionStart == 'number')
	{
		// Mozilla, Opera, and other browsers
		var start = obj.selectionStart;
		var end   = obj.selectionEnd;
		
		obj.value = obj.value.substring(0, start) + beginTag + obj.value.substring(start, end) + endTag + obj.value.substring(end, obj.value.length);
  }
	else if(document.selection)
	{
		// Internet Explorer

		// make sure it's the textarea's selection
		obj.focus();
		var range = document.selection.createRange();
		if(range.parentElement() != obj) return false;

	    if(typeof range.text == 'string')
	        document.selection.createRange().text = beginTag + range.text + endTag;
	}
	else
		obj.value += text;
		
};
function sizesmall()
{
	document.getElementById("bibliotag").style.fontSize="20px";
	document.getElementById("small").style.background="#FF0000";
	document.getElementById("medium").style.background="#FFA500";
	document.getElementById("large").style.background="#FFA500";
}
function sizemedium()
{
	document.getElementById("bibliotag").style.fontSize="40px";
	document.getElementById("medium").style.background="#FF0000";
	document.getElementById("large").style.background="#FFA500";
	document.getElementById("small").style.background="#FFA500";
}
function sizelarge()
{
	document.getElementById("bibliotag").style.fontSize="60px";
	document.getElementById("large").style.background="#FF0000";
	document.getElementById("small").style.background="#FFA500";
	document.getElementById("medium").style.background="#FFA500";
}
function check()
{
	if(document.getElementById("checked").checked)
	{
  
   document.getElementById("menubar").style.background="none"
	document.getElementById("bibliotheme").style.background="none";
}
else
{
	document.getElementById("menubar").style.background="red"
	document.getElementById("bibliotheme").style.background="red";
}
}	
function LimtCharacters(txtMsg, CharLength, indicator) {
chars = txtMsg.value.length;
document.getElementById(indicator).innerHTML = CharLength + chars;
if (chars > CharLength) {
txtMsg.value = txtMsg.value.adding(0, CharLength);
}
}
function countLines() { 
var area = document.getElementById("bibliotag") 
var text = area.value.replace(/\s+$/g,"") 
var split = text.split("\n") 
return split.length } 


Comments