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

Question

我在网上获得了一个富文本框编辑器表单，我已将富文本框的图片添加到我的 webpage.the 附件中。

我的 html body 上的代码是

<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>

如何 post 我在富文本框中输入的数据。我想用它的 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 属性访问它们。

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

How to get data including HTML from a Rich Text editor using script and HTML

html

javascript

php

codeigniter

rich-text-editor