Click here to Skip to main content
14,977,302 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
I designed a text editor using the following code. now I wish to save the content I write in Iframe will be saved inside my database table. How can I make my editor work?

What I have tried:

<pre><!DOCTYPE html>
<html>
<head>
  <script src="https://kit.fontawesome.com/889d5ab78b.js" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript"></script>
<body onload="enableEditMode();" style="margin-top: 100px; margin-left: 200px;">
  <div>
   <select onclick="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="Times New Roman">Times New Roman</option>
  	</select>
    <button onclick="execCmd('bold');">class="fas fa-bold"__^</button>
    <button onclick="execCmd('underline')">^__i class="fas fa-underline"__^</i__^</button>
  
  	<select onclick="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>
  	</select>
  
Size <select 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>
  	</select>

  	<button onclick="execCmd('justifyFull')">^__i class="fas fa-align-justify"__^</button>
  	<button onclick="execCmd('justifyRight')">^__i class="fas fa-align-right"__^</button>
  	<button onclick="execCmd('justifyCenter')">^__i class="fas fa-align-center"__^</button>
  	<button onclick="execCmd('justifyLeft')">^__i class="fas fa-align-left"__^</button>
  	<br><br>
  	<button onclick="execCmd('subscript')">^__i class="fas fa-subscript"></button>
  	<button onclick="execCmd('superscript')">^__i class="fas fa-superscript"></button>

  	
  	<button onclick="execCmd('insertOrderedList')">^__i class="fas fa-list-ol"></button>
  	Font Color <input type="color" onchange="execCommandWithArg('foreColor', this.value);">
    Highlighter <input type="color" onchange="execCommandWithArg('hiliteColor', this.value);">
  	<button onclick="execCommandWithArg('insertImage', prompt('Enter URL:', ''));">^__i class="fas fa-image"></button>
    


  </div><br>
<form action="api.php" method="post">
   <div class="form form-control">
   <label for="course_id">Course Id</label> 
<input type="number" name="course_id">
</div>
 <div class="form form-control"> 
  <label for="question"></label>
<input type="text" name="question" id="question" value="">
</div>
 <div class="form form-control"> 
  <label form="exam_date"></label>
<input type="date" name="exam_date">
</div>


 <div class="form form-control"> 
<input type="submit" value="post" >
</div>
</form>

  <iframe name="uzma" id="uzma" style="width: 500px; height: 250px;"></iframe>

  <script type="text/javascript">
  	function enableEditMode(){
  		uzma.document.designMode ='On';


  	}
function execCmd(command){

	uzma.document.execCommand(command, false, null);
}
function execCommandWithArg(command, arg){

	uzma.document.execCommand(command, false, arg);
}

var x = document.getElementByClass('uzma');
document.getElementByClass('question').value = x;
  </script>
</body>
</html>
Posted
Updated 9-Mar-21 1:26am
Comments
Gerry Schmitz 8-Mar-21 14:06pm
   
Should have thought of that first, not last.

1 solution

Basic Principle: the <iframe> behaves like just another tab in your browser for most purposes (not quite all). If you treat it as such then all you need to do is send the data to the server (<form> or AJAX). You apparently have chosen to use a <form>

Now this requires that you know how to send data to a database (which is on the server) from your page (on the client).

In either case you will need server side code do actually access the database. I use PHP. Your form will target this page as its action attribute. That means that the submit button needs to be on the form (easiest way) and INSIDE your <iframe> = again, it's easiest to treat it as a separate tab.

You possibly have a lot to learn and here's the place I learned it:
W3Schools Online Web Tutorials[^]

Since I don't know what you actually know I didn't pre-set the link to the appropriate sections. You shouldn't have much trouble filling in the gaps.
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900