120 lines
2.9 KiB
JavaScript
120 lines
2.9 KiB
JavaScript
/*=========================================================================================
|
|
File Name: blog-edit.js
|
|
Description: Blog edit field select2 and quill editor JS
|
|
----------------------------------------------------------------------------------------
|
|
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
|
Author: PIXINVENT
|
|
Author URL: http://www.themeforest.net/user/pixinvent
|
|
==========================================================================================*/
|
|
(function (window, document, $) {
|
|
'use strict';
|
|
|
|
var select = $('.select2');
|
|
var editor = '#blog-editor-container .editor';
|
|
var blogFeatureImage = $('#blog-feature-image');
|
|
var blogImageText = document.getElementById('blog-image-text');
|
|
var blogImageInput = $('#blogCustomFile');
|
|
|
|
// Basic Select2 select
|
|
select.each(function () {
|
|
var $this = $(this);
|
|
$this.wrap('<div class="position-relative"></div>');
|
|
$this.select2({
|
|
// the following code is used to disable x-scrollbar when click in select input and
|
|
// take 100% width in responsive also
|
|
dropdownAutoWidth: true,
|
|
width: '100%',
|
|
dropdownParent: $this.parent()
|
|
});
|
|
});
|
|
|
|
// Snow Editor
|
|
|
|
var Font = Quill.import('formats/font');
|
|
Font.whitelist = ['sofia', 'slabo', 'roboto', 'inconsolata', 'ubuntu'];
|
|
Quill.register(Font, true);
|
|
|
|
var blogEditor = new Quill(editor, {
|
|
bounds: editor,
|
|
modules: {
|
|
formula: true,
|
|
syntax: true,
|
|
toolbar: [
|
|
[
|
|
{
|
|
font: []
|
|
},
|
|
{
|
|
size: []
|
|
}
|
|
],
|
|
['bold', 'italic', 'underline', 'strike'],
|
|
[
|
|
{
|
|
color: []
|
|
},
|
|
{
|
|
background: []
|
|
}
|
|
],
|
|
[
|
|
{
|
|
script: 'super'
|
|
},
|
|
{
|
|
script: 'sub'
|
|
}
|
|
],
|
|
[
|
|
{
|
|
header: '1'
|
|
},
|
|
{
|
|
header: '2'
|
|
},
|
|
'blockquote',
|
|
'code-block'
|
|
],
|
|
[
|
|
{
|
|
list: 'ordered'
|
|
},
|
|
{
|
|
list: 'bullet'
|
|
},
|
|
{
|
|
indent: '-1'
|
|
},
|
|
{
|
|
indent: '+1'
|
|
}
|
|
],
|
|
[
|
|
'direction',
|
|
{
|
|
align: []
|
|
}
|
|
],
|
|
['link', 'image', 'video', 'formula'],
|
|
['clean']
|
|
]
|
|
},
|
|
theme: 'snow'
|
|
});
|
|
|
|
// Change featured image
|
|
if (blogImageInput.length) {
|
|
$(blogImageInput).on('change', function (e) {
|
|
var reader = new FileReader(),
|
|
files = e.target.files;
|
|
reader.onload = function () {
|
|
if (blogFeatureImage.length) {
|
|
blogFeatureImage.attr('src', reader.result);
|
|
}
|
|
};
|
|
reader.readAsDataURL(files[0]);
|
|
blogImageText.innerHTML = blogImageInput.val();
|
|
});
|
|
}
|
|
})(window, document, jQuery);
|