Develop Reference

Image doesn't show in summernote with onImageUpload

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);
},

Summernote onImageUpload doesn't work when i get code content from server

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)

How to use Froala editor as inline option in Ionic?

I have installed Froala editor in Ionic. It is working properly. In my **home.html** I have added this line of code
<div [froalaEditor]>Hello, Froala!</div>
It looks like this:
How can I use it inline in Ionic?
Their documentations guides for js but I don't know how to get the same implemented in Ionic, below is their instruction
HTML
<div id="froala-editor1">
<p>This is the first editor instance</p>
<img src="/assets/editor/docs/photo14.jpg" class="fr-fil" alt="book" width="150"/>
</div>
JS
<script>
$(function() {
$('div#froala-editor1').froalaEditor({
toolbarInline: true,
toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'color', 'emoticons', '-', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'indent', 'outdent', '-', 'insertImage', 'insertLink', 'insertFile', 'insertVideo', 'undo', 'redo']
})
});
</script>

The Ionic implementation is using Angular. See https://github.com/froala/angular-froala-wysiwyg#usage. You should basically do something like this in your component and then pass the options to the directive.
public options: Object = {
toolbarInline: true,
toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'color', 'emoticons', '-', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'indent', 'outdent', '-', 'insertImage', 'insertLink', 'insertFile', 'insertVideo', 'undo', 'redo']
}
<div [froalaEditor]='options'>Hello, Froala!</div>

yii2 summernote widget add new button to toolbar

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.

Froala editor image edit option now showing

I was using Froala edit as rich text editor ,
$(notesSelector).on('froalaEditor.initialized', function (e, editor) {
//set original html after loading
froalaInitialHtml = $(notesSelector).froalaEditor('html.get');
});
$(notesSelector).froalaEditor({
key: 'XXXXXXXXXX',
toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', '|', 'color', 'emoticons', 'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', 'insertHR', '-', 'insertLink', 'insertImage', 'insertVideo', 'insertFile', 'insertTable', 'undo', 'redo', 'clearFormatting', 'selectAll', 'html'],
toolbarButtonsXS: ['undo', 'redo' , '-', 'bold', 'italic', 'underline','insertImage'],
imageEditButtons:['imageInfo', 'imageAlign' ],
toolbarSticky: true, });`
i was expecting image context menu , but they don't appear when image is selected

There are 2 possible reasons why the image popup is not showing:
You are not including the image plugin. Make sure you include the plugins/image.min.js file and plugins/image.min.css file.
There are other elements on the page which have a higher zIndex. This is likely to happen when you are using the editor inside a modal. To overcome it, set the editor zIndex option to a higher value.