JavaScript Insert table into text editor without plugins(不建议使用插件)

标签 javascript jquery html

我需要使用示例代码在 WYSIWYG 文本编辑器文档中插入生成的表格。 看了那么多插件，我的 JavaScript 也只有基础知识。现在我不想使用插件。使用普通的 JavaScript 代码，我需要根据光标位置在所见即所得的文本编辑器中插入一个表格。

我有 sample Main FIDDLE使用“execCommand”获得粗体、斜体、下划线功能。 弹出窗口中的前三个字段是必填的

现在我需要为表格添加一个按钮，单击该按钮我需要为表格信息显示一个弹出窗口，下面的表格生成器代码中提到了这一点。我需要在 I-Frame 中显示结果。到目前为止，我只在生成的 div 中显示结果。

有什么方法可以使用我们自己的功能在所见即所得编辑器中插入表格。我有表格生成器的示例代码 从这个表格生成器中，“我点击生成表格按钮时得到的结果”应该显示在文本编辑器中。

任何人都可以帮助解决这个问题。 下面的代码是示例。

注意: 您可以使用 CKEditor 、 TinyMCV 等插件建议您自己的方式

感谢 Adavnce

$('.wysiwyg-controls a').on('click', function(e) {
  e.preventDefault();
  document.execCommand($(this).data('role'), false);
});


//# region for popover open and close

$(function(){
    $("#popoverExampleTwo").popover({
        html: true,
        content: function() {
          return $('#popoverExampleTwoHiddenContent').html();
        },
        trigger:'click',
        title: '',
        placement:'bottom'
    });
    
});    
$('html').on('click', function(e) {
  if (typeof $(e.target).data('original-title') == 'undefined' &&
     !$(e.target).parents().is('.popover.in')) {
    $('[data-original-title]').popover('hide');
      $('.popover').css('display','none');
  }
});

$(document).on("click", "#button_cells", function() {
    generateTable();
});

function generateTable(){
	var myRows = document.getElementById("rows");
var myColumns = document.getElementById("columns");
var tableSummary = document.getElementById("table_summary");
var tableCaption = document.getElementById("table_caption");
var tableClass = document.getElementById("table_class");
var tableID = document.getElementById("table_id");
var cellsSubmit = document.getElementById("button_cells");
var numberPattern = /^(\(\d+\) ?)?(\d+[\- ])*\d+$/;
var cellsHolder = document.getElementById("cells_holder");
var buttonGenerateHolder = document.getElementById("button_generate_holder");
var myColumnsHTML = "";
var myRowsHTML = "";
var myTHCheckbox = document.forms["table_generator_form"]["TH"];
var codeResultHolder = document.getElementById("code_result");
var codeResult = document.getElementById("code_result_text");
var myFinalHTML = "";
var myTextAreaID = 1;
var THDone = 0;
var THFinal = "";
var tableClassValue = "";
var tableIDValue = "";
var myRadioValue = "";
var myRadioNone = document.getElementById("th_none");
var myRadioRow = document.getElementById("th_row");
var myRadioColumn = document.getElementById("th_column");
var myTableExtrasHolder = document.getElementById("table_extras_holder");
var myTableExtrasCheckbox = document.forms["table_generator_form"]["table_extras"];
var numericPattern = /\d/;
var myTab = "";

		myColumnsHTML = "";
	myTextAreaID = 1;
	
	if (myRows.value == "" || /^\s+$/.test(myRows.value))
		{
		//alert("Please enter number of Rows");
		return false;
		}

	if (numberPattern.test(myRows.value) == false || myRows.value > 50)
		{
		//alert('Only numeric data below 50 allowed for Rows');
		return false;
		}

	if (myColumns.value == "" || /^\s+$/.test(myColumns.value))
		{
		//alert("Please enter number of Columns");
		return false;
		}

	if (numberPattern.test(myColumns.value) == false || myColumns.value > 11)
		{
		//alert('Only numeric data below 12 allowed for Columns');
		return false;
		}

	if (tableSummary.value == "" || /^\s+$/.test(tableSummary.value))
		{
		//alert("Please enter a Summary for your table");
		return false;
		}

		for (r=0;r<myRows.value;r++)
		{
			for (c=0;c<myColumns.value;c++) 
			{
				myColumnsHTML += "<textarea rows='5' cols='15' id='text_box"+myTextAreaID+"'></textarea>";
				if(c+1 == myColumns.value) {
					myColumnsHTML = myColumnsHTML + "<br />";
				}
				myTextAreaID = myTextAreaID + 1;
			}
		}

	cellsHolder.innerHTML = myColumnsHTML;
}   
    
