我正在管理面板中的laravel应用程序中使用yabwe的中型编辑器。
我能够通过.editable
div将内容从ajax发布到mysql数据库。
保存/在编辑期间,我使用相同的类名textarea
填充了div
中的内容,而不是.editable
中的内容,这样我就没有时间在其中插入图像/ youtube视频了编辑器。
我试图在其github问题中找到解决方案,但没有任何内容以以前发布的相同格式显示内容。
这是我到目前为止尝试过的:
刀片页面
@if(true == $blog)
<textarea class="editable">{{$blog->body}}</textarea> {{--used during editing of a post--}}
@else
<div class="editable"></div> {{--used when storing in db--}}
@endif
同一刀片页面中的jQuery
<script>
var editor = new MediumEditor('.editable',{
toolbar: {
buttons: ['bold', 'italic', 'underline', 'anchor', 'h1', 'h2', 'h3', 'quote', 'orderedlist', 'unorderedlist'],
},
paste: {
forcePlainText: false,
}
});
<!--image insert plugin start-->
$(function () {
$('.editable').mediumInsert({
editor: editor,
addons:{
images:{
fileUploadOptions: {
url: null,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i // (regexp) Regexp of accepted file types
},
}
}
});
$('#frm_post').on('submit', function(event){
event.preventDefault();
var content = editor.serialize();
var body = content['element-0'].value;
var formData = new FormData(this);
formData.append('body',body);
$.ajax({
url:"{{route('admin.blog.upsert',[$blogId])}}",
method:"POST",
data:formData,
dataType:'JSON',
contentType: false,
cache: false,
processData: false,
success:function(data)
{
$('#message').css('display', 'block');
$('#message').html(data.message);
$('#message').addClass(data.class_name);
$('#uploaded_image').html(data.uploaded_image);
}
})
});
});
<!--image insert plugin end-->
</script>
因此,简而言之,我应该能够在同一帖子中插入更多图像或视频。任何帮助将不胜感激。