JavaScript将表插入到没有插件的文本编辑器中(不要建议使用插件）
JavaScript Insert table into text editor with out plugins (don't suggest plugins)
我需要在所见即所得文本编辑器文档中插入一个生成的表，其中包含示例代码。我看到了很多插件，我对JavaScript只有基本的了解。现在我不想使用插件了。使用普通的JavaScript代码，我需要根据光标位置在所见即所得文本编辑器中插入一个表。
我有使用"execCommand"的粗体、斜体、下划线功能的Main FIDDLE示例popover中的前三个字段是强制性的
现在我需要为表添加一个按钮，点击后我需要显示一个表信息的弹出窗口，这在下面的表生成器代码中提到。我需要在I帧中显示结果。到目前为止，我只在生成的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 <th></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 <th></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 <tbody>, <thead>, & <tfoot> </label> <input type="checkbox" name="table_extras" id="table_extras" value="table_extras_selected">
</div>
<div>
<label for="th_column">First column as <th></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中添加一行以承载表视图：
<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。
相关文章：
- 用于 Eclipse 的 JavaScript 编辑器插件
- Tinymce编辑器图像上传插件添加完整的图像URL
- CKEDITOR 拖放插件集成在编辑器实例销毁并重新创建后停止工作
- 在 PHP 页面上加载富文本编辑器 (TinyMCE） 的 jquery 插件时显示加载动画
- 另一个就地编辑器 - 一个jQuery就地编辑插件
- 适用于BlackBerry OS 7的Phonegap电子邮件编辑器插件
- 谷歌闭包编辑器插件
- 文本编辑器插件，允许数据与另一个插件交互
- JavaScript将表插入到没有插件的文本编辑器中(不要建议使用插件）
- 通过Ajax插件加载Wordpress编辑器
- 我如何用一个插件添加多个按钮到我的WordPress帖子编辑器
- 写一个Atom编辑器插件，动画语法着色
- 我如何使用多个插件's在编辑器
- 如何在响应文件管理器插件与TinyMCE编辑器中的子文件夹中获取文件
- GRAYT插件在编辑器中破坏HTML
- 编辑器:下拉插件
- 如何设置编辑器的高度低于50px时，使用自动调整大小插件
- CK编辑器，占位符插件&动态的项目
- 无法让Eclipse AngularJS插件中的Angular编辑器正常工作
- Aloha编辑器IE8插件块错误