$(document).on("click", "#button_generate", function() {
    generateTableCode();
});

function generateTableCode(){
    var myRows = document.getElementById("rows");
var myColumns = document.getElementById("columns");
var tableSummary = document.getElementById("table_summary");
var tableCaption = document.getElementById("table_caption");
var tableClass = document.getElementById("table_class");
var tableID = document.getElementById("table_id");
var cellsSubmit = document.getElementById("button_cells");
var numberPattern = /^(\(\d+\) ?)?(\d+[\- ])*\d+$/;
var cellsHolder = document.getElementById("cells_holder");
var buttonGenerateHolder = document.getElementById("button_generate_holder");
var myColumnsHTML = "";
var myRowsHTML = "";
var myTHCheckbox = document.forms["table_generator_form"]["TH"];
var codeResultHolder = document.getElementById("code_result");
var codeResult = document.getElementById("code_result_text");
var myFinalHTML = "";
var myTextAreaID = 1;
var THDone = 0;
var THFinal = "";
var tableClassValue = "";
var tableIDValue = "";
var myRadioValue = "";
var myRadioNone = document.getElementById("th_none");
var myRadioRow = document.getElementById("th_row");
var myRadioColumn = document.getElementById("th_column");
var myTableExtrasHolder = document.getElementById("table_extras_holder");
var myTableExtrasCheckbox = document.forms["table_generator_form"]["table_extras"];
var numericPattern = /\d/;
var myTab = "";

		myColumnsHTML = "";
	myTextAreaID = 1;

	
	if (tableSummary.value == "" || /^\s+$/.test(tableSummary.value))
		{
		//alert("Table Summary is required");
		return false;
		}

	if (tableID.value.indexOf(" ") !== -1)
		{
		//alert("You cannot use a space in the Table ID");
		return false;
		}

	if (numericPattern.test(tableID.value.charAt("0")) == true)
		{
		//alert("The Table ID cannot begin with a numeric character");
		return false;
		}

	for (var z=0; z < myTHCheckbox.length; z++) {
	if (myTHCheckbox[z].checked)
		{
			myRadioValue = myTHCheckbox[z].value;
		}
	}

	codeResult.value = "";
	THDone = 0;
	THFinal = "";
	tableClassValue = "";
	tableIDValue = "";

	if (tableClass.value !== "") {
		tableClassValue = " class=\""+tableClass.value+"\"";
	}

	if (tableID.value !== "") {
		tableIDValue = " id=\""+tableID.value+"\"";
	}
	
	myFinalHTML = "<table cellspacing=\"0\" summary=\""+tableSummary.value+"\""+tableClassValue+tableIDValue+">\n";
	
	if (tableCaption.value !== "") {
	myFinalHTML += "	<caption>"+tableCaption.value+"</caption>\n";
	}
	var myIncrement = 1;
		for (r2=0;r2<myRows.value;r2++)
		{
			if (r2==0 && myTableExtrasCheckbox.checked) {
			myFinalHTML = myFinalHTML + "	<thead>\n		<tr>\n";
			}
			else
			{
			
				if (r2==myRows.value - 1 && myTableExtrasCheckbox.checked) {
				myFinalHTML = myFinalHTML + "	</tbody>\n	<tfoot>\n		<tr>\n";
				}
				else
				{
				myFinalHTML = myFinalHTML + "	" + myTab + "<tr>\n";
				}

			}
			
			for (c2=0;c2<myColumns.value;c2++) 
			{
				if (myRadioValue=="th_row_selected" && c2 < myColumns.value && THDone < myColumns.value + 1 && THFinal == "") {
					myFinalHTML += "		" + myTab + "<th>"+document.getElementById("text_box"+myIncrement).value+"</th>\n";
					THDone = THDone + 1;
					myIncrement = myIncrement + 1;
					if (THDone == myColumns.value) {
						THFinal = "end";
					}
				}
				else
				{
				if (c2==0 && myRadioValue=="th_column_selected") {
					myFinalHTML += "		" + myTab + "<th>"+document.getElementById("text_box"+myIncrement).value+"</th>\n";
					myIncrement = myIncrement + 1;
					}
					else
					{
				myFinalHTML += "		" + myTab + "<td>"+document.getElementById("text_box"+myIncrement).value+"</td>\n";
				myIncrement = myIncrement + 1;
				}
				}
		}

			if (r2==0 && myTableExtrasCheckbox.checked) {
			myFinalHTML = myFinalHTML + "		</tr>\n	</thead>\n	<tbody>\n";
			}
			else
			{
			if (r2==myRows.value - 1 && myTableExtrasCheckbox.checked) {
			myFinalHTML = myFinalHTML + "		</tr>\n	</tfoot>\n";
			}
			else
			{
			myFinalHTML = myFinalHTML + "	" + myTab + "</tr>\n";
			}
			}
			
		}

		myFinalHTML = myFinalHTML + "</table>";

		//makeOpacityZero(codeResult.id);
		codeResult.value = myFinalHTML;
		//opacity(codeResult.id, 0, 100, 400);
		myTab = "";
}

