I'm using summernote for my text editor and I used onImageUpload function to manage images. But when I upload image, image doesn't show in a text editor.
My javascript code
$(document).ready(function() {
$('#summernote').summernote({
lang: "ko-KR",
placeholder: '내용',
toolbar: [
['fontname', ['fontname']],
['style', ['bold', 'italic', 'underline', 'clear']],
['font', ['strikethrough', 'superscript', 'subscript']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['insert', ['picture', 'link', 'video', 'hr']]
],
fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New'],
disableResizeEditor: true,
callbacks: {
onImageUpload: function(files, editor, welEditable) {
sendFile(files[0], editor, welEditable);
}
}
});
$(".note-editable").height(300);
$('.note-statusbar').hide();
});
and sendfile function
function sendFile(file,editor,welEditable) {
data = new FormData();
data.append("file", file);
$.ajax({
data: data,
type: "POST",
url: "/post/imageUpload",
enctype: 'multipart/form-data',
cache: false,
contentType: false,
processData: false,
success: function(response) {
$('#summernote').summernote('insertImage', response.url);
},
});
}
I deleted onImageUpload and image uploaded normally.
I think this part is problem
success: function(response) {
$('#summernote').summernote('insertImage', response.url);
},
Related
When i create a post my images upload work correctly, but the callbacks get broke on the edit page
Here is my summernote config:
$('#summernote').summernote({
focus: false,
lang: 'pt-BR',
codemirror: { // codemirror options
theme: 'monokai'
},
toolbar: [
// [groupName, [list of button]]
['font', ['style','fontname', 'fontsize' ]],
['style', ['color','bold', 'italic', 'underline', 'clear']],
['para', ['ul', 'ol', 'paragraph', 'height']],
['insert', ['picture', 'link', 'hr']],
['misc', ['codeview']]
],
callbacks: {
onImageUpload: function (files, editor, welEditable) {
console.log('oi');
for (var i = files.length - 1; i >= 0; i--) {
sendFile(files[i], this)
}
},
onMediaDelete: function ($target, editor, $editable) {
let url = $target[0].src.split('/imgs/post/')[1]
$.post({
url: `http://${window.location.hostname}:3000/remove/foto/${url}`,
cache: false,
contentType: false,
processData: false
})
$target.remove()
}
}
})
The content fill the editor correctly, but when its setted the callbacks stop working.
Getting the content from server:
let content = String({{ data.content | dump | safe }})
if(content.length) $('#summernote').summernote('code', content)
Found a solution
Getting from server before:
let content = String({{ data.content | dump | safe }})
Then initializing with method chain:
$('#summernote').summernote({
focus: false,
lang: 'pt-BR',
code: 'asdpokaposdk',
codemirror: { // codemirror options
theme: 'monokai'
},
toolbar: [
// [groupName, [list of button]]
['font', ['style','fontname', 'fontsize' ]],
['style', ['color','bold', 'italic', 'underline', 'clear']],
['para', ['ul', 'ol', 'paragraph', 'height']],
['insert', ['picture', 'link', 'hr']],
['misc', ['codeview']]
],
callbacks: {
onImageUpload: function (files, editor, welEditable) {
console.log('oi');
for (var i = files.length - 1; i >= 0; i--) {
sendFile(files[i], this)
}
},
onMediaDelete: function ($target, editor, $editable) {
let url = $target[0].src.split('/imgs/post/')[1]
$.post({
url: `http://${window.location.hostname}:3000/remove/foto/${url}`,
cache: false,
contentType: false,
processData: false
})
$target.remove()
}
}
}).summernote('code', content)
I am trying to add a new custom button to the summernote widget with in YII2 using the wrapper:
use marqu3s\summernote\Summernote;
This is my code in the view following the summernote sample:
http://summernote.org/deep-dive/
$form->field($model, 'text_body')->widget(Summernote::className(), [
'clientOptions' => [
'id' => 'ysk-summernote',
'toolbar' => [
['mybutton', ['hello']],
['undo', ['undo']],
['redo', ['redo']],
['insert', ['link', 'hr']],
['style', ['bold', 'italic', 'underline', 'clear']],
['font', ['strikethrough', 'superscript', 'subscript']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
['view', ['codeview']],
['help', ['help']],
],
'height' => 400,
'buttons' => ['hello' => 'HelloButton'],
]
]
);
?>
I am also adding the following js:
<?php
$script = <<< JS
var HelloButton = function (context) {
var ui = $.summernote.ui;
// create button
var button = ui.button({
contents: '<i class="fa fa-child"/> Hello',
tooltip: 'hello',
click: function () {
// invoke insertText method with 'hello' on editor module.
context.invoke('editor.insertText', 'hello');
}
});
return button.render(); // return button as jquery object
}
JS;
$this->registerJs($script);
?>
The view renders with the editor but not showing the button:
If i check the toolbar i can see the div though:
<div class="note-btn-group btn-group note-mybutton"></div>
I tried for hours but no luck,
Any Ideas welcome
As described in http://summernote.org/deep-dive/#using-button-with-options, you have to name it as a function, not a string.
Ref: See https://github.com/summernote/summernote/blob/44157226d362c6aec1b0b6ff0fcdd40573147b61/src/js/bs3/module/Buttons.js#L643 to see how summernote handles it.
I have a problem with my Summernote that the dialogs/modals are not fit it in exactly . Here's the pic.
And here my summernote code.
$('#summernote_new_post').summernote({
dialogsInBody: true,
height: 400,
minHeight: null,
maxHeight: null,
focus: false,
callbacks: {
onImageUpload: function(files, editor, welEditable) {
for (var i = files.length - 1; i >= 0; i--) {
sendFile(files[i], this);
}
},
},
dialogsFade: true,
toolbar: [
['style', ['style']],
['font', ['bold', 'italic', 'underline', 'clear']],
['fontname', ['fontname']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
['table', ['table']],
['insert', ['link', 'picture', 'hr', 'video']],
['view', ['codeview']],
['help', ['help']]
],
popover: {
image: [
['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']],
['float', ['floatLeft', 'floatRight', 'floatNone']],
['custom', ['imageAttributes', 'imageShape']],
['remove', ['removeMedia']]
],
link: [
['link', ['linkDialogShow', 'unlink']]
],
air: [
['color', ['color']],
['font', ['bold', 'underline', 'clear']],
['para', ['ul', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture']]
]
},
});
Can anyone help me with this? I think there is conflicts with my code. Thank you.
I am using the following code to load data from server side through AJAX and then use local data for displaying it in the jqGrid. I can't use loadonce as it will not support pagination. Please find my code below :
$.ajax({
url: 'dashboard/grid',
type: 'POST',
dataType: 'json',
data: {_token: $('#csrf_token').val(),from:from, to:to},
})
.done(function(data) {
gridData = data;
})
.fail(function() {
console.log("error");
});
var data = $grid = $("#dash_grid"), gridData;
$grid.jqGrid({
datatype: "local",
data: data,
search:true,
jsonReader: {cell:""},
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'id',
sortorder: 'asc',
viewrecords: true,
height: "100%",
caption: "Multiple search with local data",
colNames:['Date','Impressions', 'Revenue'],
colModel:[
{name:'date',index:'date', width:60, sorttype:"int"},
{name:'impressions',index:'impressions', editable: true, width:90},
{name:'revenue',index:'revenue', editable: true, width:100},
]
});
It is not showing any error but not loading any data. If I copy the AJAX response and use it in the place where I am setting the data, it is working. How can I make this working ?
I am trying to display a progress bar when user tries to filter data in jqgrid. But, the beforeSearch and afterSearch functions are not triggered.
I tried to follow the documentation: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:toolbar_searching but, not sure what I am missing...
Here is the fiddler: http://jsfiddle.net/14f3Lpnk/1/
<table id="list"></table>
<div id="pager"></div>
var mydata = [
{id:"1",invdate:"2010-05-24",name:"test",note:"note",tax:"10.00",total:"2111.00"} ,
{id:"2",invdate:"2010-05-25",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"blah",note:"stuff",tax:"10.00",total:"210.00"}
];
jQuery("#list").jqGrid({
data: mydata,
datatype: "local",
height: 150,
rowNum: 10,
ignoreCase: true,
rowList: [10,20,30],
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date", formatter:"date"},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float", formatter:"number"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
pager: "#pager",
viewrecords: true,
autowidth: true,
height: 'auto',
caption: "Test Grid",
beforeSearch: function () {
alert('Filter Started');
},
afterSearch: function () {
alert('Filter Complete');
}
}).jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true, defaultSearch: "cn" });
Any help is appreciated.
beforeSearch and afterSearch are callback functions of filterToolbar method and not the grid itself. So you should use there in the following way
.jqGrid('filterToolbar', {
stringResult: true,
searchOnEnter: true,
defaultSearch: "cn",
beforeSearch: function () {
alert('Filter Started');
},
afterSearch: function () {
alert('Filter Complete');
}
});
See the modified demo http://jsfiddle.net/OlegKi/14f3Lpnk/2/