baoshuo/S2OJ
baoshuo/S2OJ
1
1
Fork 0
mirror of https://github.com/renbaoshuo/S2OJ.git synced 2024-09-16 18:55:19 +00:00
Code Issues Actions Packages Releases Activity

refactor(blog-editor): ui improvements

Browse Source
This commit is contained in:
Baoshuo Ren 2023-02-28 17:32:22 +08:00
parent 691b0a0dcb
commit a08a94304f
Signed by: baoshuo
GPG Key ID: 00CB9680AB29F51A
4 changed files with 41 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/app/models/UOJBlogEditor.php
View File

@ -189,6 +189,7 @@ class UOJBlogEditor {
echoUOJPageHeader('博客预览', [
'ShowPageHeader' => false,
'REQUIRE_LIB' => $req_lib,
'PageBodyClass' => 'py-3',
]);
echo '<article class="markdown-body">';

13
web/css/blog-editor.css
View File

@ -1,16 +1,3 @@
.blog-content-md-editor {
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.blog-content-md-editor-toolbar {
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1)));
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
padding: 5px 5px 5px 5px;
}
.blog-content-md-editor-in {
width: 100%;
height: 500px;

49
web/js/blog-editor/blog-editor.js
View File

@ -22,13 +22,17 @@ function blog_editor_init(name, editor_config) {
var preview_btn = $('<button type="button" class="btn btn-secondary btn-sm"><i class="bi bi-eye"></i></button>');
var bold_btn = $('<button type="button" class="btn btn-secondary btn-sm ml-2"><i class="bi bi-type-bold"></i></button>');
var italic_btn = $('<button type="button" class="btn btn-secondary btn-sm"><i class="bi bi-type-italic"></i></button>');
var strike_btn = $('<button type="button" class="btn btn-secondary btn-sm"><i class="bi bi-type-strikethrough"></i></button>');
var divider_btn = $('<button type="button" class="btn btn-secondary btn-sm"><i class="bi bi-dash"></i></button>');
bootstrap.Tooltip.jQueryInterface.call(save_btn, { container: 'body', title: '保存 (Ctrl-S)' });
bootstrap.Tooltip.jQueryInterface.call(preview_btn, { container: 'body', title: '预览 (Ctrl-D)' });
bootstrap.Tooltip.jQueryInterface.call(bold_btn, { container: 'body', title: '粗体 (Ctrl-B)' });
bootstrap.Tooltip.jQueryInterface.call(italic_btn, { container: 'body', title: '斜体 (Ctrl-I)' });
bootstrap.Tooltip.jQueryInterface.call(strike_btn, { container: 'body', title: '删除线 (Alt-S)' });
bootstrap.Tooltip.jQueryInterface.call(divider_btn, { container: 'body', title: '分割线 (Alt-D)' });
var all_btn = [save_btn, preview_btn, bold_btn, italic_btn];
var all_btn = [save_btn, preview_btn, bold_btn, italic_btn, strike_btn, divider_btn];
// init toolbar
var toolbar = $('<div class="btn-toolbar"></div>');
@ -39,6 +43,8 @@ function blog_editor_init(name, editor_config) {
toolbar.append($('<div class="btn-group"></div>')
.append(bold_btn)
.append(italic_btn)
.append(strike_btn)
.append(divider_btn)
);
function set_saved(val) {
@ -81,11 +87,11 @@ function blog_editor_init(name, editor_config) {
// init editor
if (input_content_md[0]) {
div_container_editor.empty();
div_container_editor.wrap('<div class="blog-content-md-editor"></div>');
div_container_editor.wrap('<div class="blog-content-md-editor border rounded" />');
var blog_contend_md_editor = div_container_editor.parent();
blog_contend_md_editor.prepend($('<div class="blog-content-md-editor-toolbar"></div>').append(toolbar));
div_container_editor.wrap('<div class="blog-content-md-editor-in border"></div>');
div_container_editor.append($('<div class="border d-flex justify-content-center align-items-center" style="width: 100%; height: 500px;" />').append('<div class="spinner-border text-muted" style="width: 3rem; height: 3rem;" />'));
blog_contend_md_editor.prepend($('<div class="blog-content-md-editor-toolbar bg-secondary-subtle px-2 py-1 border-bottom rounded-top" />').append(toolbar));
div_container_editor.wrap('<div class="blog-content-md-editor-in rounded-bottom overflow-hidden" />');
div_container_editor.append($('<div class="d-flex justify-content-center align-items-center" style="width: 100%; height: 500px;" />').append('<div class="spinner-border text-muted" style="width: 3rem; height: 3rem;" />'));
require_monaco({
markdown: true,
@ -122,6 +128,16 @@ function blog_editor_init(name, editor_config) {
monaco_editor_instance.focus();
});
strike_btn.click(function() {
monaco_editor_instance.trigger('', 'markdown.extension.editing.toggleStrikethrough');
monaco_editor_instance.focus();
});
divider_btn.click(function() {
monaco_editor_instance.trigger('keyboard', 'type', { text: "\n---\n" });
monaco_editor_instance.focus();
});
monaco_editor_instance.addAction({
id: 'save',
label: 'Save',
@ -136,15 +152,28 @@ function blog_editor_init(name, editor_config) {
});
monaco_editor_instance.addAction({
id: 'italic',
label: 'Italic',
id: 'preview',
label: 'Preview',
keybindings: [
monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyI,
monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyD,
],
precondition: null,
keybindingContext: null,
run: function(ed) {
italic_btn.click();
preview_btn.click();
},
});
monaco_editor_instance.addAction({
id: 'divider',
label: 'Divider',
keybindings: [
monaco.KeyMod.Alt | monaco.KeyCode.KeyD,
],
precondition: null,
keybindingContext: null,
run: function(ed) {
divider_btn.click();
},
});

20
web/js/uoj.js
View File

@ -667,24 +667,6 @@ function get_monaco_mode(lang) {
}
// auto save
function autosave_locally(interval, name, target) {
if (typeof(Storage) === "undefined") {
console.log('autosave_locally: Sorry! No Web Storage support..');
return;
}
var url = window.location.href;
var hp = url.indexOf('#');
var uri = hp == -1 ? url : url.substr(0, hp);
var full_name = name + '@' + uri;
target.val(localStorage.getItem(full_name));
var save = function() {
localStorage.setItem(full_name, target.val());
setTimeout(save, interval);
};
setTimeout(save, interval);
}
function autosave_locally_monaco(interval, name, monaco_instance) {
if (typeof(Storage) === "undefined") {
console.log('autosave_locally_monaco: Sorry! No Web Storage support..');
@ -762,7 +744,7 @@ $.fn.source_code_form_group = function(name, text, langs_options_html) {
monaco_editor_instance = monaco.editor.create(div_editor[0], {
language: mode,
automaticLayout: true,
fontSize: "14px",
fontSize: "16px",
});
$('#' + spinner_id).css('display', 'none !important');