surveybuilder
Version:
Build surveys in the most advanced, flexable, and more moderated way, for all users to build and see.
223 lines (188 loc) • 7.41 kB
HTML
<html>
<head>
<title>RichTextEditor</title>
<script src="https://kit.fontawesome.com/46bb4793e2.js" type="text/javascript"></script>
<link rel="shortcut icon" href="/SurveyBuilder/favicon.ico"/>
<style>
body{
background:lightgray;
}
</style>
</head>
<body onload="EditMode()">
<center>
<div id="Directions-Container">
<div id="Editing-container">
<button title="Bold" onclick="execCmd('bold')"><i class="fas fa-bold"></i></button>
<button title="Italic" onclick="execCmd('italic')"><i class="fas fa-italic"></i></button>
<button title="Underline" onclick="execCmd('underline')"><i class="fas fa-underline"></i></button>
<button title="Strikethrough" onclick="execCmd('strikeThrough')"><i class="fas fa-strikethrough"></i></button>
<button title="Subscript" onclick="execCmd('subscript')"><i class="fas fa-subscript"></i></button>
<button title="Superscript" onclick="execCmd('superscript')"><i class="fas fa-superscript"></i></button>
<button title="Undo" onclick="execCmd('undo')"><i class="fas fa-undo"></i></button>
<button title="Redo" onclick="execCmd('redo')"><i class="fas fa-redo"></i></button>
<button title="Unordered List" onclick="execCmd('insertUnorderedList')"><i class="fas fa-list-ul"></i></button>
<button title="Ordered List" onclick="execCmd('insertOrderedList')"><i class="fas fa-list-ol"></i></button>
<select title="Headings" onchange="execCommandWithArg('formatBlock', this.value)">
<option value="H1">H1</option>
<option value="H2">H2</option>
<option value="H3">H3</option>
<option value="H4">H4</option>
<option value="H5">H5</option>
<option value="H6">H6</option>
</select>
<button title="Horizontal Rule" onclick="execCmd('insertHorizontalRule')">HR</button>
<button title="Link" onclick="execCommandWithArg('createLink', prompt('Enter a URL', 'http://'))"><i class="fas fa-link"></i></button>
<button title="Unlink" onclick="execCmd('unlink')"><i class="fas fa-unlink"></i></button>
<button title="Left" onclick="execCmd('justifyLeft')"><i class="fas fa-align-left"></i></button>
<button title="Left" onclick="execCmd('justifyCenter')"><i class="fas fa-align-center"></i></button>
<button title="right" onclick="execCmd('justifyRight')"><i class="fas fa-align-right"></i></button>
<button title="justify" onclick="execCmd('justifyFull')"><i class="fas fa-align-justify"></i></button>
<button title="Preview" onclick="toggleEdit()"><i class="fas fa-eye"></i></button>
<br>
<select title="Font Name" onchange="execCommandWithArg('fontName', this.value)">
<option value="Arial">Arial</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier">Courier</option>
<option value="Georgia">Georgia</option>
<option value="Tahom">Tahoma</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Verdana">Verdana</option>
<option value="Monospace">Monospace</option>
<option value="sans-serif">Sans-Serif</option>
<option value="Cursive">Cursive</option>
<option value="Geneva">Geneva</option>
<option value="Impact">Impact</option>
<option value="Lucida Sans Unicode">Lucida Sans Unicode</option>
<option value="Trebuchet MS">Trebuchet MS</option>
<option value="Monaco">Monaco</option>
<option value="Book Antiqua">Book Antiqua</option>
</select>
<select title="Font Size" onclick="execCommandWithArg('fontSize', this.value)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
Text Color: <input type="color" title="Color" onchange="execCommandWithArg('foreColor', this.value)" />
Background: <input type="color" title="BgColor" onchange="execCommandWithArg('hiliteColor', this.value)" />
<button title="Insert Image" onclick="InsertImage()"><i class="fas fa-image"></i></button>
<button title="Insert Video" onclick="GetFrame()"><i class="fas fa-video"></i></button>
<button title="Blockquote" onclick="Blockquote()"><i class="fas fa-quote-left"></i></button>
<br>
<button title="Finished" style="color:green;" onclick="Finished()"><i class="fas fa-check"></i></button>
<button title="Select All" onclick="execCmd('selectAll')">Select All</button>
</div>
<br>
<span id="Preview" style="font-size:15px; color:gray;"></span>
<br>
<iframe name="richTextField" id="Frame" style="width:1000px; height:500px; border:5px solid blue; overflow:auto;"></iframe>
<script type="text/javascript">
var showingSorceCode = false;
var isInEditMode = true;
function EditMode(){
richTextField.document.designMode = 'On';
}
function execCmd(command){
richTextField.document.execCommand(command, false, null);
}
function execCommandWithArg(command, arg){
richTextField.document.execCommand(command, false, arg);
}
function toggleEdit(){
if(isInEditMode){
document.getElementById("Preview").innerHTML = "Previewing";
richTextField.document.designMode = 'Off';
isInEditMode = false;
}else{
document.getElementById("Preview").innerHTML = "";
richTextField.document.designMode = 'On';
isInEditMode = true;
}
}
function Pub(){
var Question = document.getElementById("Question-Value").value;
var Set = document.getElementById("Question");
if(Question == ""){
Set.innerHTML = "Question";
}
else{
Set.innerHTML = Question;
}
document.getElementById("Editor").hidden = true;
}
function GetFrame(){
var x = prompt("Enter a embed URL [Note: maker sure it is appropriate]", "");
if(x != null){
var y = prompt("Enter a Width size", "");
}
if(y != null){
var z = prompt("Enter a Height size", "");
}
if(z != null){
var VideoURL = "<iframe id='Video' style='border:none;margin:0;' src=' " + x + "'" + " " + "width=' " + y + "'" + " " + "height=' " + z + "'" + "></iframe>";
execCommandWithArg('insertHTML', VideoURL);
}
else{
return false;
}
}
function InsertImage(){
var x = prompt("Enter Image URL", "");
if(x != null){
var y = prompt("Enter Width", "");
}
if(y != null){
var z = prompt("Enter Height", "");
}
if(z != null){
var a = prompt("Enter a alt", "");
}
if(a != null){
var ImageURL = "<img id='Image' src=' " + x + "'" + " " + "width=' " + y + "'" + " " + "height=' " + z + "'" + " " + "alt=' "+ a + "'" +"/>";
execCommandWithArg('insertHTML', ImageURL);
}
else{
return false;
}
}
function Finished(){
var x = confirm("Are you sure you want to Finish Text editing? You won't able to return editing mode");
//If Yes
if(x == true){
var editTools = document.getElementById("Editing-container");
editTools.hidden = true;
richTextField.document.designMode = "Off";
var Frame = document.getElementById("Frame");
Frame.style.border = "1px solid black";
Frame.style.width = "100%";
Frame.style.height = "100%";
}
//If no
else{
return false;
}
}
function textMessage(){
if(richTextField.document.innerHTML != ""){
return "Are you you sure you want to leave? All data will be lost.";
}
}
function Blockquote(){
var x = prompt("Enter Source", "http://");
if(x == null){
alert("Canceled");
return false;
}
else{
var quote = prompt("Enter quote", "")
var GetBlockqoute = "<q cite='" + x + "'>" + quote + "</q>" + " - " + "<a href='" + x + "' target='blank'>" + x + "</a>"
execCommandWithArg('insertHTML', GetBlockqoute);
}
}
</script>
</body>
</html>