I am trying to save my bootstrap WYSIWYG content by copying the div editor to a hidden textarea, but when i tried to submit it using ajax, i got a error "Submitted URI too large!" when checked i found out the image that i am trying to add was encoded into a base64. how can i get the image URL so i can process it using PHP.
My HTML
<div id="editor" name="editor" data-target="content">
</div>
<form>
<textarea type="text" name="content" id="content"></textarea>
<button type="submit" class="btn btn-danger copyeditor">Save</button>
</form>
My jquery and ajax script
<script>
$(".copyeditor").on("click", function() {
var targetName = $("#editor").attr('data-target');
$('#'+targetName).val($('#editor').html());
$.ajax({
type: "POST",
url: "data.php",
data: $('#content').html(),
success: success,
dataType: dataType
});
});
</script>
Here is what i am dealing with.
The goal is to make this
<img style="width: 640px;" src="data:image/jpeg;base64,/9j/4Qv6RXhpZgAATU0AKgAAAAgABwESAAMAAAABAAEAAAEaAAUAAAABAAAAYgEbAAUAAAABAAAAagEoAAMAAAABAAIAAAExAAIAAAAeAAAAcgEyAAIAAAAUAAAAkIdp...............>
Look like this
<img src="/images/blah/blah.jpg.">