I dont know why, i just edited my modal's function, its now work. but, my summernote editor is gone. so, the reason why its gone is because i accidentally remove/change the source link. lol.
since i found a new editor (CKEditor) that i think fit to me, i changed my old editor (summernote) to this one.
Here is the simple tutorial to use CKEditor in your web page :
you can add this in your header/before body
<!-- CKEditor style // you can edit/optimize as you wish -->
<style>
#container {
width: 750px;
margin: 20px auto;
}
.ck-editor__editable[role="textbox"] {
/* editing area */
min-height: 200px;
}
.ck-content .image {
/* block images */
max-width: 80%;
margin: 20px auto;
}
</style>then in your <body> input this
<div class="container" id="container">
<textarea name="content_name" id="editor">
Your content here...
</textarea>
</div>and last but not least, put this CKEditor js source before the of body's tag :
<script src="https://cdn.ckeditor.com/ckeditor5/35.4.0/super-build/ckeditor.js"></script>and call the ClassicEditor.create() method to display the editor.
<script>
CKEDITOR.ClassicEditor.create(document.querySelector("#editor"),{toolbar:{items:["selectAll","heading","|","bold","italic","strikethrough","underline","code","subscript","superscript","removeFormat","|","bulletedList","numberedList","todoList","|","undo","redo","-","fontSize","fontFamily","fontColor","fontBackgroundColor","highlight","|","link","insertImage","blockQuote","insertTable","mediaEmbed","codeBlock","htmlEmbed","|","specialCharacters","horizontalLine","pageBreak","|","textPartLanguage","|","sourceEditing",],shouldNotGroupWhenFull:!0},heading:{options:[{model:"paragraph",title:"Paragraph",class:"ck-heading_paragraph"},{model:"heading1",view:"h1",title:"Heading 1",class:"ck-heading_heading1"},{model:"heading2",view:"h2",title:"Heading 2",class:"ck-heading_heading2"},{model:"heading3",view:"h3",title:"Heading 3",class:"ck-heading_heading3"},{model:"heading4",view:"h4",title:"Heading 4",class:"ck-heading_heading4"},{model:"heading5",view:"h5",title:"Heading 5",class:"ck-heading_heading5"},{model:"heading6",view:"h6",title:"Heading 6",class:"ck-heading_heading6"},]},fontFamily:{options:["default","Arial, Helvetica, sans-serif","Courier New, Courier, monospace","Georgia, serif","Lucida Sans Unicode, Lucida Grande, sans-serif","Tahoma, Geneva, sans-serif","Times New Roman, Times, serif","Trebuchet MS, Helvetica, sans-serif","Verdana, Geneva, sans-serif",],supportAllValues:!0},fontSize:{options:[10,12,14,"default",18,20,22],supportAllValues:!0},htmlSupport:{allow:[{name:/.*/,attributes:!0,classes:!0,styles:!0},]},htmlEmbed:{showPreviews:!0},link:{decorators:{addTargetToExternalLinks:!0,defaultProtocol:"https://",toggleDownloadable:{mode:"manual",label:"Downloadable",attributes:{download:"file"}}}},removePlugins:["CKBox","CKFinder","EasyImage","RealTimeCollaborativeComments","RealTimeCollaborativeTrackChanges","RealTimeCollaborativeRevisionHistory","PresenceList","Comments","TrackChanges","TrackChangesData","RevisionHistory","Pagination","WProofreader","MathType",]});
</script>The index.html will be like this :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
#container {
width: 750px;
margin: 20px auto;
}
.ck-editor__editable[role="textbox"] {
/* editing area */
min-height: 200px;
}
.ck-content .image {
/* block images */
max-width: 80%;
margin: 20px auto;
}
</style>
</head>
<body>
<div class="container" id="container"><textarea name="content_name" id="editor">
Your content here...
</textarea></div>
<script src="https://cdn.ckeditor.com/ckeditor5/35.4.0/super-build/ckeditor.js"></script>
<script>
CKEDITOR.ClassicEditor.create(document.querySelector("#editor"), {
toolbar: {
items: [
"selectAll",
"heading",
"|",
"bold",
"italic",
"strikethrough",
"underline",
"code",
"subscript",
"superscript",
"removeFormat",
"|",
"bulletedList",
"numberedList",
"todoList",
"|",
"undo",
"redo",
"-",
"fontSize",
"fontFamily",
"fontColor",
"fontBackgroundColor",
"highlight",
"|",
"link",
"insertImage",
"blockQuote",
"insertTable",
"mediaEmbed",
"codeBlock",
"htmlEmbed",
"|",
"specialCharacters",
"horizontalLine",
"pageBreak",
"|",
"textPartLanguage",
"|",
"sourceEditing",
],
shouldNotGroupWhenFull: true,
},
heading: {
options: [
{ model: "paragraph", title: "Paragraph", class: "ck-heading_paragraph" },
{ model: "heading1", view: "h1", title: "Heading 1", class: "ck-heading_heading1" },
{ model: "heading2", view: "h2", title: "Heading 2", class: "ck-heading_heading2" },
{ model: "heading3", view: "h3", title: "Heading 3", class: "ck-heading_heading3" },
{ model: "heading4", view: "h4", title: "Heading 4", class: "ck-heading_heading4" },
{ model: "heading5", view: "h5", title: "Heading 5", class: "ck-heading_heading5" },
{ model: "heading6", view: "h6", title: "Heading 6", class: "ck-heading_heading6" },
],
},
fontFamily: {
options: [
"default",
"Arial, Helvetica, sans-serif",
"Courier New, Courier, monospace",
"Georgia, serif",
"Lucida Sans Unicode, Lucida Grande, sans-serif",
"Tahoma, Geneva, sans-serif",
"Times New Roman, Times, serif",
"Trebuchet MS, Helvetica, sans-serif",
"Verdana, Geneva, sans-serif",
],
supportAllValues: true,
},
fontSize: { options: [10, 12, 14, "default", 18, 20, 22], supportAllValues: true },
htmlSupport: { allow: [{ name: /.*/, attributes: true, classes: true, styles: true }] },
htmlEmbed: { showPreviews: true },
link: { decorators: { addTargetToExternalLinks: true, defaultProtocol: "https://", toggleDownloadable: { mode: "manual", label: "Downloadable", attributes: { download: "file" } } } },
removePlugins: [
"CKBox",
"CKFinder",
"EasyImage",
"RealTimeCollaborativeComments",
"RealTimeCollaborativeTrackChanges",
"RealTimeCollaborativeRevisionHistory",
"PresenceList",
"Comments",
"TrackChanges",
"TrackChangesData",
"RevisionHistory",
"Pagination",
"WProofreader",
"MathType",
],
});
</script>
</body>
</html>here it will looks like :
and for more information about CKEditor, please check the full documentation at their website