//$(document).on("click", "#code_result_text", function() {
  //  this.select();
//});

//$(document).on("click", "#th_row", function() {
   // myTableExtrasHolder.style.display = "block";
//});


//$(document).on("click", "#th_none", function() {
  // myTableExtrasCheckbox.checked = false;
		//myTableExtrasHolder.style.display = "none";
//});

//myRadioColumn.onclick = function() {
		//myTableExtrasCheckbox.checked = false;
		//myTableExtrasHolder.style.display = "none";
	//}
	
	//myTableExtrasCheckbox.onclick = function () {
		//if (myTableExtrasCheckbox.checked && myRows.value < 3) {
		//	alert('You must have more than 2 rows in order to have a TBODY');
		//	return false;
		//}
	//}





    
* {
  box-sizing: border-box;
}

.wysiwyg-editor {
  display: block;
  width: 400px;
}

.wysiwyg-controls {
  display: block;
  width: 100%;
  height: 35px;
  border: 1px solid #C2CACF;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  background: #fff;
}
.wysiwyg-controls a {
  display: inline-block;
  width: 35px;
  height: 35px;
  vertical-align: top;
  line-height: 38px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  color: #ADB5B9;
}
.wysiwyg-controls [data-role="bold"] {
  font-weight: bold;
}
.wysiwyg-controls [data-role="italic"] {
  font-style: italic;
}
.wysiwyg-controls [data-role="underline"] {
  text-decoration: underline;
}

[class^="menu"], [class^="menu"]:before, [class^="menu"]:after {
  position: relative;
  top: 48%;
  display: block;
  width: 65%;
  height: 2px;
  margin: 0 auto;
  background: #ADB5B9;
}
[class^="menu"]:before {
  content: '';
  top: -5px;
  width: 80%;
}
[class^="menu"]:after {
  content: '';
  top: 3px;
  width: 80%;
}

.menu-left:before, .menu-left:after {
  margin-right: 4px;
}

.menu-right:before, .menu-right:after {
  margin-left: 4px;
}

.wysiwyg-content {
  max-width: 100%;
  width: 100%;
  height: auto;
  padding: 12px;
  resize: both;
  overflow: auto;
  font-family: Helvetica, sans-serif;
  font-size: 12px;
  border: 1px solid #C2CACF;
  border-radius: 0 0 3px 3px;
  background: #F2F4F6;
}

