如何使用腳本和HTML從RTF編輯器中獲取包括HTML在內的數據

Question

我在線獲得了一個富文本框編輯器表單，並且已經添加到我的網頁中。富文本框的圖像顯示在此處。

我的html主體上的代碼是

 <div class="wysiwyg-editor" id="editor1"> </div> 

腳本是

 <script type="text/javascript"> jQuery(function($){ function showErrorAlert (reason, detail) { var msg=''; if (reason==='unsupported-file-type') { msg = "Unsupported format " +detail; } else { //console.log("error uploading file", reason, detail); } $('<div class="alert"> <button type="button" class="close" data-dismiss="alert">&times;</button>'+ '<strong>File upload error</strong> '+msg+' </div>').prependTo('#alerts'); } //$('#editor1').ace_wysiwyg();//this will create the default editor will all buttons //but we want to change a few buttons colors for the third style $('#editor1').ace_wysiwyg({ toolbar: [ 'font', null, 'fontSize', null, {name:'bold', className:'btn-info'}, {name:'italic', className:'btn-info'}, {name:'strikethrough', className:'btn-info'}, {name:'underline', className:'btn-info'}, null, {name:'insertunorderedlist', className:'btn-success'}, {name:'insertorderedlist', className:'btn-success'}, {name:'outdent', className:'btn-purple'}, {name:'indent', className:'btn-purple'}, null, {name:'justifyleft', className:'btn-primary'}, {name:'justifycenter', className:'btn-primary'}, {name:'justifyright', className:'btn-primary'}, {name:'justifyfull', className:'btn-inverse'}, null, {name:'createLink', className:'btn-pink'}, {name:'unlink', className:'btn-pink'}, null, {name:'insertImage', className:'btn-success'}, null, 'foreColor', null, {name:'undo', className:'btn-grey'}, {name:'redo', className:'btn-grey'} ], 'wysiwyg': { fileUploadError: showErrorAlert } }).prev().addClass('wysiwyg-style1'); /** //make the editor have all the available height $(window).on('resize.editor', function() { var offset = $('#editor1').parent().offset(); var winHeight = $(this).height(); $('#editor1').css({'height':winHeight - offset.top - 10, 'max-height': 'none'}); }).triggerHandler('resize.editor'); */ //RESIZE IMAGE //Add Image Resize Functionality to Chrome and Safari //webkit browsers don't have image resize functionality when content is editable //so let's add something using jQuery UI resizable //another option would be opening a dialog for user to enter dimensions. if ( typeof jQuery.ui !== 'undefined' && ace.vars['webkit'] ) { var lastResizableImg = null; function destroyResizable() { if(lastResizableImg == null) return; lastResizableImg.resizable( "destroy" ); lastResizableImg.removeData('resizable'); lastResizableImg = null; } var enableImageResize = function() { $('.wysiwyg-editor') .on('mousedown', function(e) { var target = $(e.target); if( e.target instanceof HTMLImageElement ) { if( !target.data('resizable') ) { target.resizable({ aspectRatio: e.target.width / e.target.height, }); target.data('resizable', true); if( lastResizableImg != null ) { //disable previous resizable image lastResizableImg.resizable( "destroy" ); lastResizableImg.removeData('resizable'); } lastResizableImg = target; } } }) .on('click', function(e) { if( lastResizableImg != null && !(e.target instanceof HTMLImageElement) ) { destroyResizable(); } }) .on('keydown', function() { destroyResizable(); }); } enableImageResize(); /** //or we can load the jQuery UI dynamically only if needed if (typeof jQuery.ui !== 'undefined') enableImageResize(); else {//load jQuery UI if not loaded //in Ace demo dist will be replaced by correct assets path $.getScript("assets/js/jquery-ui.custom.min.js", function(data, textStatus, jqxhr) { enableImageResize() }); } */ } }); </script> 

如何發布要在富文本框中輸入的數據。 我想用它的HTML代碼保存到數據庫。 請幫我。 我是初學者。

Answer 1

 $(function() { $('#editor1').keyup(function() { $('#hiddenCode').val(parseMe($(this).html())); // Sample output, which enables you to see the effect // Besides, this decodes your HTML entities $('#output').html( $('#hiddenCode').html( $('#hiddenCode').val() ).text() ); }); $('#editor2').keyup(function() { $('#hiddenCode2').val(parseMe($(this).html())); }); // This will encode your HTML input function parseMe(value) { return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); } }); 

 /* layout only */ #editor1, #editor2 { width: 300px; border: 1px solid #000; padding: 20px; margin-bottom: 20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wysiwyg-editor" id="editor1" contenteditable="true"></div> <div class="wysiwyg-editor" id="editor2" contenteditable="true"></div> <textarea id="hiddenCode" name="htmlCode"></textarea> <textarea id="hiddenCode2" name="htmlCode2"></textarea> <!-- Sample output --> <div id="output"></div> 

要在上方隱藏這些文本區域，只需將hidden屬性

如果單擊提交按鈕，由於這些文本區域，您可以自由獲取數據。 您可以使用它們的name attrubites訪問它們。