如何使用脚本和HTML从富文本编辑器获取包括HTML在内的数据

Question

我在网上获得了一个富文本框编辑器窗体，并且已添加到我的网页中。富文本框的图像附在此处。在我的html身体

代码

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

剧本

<script type="text/javascript"> 
 
\t \t \t jQuery(function($){ 
 
\t 
 
\t function showErrorAlert (reason, detail) { 
 
\t \t var msg=''; 
 
\t \t if (reason==='unsupported-file-type') { msg = "Unsupported format " +detail; } 
 
\t \t else { 
 
\t \t \t //console.log("error uploading file", reason, detail); 
 
\t \t } 
 
\t \t $('<div class="alert"> <button type="button" class="close" data-dismiss="alert">&times;</button>'+ 
 
\t \t '<strong>File upload error</strong> '+msg+' </div>').prependTo('#alerts'); 
 
\t } 
 

 
\t //$('#editor1').ace_wysiwyg();//this will create the default editor will all buttons 
 

 
\t //but we want to change a few buttons colors for the third style 
 
\t $('#editor1').ace_wysiwyg({ 
 
\t \t toolbar: 
 
\t \t [ 
 
\t \t \t 'font', 
 
\t \t \t null, 
 
\t \t \t 'fontSize', 
 
\t \t \t null, 
 
\t \t \t {name:'bold', className:'btn-info'}, 
 
\t \t \t {name:'italic', className:'btn-info'}, 
 
\t \t \t {name:'strikethrough', className:'btn-info'}, 
 
\t \t \t {name:'underline', className:'btn-info'}, 
 
\t \t \t null, 
 
\t \t \t {name:'insertunorderedlist', className:'btn-success'}, 
 
\t \t \t {name:'insertorderedlist', className:'btn-success'}, 
 
\t \t \t {name:'outdent', className:'btn-purple'}, 
 
\t \t \t {name:'indent', className:'btn-purple'}, 
 
\t \t \t null, 
 
\t \t \t {name:'justifyleft', className:'btn-primary'}, 
 
\t \t \t {name:'justifycenter', className:'btn-primary'}, 
 
\t \t \t {name:'justifyright', className:'btn-primary'}, 
 
\t \t \t {name:'justifyfull', className:'btn-inverse'}, 
 
\t \t \t null, 
 
\t \t \t {name:'createLink', className:'btn-pink'}, 
 
\t \t \t {name:'unlink', className:'btn-pink'}, 
 
\t \t \t null, 
 
\t \t \t {name:'insertImage', className:'btn-success'}, 
 
\t \t \t null, 
 
\t \t \t 'foreColor', 
 
\t \t \t null, 
 
\t \t \t {name:'undo', className:'btn-grey'}, 
 
\t \t \t {name:'redo', className:'btn-grey'} 
 
\t \t ], 
 
\t \t 'wysiwyg': { 
 
\t \t \t fileUploadError: showErrorAlert 
 
\t \t } 
 
\t }).prev().addClass('wysiwyg-style1'); 
 

 
\t 
 
\t /** 
 
\t //make the editor have all the available height 
 
\t $(window).on('resize.editor', function() { 
 
\t \t var offset = $('#editor1').parent().offset(); 
 
\t \t var winHeight = $(this).height(); 
 
\t \t 
 
\t \t $('#editor1').css({'height':winHeight - offset.top - 10, 'max-height': 'none'}); 
 
\t }).triggerHandler('resize.editor'); 
 
\t */ 
 
\t 
 

 
\t 
 
\t 
 
\t 
 

 

 
\t 
 

 

 
\t 
 

 
\t //RESIZE IMAGE 
 
\t 
 
\t //Add Image Resize Functionality to Chrome and Safari 
 
\t //webkit browsers don't have image resize functionality when content is editable 
 
\t //so let's add something using jQuery UI resizable 
 
\t //another option would be opening a dialog for user to enter dimensions. 
 
\t if (typeof jQuery.ui !== 'undefined' && ace.vars['webkit']) { 
 
\t \t 
 
\t \t var lastResizableImg = null; 
 
\t \t function destroyResizable() { 
 
\t \t \t if(lastResizableImg == null) return; 
 
\t \t \t lastResizableImg.resizable("destroy"); 
 
\t \t \t lastResizableImg.removeData('resizable'); 
 
\t \t \t lastResizableImg = null; 
 
\t \t } 
 

 
\t \t var enableImageResize = function() { 
 
\t \t \t $('.wysiwyg-editor') 
 
\t \t \t .on('mousedown', function(e) { 
 
\t \t \t \t var target = $(e.target); 
 
\t \t \t \t if(e.target instanceof HTMLImageElement) { 
 
\t \t \t \t \t if(!target.data('resizable')) { 
 
\t \t \t \t \t \t target.resizable({ 
 
\t \t \t \t \t \t \t aspectRatio: e.target.width/e.target.height, 
 
\t \t \t \t \t \t }); 
 
\t \t \t \t \t \t target.data('resizable', true); 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t if(lastResizableImg != null) { 
 
\t \t \t \t \t \t \t //disable previous resizable image 
 
\t \t \t \t \t \t \t lastResizableImg.resizable("destroy"); 
 
\t \t \t \t \t \t \t lastResizableImg.removeData('resizable'); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t lastResizableImg = target; 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t }) 
 
\t \t \t .on('click', function(e) { 
 
\t \t \t \t if(lastResizableImg != null && !(e.target instanceof HTMLImageElement)) { 
 
\t \t \t \t \t destroyResizable(); 
 
\t \t \t \t } 
 
\t \t \t }) 
 
\t \t \t .on('keydown', function() { 
 
\t \t \t \t destroyResizable(); 
 
\t \t \t }); 
 
\t  } 
 

 
\t \t enableImageResize(); 
 

 
\t \t /** 
 
\t \t //or we can load the jQuery UI dynamically only if needed 
 
\t \t if (typeof jQuery.ui !== 'undefined') enableImageResize(); 
 
\t \t else {//load jQuery UI if not loaded 
 
\t \t \t //in Ace demo dist will be replaced by correct assets path 
 
\t \t \t $.getScript("assets/js/jquery-ui.custom.min.js", function(data, textStatus, jqxhr) { 
 
\t \t \t \t enableImageResize() 
 
\t \t \t }); 
 
\t \t } 
 
\t \t */ 
 
\t } 
 

 

 
}); 
 
\t \t </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访问它们。