textarea{
    width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="wysiwyg-editor">
  <div class="wysiwyg-controls">
    <a href='#' data-role='bold'>B</a>
    <a href='#' data-role='italic'>I</a>
    <a href='#' data-role='underline'>U</a>
    <a href='#' data-role='justifyleft'><i class="menu-left"></i></a>
    <a href='#' data-role='justifycenter'><i class="menu-center"></i></a>
    <a href='#' data-role='justifyright'><i class="menu-right"></i></a>
      <input type="button" id="popoverExampleTwo" value="table"/>
  </div>
  <div class="wysiwyg-content" contenteditable>
    <b>Let's make a statement!</b>
    <br>
    <i>This is an italicised sentence.</i>
    <br>
    <u>Very important information.</u>
  </div>

      <div id="popoverExampleTwoHiddenContent" style="display: none">
      
      <form id="table_generator_form" action="http://www.impressivewebs.com/html-table-code-generator/index.html" method="get">

<h1>HTML Table Code Generator 2.0</h1>

	<div>
	<label for="rows">Number of Rows:</label> <input type="text" id="rows" size="2" maxlength="2" class="txt">
	</div>
	
	<div>
	<label for="columns">Number of Columns:</label> <input type="text" id="columns" size="2" maxlength="2" class="txt">
	</div>
	
	<div>
	<label for="table_summary">Table Summary: (for screen readers)</label> <input type="text" id="table_summary" class="txt">
	</div>
	
	<div>
	<label for="table_caption">Table Caption: (optional)</label> <input type="text" id="table_caption" class="txt">
	</div>
	
	<div>
	<label for="table_class">CSS Class Name for Table: (optional)</label> <input type="text" id="table_class" class="txt">
	</div>
	
	<div>
	<label for="table_id">CSS ID for Table: (optional)</label> <input type="text" id="table_id" class="txt">
	</div>

	<div>
	<label for="th_none">No &lt;th&gt;</label> <input type="radio" name="TH" id="th_none" value="th_none_selected" class="checkbox" checked="checked">
	</div>
	
	<div>
	<label for="th_row">First row as &lt;th&gt;</label> <input type="radio" name="TH" id="th_row" value="th_row_selected" class="checkbox"> 
	</div>
	
	<div id="table_extras_holder">
	<label for="table_extras">Include &lt;tbody&gt;, &lt;thead&gt;, &amp; &lt;tfoot&gt;	</label> <input type="checkbox" name="table_extras" id="table_extras" value="table_extras_selected"> 
	</div>

	<div>
	<label for="th_column">First column as &lt;th&gt;</label> <input type="radio" name="TH" id="th_column" value="th_column_selected" class="checkbox">
	</div>
	
	<div id="button_cells_holder"><input type="button" id="button_cells" value="Prepare Cells for Data Insertion"></div>
	
	<div id="cells_holder"></div><!-- cells holder ends -->

	<div id="button_generate_holder"><input type="button" id="button_generate" value="Generate Table Code"></div>
	
	<div id="code_result"><textarea rows="25" cols="70" id="code_result_text"></textarea></div>
</form>
        </div>

最佳答案

在您的 html 中添加一行以托管 tableview:

<div id="table_result"><iframe id="tableView"></iframe></div>

然后将此 javascript 行添加到“生成表代码”按钮单击事件中:

$('#tableView').contentWindow.document.body.innerHTML = $('#code_result_text').value

这会将已经准备好的表格 html 代码从 code_result_text 文本区域复制到新的 iframe 中作为实际的 innerHTML。

关于JavaScript Insert table into text editor without plugins(不建议使用插件)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33604153/

上一篇：javascript - 单击链接并下载文件后显示弹出窗口

下一篇：html - 什么是 http-equiv 属性？为什么会这样命名呢？

相关文章：

javascript - Mongoose 不保存子文档

javascript - 从嵌套 JavaScript 对象检索属性的最有效方法是什么？

jquery - 如何在单击图像时调用属性的 href 创建灯箱

html - 如何垂直对齐ol的数字？

javascript - 仅在来自特定链接时运行 Javascript

javascript - 如果满足条件，Lodash 交换相邻的项目

javascript - 如何使用 jQuery 验证插件检查特定字段是否有效？

javascript - 如何确保首先调用 JavaScript 函数？

HTML/CSS 菜单栏在调整窗口大小时忽略它的形状

javascript - 尝试设置 3 个不同的 ngIf 以不同的点击次数打开

©2024 IT工具网  联系我们