에디터 변경
This commit is contained in:
1 parent
593ebd3d6e
commit
af544ab7c9
86 files changed
+8228
-7419
No files matched your search
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,155 @@
|
||||
(function($) {
|
||||
$.extend($.summernote.lang, {
|
||||
'ko-KR': {
|
||||
font: {
|
||||
bold: '굵게',
|
||||
italic: '기울임꼴',
|
||||
underline: '밑줄',
|
||||
clear: '글자 효과 없애기',
|
||||
height: '줄간격',
|
||||
name: '글꼴',
|
||||
superscript: '위 첨자',
|
||||
subscript: '아래 첨자',
|
||||
strikethrough: '취소선',
|
||||
size: '글자 크기'
|
||||
},
|
||||
image: {
|
||||
image: '사진',
|
||||
insert: '사진 추가',
|
||||
resizeFull: '100% 크기로 변경',
|
||||
resizeHalf: '50% 크기로 변경',
|
||||
resizeQuarter: '25% 크기로 변경',
|
||||
floatLeft: '왼쪽 정렬',
|
||||
floatRight: '오른쪽 정렬',
|
||||
floatNone: '정렬하지 않음',
|
||||
shapeRounded: '스타일: 둥근 모서리',
|
||||
shapeCircle: '스타일: 원형',
|
||||
shapeThumbnail: '스타일: 액자',
|
||||
shapeNone: '스타일: 없음',
|
||||
dragImageHere: '텍스트 혹은 사진을 이곳으로 끌어오세요',
|
||||
dropImage: '텍스트 혹은 사진을 내려놓으세요',
|
||||
selectFromFiles: '파일 선택',
|
||||
maximumFileSize: 'Maximum file size',
|
||||
maximumFileSizeError: 'Maximum file size exceeded.',
|
||||
url: '사진 URL',
|
||||
remove: '사진 삭제',
|
||||
original: 'Original'
|
||||
},
|
||||
video: {
|
||||
video: '동영상',
|
||||
videoLink: '동영상 링크',
|
||||
insert: '동영상 추가',
|
||||
url: '동영상 URL',
|
||||
providers: '(YouTube, Vimeo, Vine, Instagram, DailyMotion, Youku 사용 가능)'
|
||||
},
|
||||
link: {
|
||||
link: '링크',
|
||||
insert: '링크 추가',
|
||||
unlink: '링크 삭제',
|
||||
edit: '수정',
|
||||
textToDisplay: '링크에 표시할 내용',
|
||||
url: '이동할 URL',
|
||||
openInNewWindow: '새창으로 열기'
|
||||
},
|
||||
table: {
|
||||
table: '테이블',
|
||||
addRowAbove: 'Add row above',
|
||||
addRowBelow: 'Add row below',
|
||||
addColLeft: 'Add column left',
|
||||
addColRight: 'Add column right',
|
||||
delRow: 'Delete row',
|
||||
delCol: 'Delete column',
|
||||
delTable: 'Delete table'
|
||||
},
|
||||
hr: {
|
||||
insert: '구분선 추가'
|
||||
},
|
||||
style: {
|
||||
style: '스타일',
|
||||
p: '본문',
|
||||
blockquote: '인용구',
|
||||
pre: '코드',
|
||||
h1: '제목 1',
|
||||
h2: '제목 2',
|
||||
h3: '제목 3',
|
||||
h4: '제목 4',
|
||||
h5: '제목 5',
|
||||
h6: '제목 6'
|
||||
},
|
||||
lists: {
|
||||
unordered: '글머리 기호',
|
||||
ordered: '번호 매기기'
|
||||
},
|
||||
options: {
|
||||
help: '도움말',
|
||||
fullscreen: '전체 화면',
|
||||
codeview: '코드 보기'
|
||||
},
|
||||
paragraph: {
|
||||
paragraph: '문단 정렬',
|
||||
outdent: '내어쓰기',
|
||||
indent: '들여쓰기',
|
||||
left: '왼쪽 정렬',
|
||||
center: '가운데 정렬',
|
||||
right: '오른쪽 정렬',
|
||||
justify: '양쪽 정렬'
|
||||
},
|
||||
color: {
|
||||
recent: '마지막으로 사용한 색',
|
||||
more: '다른 색 선택',
|
||||
background: '배경색',
|
||||
foreground: '글자색',
|
||||
transparent: '투명',
|
||||
setTransparent: '투명',
|
||||
reset: '취소',
|
||||
resetToDefault: '기본 값으로 변경'
|
||||
},
|
||||
shortcut: {
|
||||
shortcuts: '키보드 단축키',
|
||||
close: '닫기',
|
||||
textFormatting: '글자 스타일 적용',
|
||||
action: '기능',
|
||||
paragraphFormatting: '문단 스타일 적용',
|
||||
documentStyle: '문서 스타일 적용',
|
||||
extraKeys: 'Extra keys'
|
||||
},
|
||||
help: {
|
||||
'insertParagraph': 'Insert Paragraph',
|
||||
'undo': 'Undoes the last command',
|
||||
'redo': 'Redoes the last command',
|
||||
'tab': 'Tab',
|
||||
'untab': 'Untab',
|
||||
'bold': 'Set a bold style',
|
||||
'italic': 'Set a italic style',
|
||||
'underline': 'Set a underline style',
|
||||
'strikethrough': 'Set a strikethrough style',
|
||||
'removeFormat': 'Clean a style',
|
||||
'justifyLeft': 'Set left align',
|
||||
'justifyCenter': 'Set center align',
|
||||
'justifyRight': 'Set right align',
|
||||
'justifyFull': 'Set full align',
|
||||
'insertUnorderedList': 'Toggle unordered list',
|
||||
'insertOrderedList': 'Toggle ordered list',
|
||||
'outdent': 'Outdent on current paragraph',
|
||||
'indent': 'Indent on current paragraph',
|
||||
'formatPara': 'Change current block\'s format as a paragraph(P tag)',
|
||||
'formatH1': 'Change current block\'s format as H1',
|
||||
'formatH2': 'Change current block\'s format as H2',
|
||||
'formatH3': 'Change current block\'s format as H3',
|
||||
'formatH4': 'Change current block\'s format as H4',
|
||||
'formatH5': 'Change current block\'s format as H5',
|
||||
'formatH6': 'Change current block\'s format as H6',
|
||||
'insertHorizontalRule': 'Insert horizontal rule',
|
||||
'linkDialog.show': 'Show Link Dialog'
|
||||
},
|
||||
history: {
|
||||
undo: '실행 취소',
|
||||
redo: '다시 실행'
|
||||
},
|
||||
specialChar: {
|
||||
specialChar: '특수문자',
|
||||
select: '특수문자를 선택하세요'
|
||||
}
|
||||
}
|
||||
});
|
||||
})(jQuery);
|
||||
@@ -0,0 +1,16 @@
|
||||
.ext-databasic {
|
||||
position: relative;
|
||||
display: block;
|
||||
min-height: 50px;
|
||||
background-color: cyan;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
border: 1px solid white;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.ext-databasic p {
|
||||
color: white;
|
||||
font-size: 1.2em;
|
||||
margin: 0;
|
||||
}
|
||||
@@ -0,0 +1,292 @@
|
||||
(function(factory) {
|
||||
/* global define */
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['jquery'], factory);
|
||||
} else if (typeof module === 'object' && module.exports) {
|
||||
// Node/CommonJS
|
||||
module.exports = factory(require('jquery'));
|
||||
} else {
|
||||
// Browser globals
|
||||
factory(window.jQuery);
|
||||
}
|
||||
}(function($) {
|
||||
// pull in some summernote core functions
|
||||
var ui = $.summernote.ui;
|
||||
var dom = $.summernote.dom;
|
||||
|
||||
// define the popover plugin
|
||||
var DataBasicPlugin = function(context) {
|
||||
var self = this;
|
||||
var options = context.options;
|
||||
var lang = options.langInfo;
|
||||
|
||||
self.icon = '<i class="fa fa-object-group"/>';
|
||||
|
||||
// add context menu button for dialog
|
||||
context.memo('button.databasic', function() {
|
||||
return ui.button({
|
||||
contents: self.icon,
|
||||
tooltip: lang.databasic.insert,
|
||||
click: context.createInvokeHandler('databasic.showDialog')
|
||||
}).render();
|
||||
});
|
||||
|
||||
// add popover edit button
|
||||
context.memo('button.databasicDialog', function() {
|
||||
return ui.button({
|
||||
contents: self.icon,
|
||||
tooltip: lang.databasic.edit,
|
||||
click: context.createInvokeHandler('databasic.showDialog')
|
||||
}).render();
|
||||
});
|
||||
|
||||
// add popover size buttons
|
||||
context.memo('button.databasicSize100', function() {
|
||||
return ui.button({
|
||||
contents: '<span class="note-fontsize-10">100%</span>',
|
||||
tooltip: lang.image.resizeFull,
|
||||
click: context.createInvokeHandler('editor.resize', '1')
|
||||
}).render();
|
||||
});
|
||||
context.memo('button.databasicSize50', function() {
|
||||
return ui.button({
|
||||
contents: '<span class="note-fontsize-10">50%</span>',
|
||||
tooltip: lang.image.resizeHalf,
|
||||
click: context.createInvokeHandler('editor.resize', '0.5')
|
||||
}).render();
|
||||
});
|
||||
context.memo('button.databasicSize25', function() {
|
||||
return ui.button({
|
||||
contents: '<span class="note-fontsize-10">25%</span>',
|
||||
tooltip: lang.image.resizeQuarter,
|
||||
click: context.createInvokeHandler('editor.resize', '0.25')
|
||||
}).render();
|
||||
});
|
||||
|
||||
self.events = {
|
||||
'summernote.init': function(we, e) {
|
||||
// update existing containers
|
||||
$('data.ext-databasic', e.editable).each(function() { self.setContent($(this)); });
|
||||
// TODO: make this an undo snapshot...
|
||||
},
|
||||
'summernote.keyup summernote.mouseup summernote.change summernote.scroll': function() {
|
||||
self.update();
|
||||
},
|
||||
'summernote.dialog.shown': function() {
|
||||
self.hidePopover();
|
||||
}
|
||||
};
|
||||
|
||||
self.initialize = function() {
|
||||
// create dialog markup
|
||||
var $container = options.dialogsInBody ? $(document.body) : context.layoutInfo.editor;
|
||||
|
||||
var body = '<div class="form-group row-fluid">' +
|
||||
'<label>' + lang.databasic.testLabel + '</label>' +
|
||||
'<input class="ext-databasic-test form-control" type="text" />' +
|
||||
'</div>';
|
||||
var footer = '<button href="#" class="btn btn-primary ext-databasic-save">' + lang.databasic.insert + '</button>';
|
||||
|
||||
self.$dialog = ui.dialog({
|
||||
title: lang.databasic.name,
|
||||
fade: options.dialogsFade,
|
||||
body: body,
|
||||
footer: footer
|
||||
}).render().appendTo($container);
|
||||
|
||||
// create popover
|
||||
self.$popover = ui.popover({
|
||||
className: 'ext-databasic-popover'
|
||||
}).render().appendTo('body');
|
||||
var $content = self.$popover.find('.popover-content');
|
||||
|
||||
context.invoke('buttons.build', $content, options.popover.databasic);
|
||||
};
|
||||
|
||||
self.destroy = function() {
|
||||
self.$popover.remove();
|
||||
self.$popover = null;
|
||||
self.$dialog.remove();
|
||||
self.$dialog = null;
|
||||
};
|
||||
|
||||
self.update = function() {
|
||||
// Prevent focusing on editable when invoke('code') is executed
|
||||
if (!context.invoke('editor.hasFocus')) {
|
||||
self.hidePopover();
|
||||
return;
|
||||
}
|
||||
|
||||
var rng = context.invoke('editor.createRange');
|
||||
var visible = false;
|
||||
|
||||
if (rng.isOnData()) {
|
||||
var $data = $(rng.sc).closest('data.ext-databasic');
|
||||
|
||||
if ($data.length) {
|
||||
var pos = dom.posFromPlaceholder($data[0]);
|
||||
|
||||
self.$popover.css({
|
||||
display: 'block',
|
||||
left: pos.left,
|
||||
top: pos.top
|
||||
});
|
||||
|
||||
// save editor target to let size buttons resize the container
|
||||
context.invoke('editor.saveTarget', $data[0]);
|
||||
|
||||
visible = true;
|
||||
}
|
||||
}
|
||||
|
||||
// hide if not visible
|
||||
if (!visible) {
|
||||
self.hidePopover();
|
||||
}
|
||||
};
|
||||
|
||||
self.hidePopover = function() {
|
||||
self.$popover.hide();
|
||||
};
|
||||
|
||||
// define plugin dialog
|
||||
self.getInfo = function() {
|
||||
var rng = context.invoke('editor.createRange');
|
||||
|
||||
if (rng.isOnData()) {
|
||||
var $data = $(rng.sc).closest('data.ext-databasic');
|
||||
|
||||
if ($data.length) {
|
||||
// Get the first node on range(for edit).
|
||||
return {
|
||||
node: $data,
|
||||
test: $data.attr('data-test')
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return {};
|
||||
};
|
||||
|
||||
self.setContent = function($node) {
|
||||
$node.html('<p contenteditable="false">' + self.icon + ' ' + lang.databasic.name + ': ' +
|
||||
$node.attr('data-test') + '</p>');
|
||||
};
|
||||
|
||||
self.updateNode = function(info) {
|
||||
self.setContent(info.node
|
||||
.attr('data-test', info.test));
|
||||
};
|
||||
|
||||
self.createNode = function(info) {
|
||||
var $node = $('<data class="ext-databasic"></data>');
|
||||
|
||||
if ($node) {
|
||||
// save node to info structure
|
||||
info.node = $node;
|
||||
// insert node into editor dom
|
||||
context.invoke('editor.insertNode', $node[0]);
|
||||
}
|
||||
|
||||
return $node;
|
||||
};
|
||||
|
||||
self.showDialog = function() {
|
||||
var info = self.getInfo();
|
||||
var newNode = !info.node;
|
||||
context.invoke('editor.saveRange');
|
||||
|
||||
self
|
||||
.openDialog(info)
|
||||
.then(function(dialogInfo) {
|
||||
// [workaround] hide dialog before restore range for IE range focus
|
||||
ui.hideDialog(self.$dialog);
|
||||
context.invoke('editor.restoreRange');
|
||||
|
||||
// insert a new node
|
||||
if (newNode) {
|
||||
self.createNode(info);
|
||||
}
|
||||
|
||||
// update info with dialog info
|
||||
$.extend(info, dialogInfo);
|
||||
|
||||
self.updateNode(info);
|
||||
})
|
||||
.fail(function() {
|
||||
context.invoke('editor.restoreRange');
|
||||
});
|
||||
};
|
||||
|
||||
self.openDialog = function(info) {
|
||||
return $.Deferred(function(deferred) {
|
||||
var $inpTest = self.$dialog.find('.ext-databasic-test');
|
||||
var $saveBtn = self.$dialog.find('.ext-databasic-save');
|
||||
var onKeyup = function(event) {
|
||||
if (event.keyCode === 13) {
|
||||
$saveBtn.trigger('click');
|
||||
}
|
||||
};
|
||||
|
||||
ui.onDialogShown(self.$dialog, function() {
|
||||
context.triggerEvent('dialog.shown');
|
||||
|
||||
$inpTest.val(info.test).on('input', function() {
|
||||
ui.toggleBtn($saveBtn, $inpTest.val());
|
||||
}).trigger('focus').on('keyup', onKeyup);
|
||||
|
||||
$saveBtn
|
||||
.text(info.node ? lang.databasic.edit : lang.databasic.insert)
|
||||
.click(function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
deferred.resolve({ test: $inpTest.val() });
|
||||
});
|
||||
|
||||
// init save button
|
||||
ui.toggleBtn($saveBtn, $inpTest.val());
|
||||
});
|
||||
|
||||
ui.onDialogHidden(self.$dialog, function() {
|
||||
$inpTest.off('input keyup');
|
||||
$saveBtn.off('click');
|
||||
|
||||
if (deferred.state() === 'pending') {
|
||||
deferred.reject();
|
||||
}
|
||||
});
|
||||
|
||||
ui.showDialog(self.$dialog);
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
// Extends summernote
|
||||
$.extend(true, $.summernote, {
|
||||
plugins: {
|
||||
databasic: DataBasicPlugin
|
||||
},
|
||||
|
||||
options: {
|
||||
popover: {
|
||||
databasic: [
|
||||
['databasic', ['databasicDialog', 'databasicSize100', 'databasicSize50', 'databasicSize25']]
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
// add localization texts
|
||||
lang: {
|
||||
'en-US': {
|
||||
databasic: {
|
||||
name: 'Basic Data Container',
|
||||
insert: 'insert basic data container',
|
||||
edit: 'edit basic data container',
|
||||
testLabel: 'test input'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
}));
|
||||
@@ -0,0 +1,81 @@
|
||||
(function(factory) {
|
||||
/* global define */
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['jquery'], factory);
|
||||
} else if (typeof module === 'object' && module.exports) {
|
||||
// Node/CommonJS
|
||||
module.exports = factory(require('jquery'));
|
||||
} else {
|
||||
// Browser globals
|
||||
factory(window.jQuery);
|
||||
}
|
||||
}(function($) {
|
||||
// Extends plugins for adding hello.
|
||||
// - plugin is external module for customizing.
|
||||
$.extend($.summernote.plugins, {
|
||||
/**
|
||||
* @param {Object} context - context object has status of editor.
|
||||
*/
|
||||
'hello': function(context) {
|
||||
var self = this;
|
||||
|
||||
// ui has renders to build ui elements.
|
||||
// - you can create a button with `ui.button`
|
||||
var ui = $.summernote.ui;
|
||||
|
||||
// add hello button
|
||||
context.memo('button.hello', function() {
|
||||
// create button
|
||||
var button = ui.button({
|
||||
contents: '<i class="fa fa-child"/> Hello',
|
||||
tooltip: 'hello',
|
||||
click: function() {
|
||||
self.$panel.show();
|
||||
self.$panel.hide(500);
|
||||
// invoke insertText method with 'hello' on editor module.
|
||||
context.invoke('editor.insertText', 'hello');
|
||||
}
|
||||
});
|
||||
|
||||
// create jQuery object from button instance.
|
||||
var $hello = button.render();
|
||||
return $hello;
|
||||
});
|
||||
|
||||
// This events will be attached when editor is initialized.
|
||||
this.events = {
|
||||
// This will be called after modules are initialized.
|
||||
'summernote.init': function(we, e) {
|
||||
console.log('summernote initialized', we, e);
|
||||
},
|
||||
// This will be called when user releases a key on editable.
|
||||
'summernote.keyup': function(we, e) {
|
||||
console.log('summernote keyup', we, e);
|
||||
}
|
||||
};
|
||||
|
||||
// This method will be called when editor is initialized by $('..').summernote();
|
||||
// You can create elements for plugin
|
||||
this.initialize = function() {
|
||||
this.$panel = $('<div class="hello-panel"/>').css({
|
||||
position: 'absolute',
|
||||
width: 100,
|
||||
height: 100,
|
||||
left: '50%',
|
||||
top: '50%',
|
||||
background: 'red'
|
||||
}).hide();
|
||||
|
||||
this.$panel.appendTo('body');
|
||||
};
|
||||
|
||||
// This methods will be called when editor is destroyed by $('..').summernote('destroy');
|
||||
// You should remove elements on `initialize`.
|
||||
this.destroy = function() {
|
||||
this.$panel.remove();
|
||||
this.$panel = null;
|
||||
};
|
||||
}
|
||||
});
|
||||
}));
|
||||
@@ -0,0 +1,312 @@
|
||||
(function(factory) {
|
||||
/* global define */
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['jquery'], factory);
|
||||
} else if (typeof module === 'object' && module.exports) {
|
||||
// Node/CommonJS
|
||||
module.exports = factory(require('jquery'));
|
||||
} else {
|
||||
// Browser globals
|
||||
factory(window.jQuery);
|
||||
}
|
||||
}(function($) {
|
||||
$.extend($.summernote.plugins, {
|
||||
'specialchars': function(context) {
|
||||
var self = this;
|
||||
var ui = $.summernote.ui;
|
||||
|
||||
var $editor = context.layoutInfo.editor;
|
||||
var options = context.options;
|
||||
var lang = options.langInfo;
|
||||
|
||||
var KEY = {
|
||||
UP: 38,
|
||||
DOWN: 40,
|
||||
LEFT: 37,
|
||||
RIGHT: 39,
|
||||
ENTER: 13
|
||||
};
|
||||
var COLUMN_LENGTH = 15;
|
||||
var COLUMN_WIDTH = 35;
|
||||
|
||||
var currentColumn = 0;
|
||||
var currentRow = 0;
|
||||
var totalColumn = 0;
|
||||
var totalRow = 0;
|
||||
|
||||
// special characters data set
|
||||
var specialCharDataSet = [
|
||||
'"', '&', '<', '>', '¡', '¢',
|
||||
'£', '¤', '¥', '¦', '§',
|
||||
'¨', '©', 'ª', '«', '¬',
|
||||
'®', '¯', '°', '±', '²',
|
||||
'³', '´', 'µ', '¶', '·',
|
||||
'¸', '¹', 'º', '»', '¼',
|
||||
'½', '¾', '¿', '×', '÷',
|
||||
'ƒ', 'ˆ', '˜', '–', '—',
|
||||
'‘', '’', '‚', '“', '”',
|
||||
'„', '†', '‡', '•', '…',
|
||||
'‰', '′', '″', '‹', '›',
|
||||
'‾', '⁄', '€', 'ℑ', '℘',
|
||||
'ℜ', '™', 'ℵ', '←', '↑',
|
||||
'→', '↓', '↔', '↵', '⇐',
|
||||
'⇑', '⇒', '⇓', '⇔', '∀',
|
||||
'∂', '∃', '∅', '∇', '∈',
|
||||
'∉', '∋', '∏', '∑', '−',
|
||||
'∗', '√', '∝', '∞', '∠',
|
||||
'∧', '∨', '∩', '∪', '∫',
|
||||
'∴', '∼', '≅', '≈', '≠',
|
||||
'≡', '≤', '≥', '⊂', '⊃',
|
||||
'⊄', '⊆', '⊇', '⊕', '⊗',
|
||||
'⊥', '⋅', '⌈', '⌉', '⌊',
|
||||
'⌋', '◊', '♠', '♣', '♥',
|
||||
'♦'
|
||||
];
|
||||
|
||||
context.memo('button.specialchars', function() {
|
||||
return ui.button({
|
||||
contents: '<i class="fa fa-font fa-flip-vertical">',
|
||||
tooltip: lang.specialChar.specialChar,
|
||||
click: function() {
|
||||
self.show();
|
||||
}
|
||||
}).render();
|
||||
});
|
||||
|
||||
/**
|
||||
* Make Special Characters Table
|
||||
*
|
||||
* @member plugin.specialChar
|
||||
* @private
|
||||
* @return {jQuery}
|
||||
*/
|
||||
this.makeSpecialCharSetTable = function() {
|
||||
var $table = $('<table/>');
|
||||
$.each(specialCharDataSet, function(idx, text) {
|
||||
var $td = $('<td/>').addClass('note-specialchar-node');
|
||||
var $tr = (idx % COLUMN_LENGTH === 0) ? $('<tr/>') : $table.find('tr').last();
|
||||
|
||||
var $button = ui.button({
|
||||
callback: function($node) {
|
||||
$node.html(text);
|
||||
$node.attr('title', text);
|
||||
$node.attr('data-value', encodeURIComponent(text));
|
||||
$node.css({
|
||||
width: COLUMN_WIDTH,
|
||||
'margin-right': '2px',
|
||||
'margin-bottom': '2px'
|
||||
});
|
||||
}
|
||||
}).render();
|
||||
|
||||
$td.append($button);
|
||||
|
||||
$tr.append($td);
|
||||
if (idx % COLUMN_LENGTH === 0) {
|
||||
$table.append($tr);
|
||||
}
|
||||
});
|
||||
|
||||
totalRow = $table.find('tr').length;
|
||||
totalColumn = COLUMN_LENGTH;
|
||||
|
||||
return $table;
|
||||
};
|
||||
|
||||
this.initialize = function() {
|
||||
var $container = options.dialogsInBody ? $(document.body) : $editor;
|
||||
|
||||
var body = '<div class="form-group row-fluid">' + this.makeSpecialCharSetTable()[0].outerHTML + '</div>';
|
||||
|
||||
this.$dialog = ui.dialog({
|
||||
title: lang.specialChar.select,
|
||||
body: body
|
||||
}).render().appendTo($container);
|
||||
};
|
||||
|
||||
this.show = function() {
|
||||
var text = context.invoke('editor.getSelectedText');
|
||||
context.invoke('editor.saveRange');
|
||||
this.showSpecialCharDialog(text).then(function(selectChar) {
|
||||
context.invoke('editor.restoreRange');
|
||||
|
||||
// build node
|
||||
var $node = $('<span></span>').html(selectChar)[0];
|
||||
|
||||
if ($node) {
|
||||
// insert video node
|
||||
context.invoke('editor.insertNode', $node);
|
||||
}
|
||||
}).fail(function() {
|
||||
context.invoke('editor.restoreRange');
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* show image dialog
|
||||
*
|
||||
* @param {jQuery} $dialog
|
||||
* @return {Promise}
|
||||
*/
|
||||
this.showSpecialCharDialog = function(text) {
|
||||
return $.Deferred(function(deferred) {
|
||||
var $specialCharDialog = self.$dialog;
|
||||
var $specialCharNode = $specialCharDialog.find('.note-specialchar-node');
|
||||
var $selectedNode = null;
|
||||
var ARROW_KEYS = [KEY.UP, KEY.DOWN, KEY.LEFT, KEY.RIGHT];
|
||||
var ENTER_KEY = KEY.ENTER;
|
||||
|
||||
function addActiveClass($target) {
|
||||
if (!$target) {
|
||||
return;
|
||||
}
|
||||
$target.find('button').addClass('active');
|
||||
$selectedNode = $target;
|
||||
}
|
||||
|
||||
function removeActiveClass($target) {
|
||||
$target.find('button').removeClass('active');
|
||||
$selectedNode = null;
|
||||
}
|
||||
|
||||
// find next node
|
||||
function findNextNode(row, column) {
|
||||
var findNode = null;
|
||||
$.each($specialCharNode, function(idx, $node) {
|
||||
var findRow = Math.ceil((idx + 1) / COLUMN_LENGTH);
|
||||
var findColumn = ((idx + 1) % COLUMN_LENGTH === 0) ? COLUMN_LENGTH : (idx + 1) % COLUMN_LENGTH;
|
||||
if (findRow === row && findColumn === column) {
|
||||
findNode = $node;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
return $(findNode);
|
||||
}
|
||||
|
||||
function arrowKeyHandler(keyCode) {
|
||||
// left, right, up, down key
|
||||
var $nextNode;
|
||||
var lastRowColumnLength = $specialCharNode.length % totalColumn;
|
||||
|
||||
if (KEY.LEFT === keyCode) {
|
||||
if (currentColumn > 1) {
|
||||
currentColumn = currentColumn - 1;
|
||||
} else if (currentRow === 1 && currentColumn === 1) {
|
||||
currentColumn = lastRowColumnLength;
|
||||
currentRow = totalRow;
|
||||
} else {
|
||||
currentColumn = totalColumn;
|
||||
currentRow = currentRow - 1;
|
||||
}
|
||||
} else if (KEY.RIGHT === keyCode) {
|
||||
if (currentRow === totalRow && lastRowColumnLength === currentColumn) {
|
||||
currentColumn = 1;
|
||||
currentRow = 1;
|
||||
} else if (currentColumn < totalColumn) {
|
||||
currentColumn = currentColumn + 1;
|
||||
} else {
|
||||
currentColumn = 1;
|
||||
currentRow = currentRow + 1;
|
||||
}
|
||||
} else if (KEY.UP === keyCode) {
|
||||
if (currentRow === 1 && lastRowColumnLength < currentColumn) {
|
||||
currentRow = totalRow - 1;
|
||||
} else {
|
||||
currentRow = currentRow - 1;
|
||||
}
|
||||
} else if (KEY.DOWN === keyCode) {
|
||||
currentRow = currentRow + 1;
|
||||
}
|
||||
|
||||
if (currentRow === totalRow && currentColumn > lastRowColumnLength) {
|
||||
currentRow = 1;
|
||||
} else if (currentRow > totalRow) {
|
||||
currentRow = 1;
|
||||
} else if (currentRow < 1) {
|
||||
currentRow = totalRow;
|
||||
}
|
||||
|
||||
$nextNode = findNextNode(currentRow, currentColumn);
|
||||
|
||||
if ($nextNode) {
|
||||
removeActiveClass($selectedNode);
|
||||
addActiveClass($nextNode);
|
||||
}
|
||||
}
|
||||
|
||||
function enterKeyHandler() {
|
||||
if (!$selectedNode) {
|
||||
return;
|
||||
}
|
||||
|
||||
deferred.resolve(decodeURIComponent($selectedNode.find('button').attr('data-value')));
|
||||
$specialCharDialog.modal('hide');
|
||||
}
|
||||
|
||||
function keyDownEventHandler(event) {
|
||||
event.preventDefault();
|
||||
var keyCode = event.keyCode;
|
||||
if (keyCode === undefined || keyCode === null) {
|
||||
return;
|
||||
}
|
||||
// check arrowKeys match
|
||||
if (ARROW_KEYS.indexOf(keyCode) > -1) {
|
||||
if ($selectedNode === null) {
|
||||
addActiveClass($specialCharNode.eq(0));
|
||||
currentColumn = 1;
|
||||
currentRow = 1;
|
||||
return;
|
||||
}
|
||||
arrowKeyHandler(keyCode);
|
||||
} else if (keyCode === ENTER_KEY) {
|
||||
enterKeyHandler();
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// remove class
|
||||
removeActiveClass($specialCharNode);
|
||||
|
||||
// find selected node
|
||||
if (text) {
|
||||
for (var i = 0; i < $specialCharNode.length; i++) {
|
||||
var $checkNode = $($specialCharNode[i]);
|
||||
if ($checkNode.text() === text) {
|
||||
addActiveClass($checkNode);
|
||||
currentRow = Math.ceil((i + 1) / COLUMN_LENGTH);
|
||||
currentColumn = (i + 1) % COLUMN_LENGTH;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ui.onDialogShown(self.$dialog, function() {
|
||||
$(document).on('keydown', keyDownEventHandler);
|
||||
|
||||
self.$dialog.find('button').tooltip();
|
||||
|
||||
$specialCharNode.on('click', function(event) {
|
||||
event.preventDefault();
|
||||
deferred.resolve(decodeURIComponent($(event.currentTarget).find('button').attr('data-value')));
|
||||
ui.hideDialog(self.$dialog);
|
||||
});
|
||||
});
|
||||
|
||||
ui.onDialogHidden(self.$dialog, function() {
|
||||
$specialCharNode.off('click');
|
||||
|
||||
self.$dialog.find('button').tooltip('destroy');
|
||||
|
||||
$(document).off('keydown', keyDownEventHandler);
|
||||
|
||||
if (deferred.state() === 'pending') {
|
||||
deferred.reject();
|
||||
}
|
||||
});
|
||||
|
||||
ui.showDialog(self.$dialog);
|
||||
});
|
||||
};
|
||||
}
|
||||
});
|
||||
}));
|
||||
@@ -0,0 +1 @@
|
||||
@font-face{font-family:"summernote";font-style:normal;font-weight:normal;src:url("./font/summernote.eot?dbafe969167589eda84514394d126413");src:url("./font/summernote.eot?#iefix") format("embedded-opentype"),url("./font/summernote.woff?dbafe969167589eda84514394d126413") format("woff"),url("./font/summernote.ttf?dbafe969167589eda84514394d126413") format("truetype")}[class^="note-icon-"]:before,[class*=" note-icon-"]:before{display:inline-block;font:normal normal normal 14px summernote;font-size:inherit;-webkit-font-smoothing:antialiased;text-decoration:inherit;text-rendering:auto;text-transform:none;vertical-align:middle;speak:none;-moz-osx-font-smoothing:grayscale}.note-icon-align-center:before,.note-icon-align-indent:before,.note-icon-align-justify:before,.note-icon-align-left:before,.note-icon-align-outdent:before,.note-icon-align-right:before,.note-icon-align:before,.note-icon-arrow-circle-down:before,.note-icon-arrow-circle-left:before,.note-icon-arrow-circle-right:before,.note-icon-arrow-circle-up:before,.note-icon-arrows-alt:before,.note-icon-arrows-h:before,.note-icon-arrows-v:before,.note-icon-bold:before,.note-icon-caret:before,.note-icon-chain-broken:before,.note-icon-circle:before,.note-icon-close:before,.note-icon-code:before,.note-icon-col-after:before,.note-icon-col-before:before,.note-icon-col-remove:before,.note-icon-eraser:before,.note-icon-font:before,.note-icon-frame:before,.note-icon-italic:before,.note-icon-link:before,.note-icon-magic:before,.note-icon-mLine truncated
|
||||
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"summernote-bs4.js","sources":["../src/js/base/renderer.js","../src/js/bs4/ui.js","../src/js/base/core/func.js","../src/js/base/core/lists.js","../src/js/base/core/env.js","../src/js/base/core/dom.js","../src/js/base/summernote-en-US.js","../src/js/base/core/key.js","../src/js/base/core/range.js","../src/js/base/core/async.js","../src/js/base/editing/History.js","../src/js/base/editing/Style.js","../src/js/base/editing/Bullet.js","../src/js/base/editing/Typing.js","../src/js/base/editing/Table.js","../src/js/base/module/Editor.js","../src/js/base/module/Clipboard.js","../src/js/base/module/Dropzone.js","../src/js/base/module/Codeview.js","../src/js/base/module/Statusbar.js","../src/js/base/module/Fullscreen.js","../src/js/base/module/Handle.js","../src/js/base/module/AutoLink.js","../src/js/base/module/AutoSync.js","../src/js/base/module/Placeholder.js","../src/js/base/module/Buttons.js","../src/js/base/module/Toolbar.js","../src/js/base/module/LinkDialog.js","../src/js/base/module/LinkPopover.js","../src/js/base/module/ImageDialog.js","../src/js/base/module/ImagePopover.js","../src/js/base/module/TablePopover.js","../src/js/base/module/VideoDialog.js","../src/js/base/module/HelpDialog.js","../src/js/base/module/AirPopover.js","../src/js/base/module/HintPopover.js","../src/js/base/Context.js","../src/js/summernote.js","../src/js/bs4/settings.js"],"sourcesContent":["import $ from 'jquery';\n\nclass Renderer {\n constructor(markup, children, options, callbLine truncated
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
/*! Summernote v0.8.10 | (c) 2013- Alan Hong and other contributors | MIT license */
|
||||
|
||||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(require("jquery")):"function"==typeof define&&define.amd?define(["jquery"],e):e(t.jQuery)}(this,function(t){"use strict";t=t&&t.hasOwnProperty("default")?t.default:t;var e=function(){function e(t,e,o,n){this.markup=t,this.children=e,this.options=o,this.callback=n}return e.prototype.render=function(e){var o=t(this.markup);if(this.options&&this.options.contents&&o.html(this.options.contents),this.options&&this.options.className&&o.addClass(this.options.className),this.options&&this.options.data&&t.each(this.options.data,function(t,e){o.attr("data-"+t,e)}),this.options&&this.options.click&&o.on("click",this.options.click),this.children){var n=o.find(".note-children-container");this.children.forEach(function(t){t.render(n.length?n:o)})}return this.callback&&this.callback(o,this.options),this.options&&this.options.callback&&this.options.callback(o),e&&e.append(o),o},e}(),o=function(o,n){return function(){var i="object"==typeof arguments[1]?arguments[1]:arguments[0],r=t.isArray(arguments[0])?arguments[0]:[];return i&&i.children&&(r=i.children),new e(o,r,i,n)}},n=o('<div class="note-editor note-frame card"/>'),i=o('<div class="note-toolbar-wrapper"><div class="note-toolbar card-header" role="toolbar"></div></div>'),r=o('<div class="note-editing-area"/>'),s=o('<textarea class="note-codable" role="textbox" aria-multiline="true"/>'),a=o('<div class="note-editable card-block" contentEditable="true" role="textbox" ariLine truncated
|
||||
Reference in new issue
Block a user