limqsh/quinn-bbc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

博客变为论坛，修改编辑器为正常编辑器

Browse Source
This commit is contained in:
limqhz
2022-05-05 01:11:09 +08:00
parent f701baaf04
commit 69941133b8
28 changed files with 457 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
src/main/resources/templates/blog/editor.html
View File

@@ -3,9 +3,9 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>博客-Quinn</title>
<title>论坛-Quinn</title>
<link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="@{/editormd/css/editormd.css}"/>
<link rel="stylesheet" th:href="@{/wangedit/css/wang.style.css}"/>
<style>
.nav-underline .nav-link {
@@ -25,7 +25,7 @@
<div class="row">
<div class="col-md-12 blog-main">
<div class="col-md-12 order-md-1">
<h4 class="mb-3">编辑博客</h4>
<h4 class="mb-3">编辑论坛</h4>
<form class="needs-validation" th:action="@{/blog/editor}" method="post">
<!-- 隐藏域 -->
@@ -33,7 +33,7 @@
<div class="row">
<div class="col-md-10 mb-3">
<label for="firstName">博客标题</label>
<label for="firstName">论坛标题</label>
<input required th:value="${blog.getTitle()}" name="title" type="text" class="form-control" id="firstName">
</div>
@@ -48,9 +48,11 @@
</div>
<div class="col-md-12 mb-3">
<p>博客详情</p>
<p>论坛详情</p>
<div id="blog-content">
<textarea required name="content" th:text="${blog.getContent()}" id="content" style="display:none;" rows="3" class="form-control"> </textarea>
<div id="editor-toolbar"></div>
<div id="editor-text-area" style="height: 400px;border: 1px solid lightgrey"></div>
<textarea id="blog-textarea" name="content" th:text="${blog.getContent()}" style="display: none;"></textarea>
</div>
</div>
@@ -71,50 +73,59 @@
<script th:src="@{/js/toTop.js}"></script>
<script th:src="@{/js/jquery-ui.min.js}"></script>
<script th:src="@{/live/js/addlive2d.js}"></script>
<script th:src="@{/editormd/editormd.js}"></script>
<script type="text/javascript">
var testEditor;
$(function() {
testEditor = editormd("blog-content", {
width : "100%",
height : 500,
syncScrolling : "single",
path : "/editormd/lib/",
saveHTMLToTextarea : true, // 保存 HTML 到 Textarea
// [TOCM] [TOC] 自动生成目录
tocDropdown : false,
tocStartLevel : 1, // Parse beginning of H2, Default value 1
emoji: true,
tex : true, // 开启科学公式TeX语言支持，默认关闭
flowChart : true, // 开启流程图支持，默认关闭
sequenceDiagram : true, // 开启时序/序列图支持，默认关闭,
//图片上传
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "/question/write/file/upload",
onload : function() {
console.log('onload', this);
},
/*指定需要显示的功能按钮*/
toolbarIcons : function() {
return ["undo","redo","|",
"bold","del","italic","quote","ucwords","uppercase","lowercase","|",
"list-ul","list-ol","hr","|",
"link","reference-link","image",
"code-block","table","datetime","emoji","html-entities","|",
"search","watch","preview","fullscreen"]
},
onfullscreen : function() {
console.log("onfullscreen");
document.getElementsByClassName("navbar")[0].style.display="none";
},
onfullscreenExit : function() {
console.log("onfullscreenExit");
document.getElementsByClassName("navbar")[0].style.display="";
}
});
});
</script>
<script th:src="@{/wangedit/js/wang.min.js}"></script>
<script type="text/javascript">
const E = window.wangEditor
// 切换语言
const LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN'
E.i18nChangeLanguage(LANG)
const editorConfig = {
placeholder: '请输入...',
scroll: true, // 禁止编辑器滚动
MENU_CONF: {
uploadImage: {
fieldName: 'your-fileName',
base64LimitSize: 10 * 1024 * 1024 // 10M 以下插入 base64
}
},
onChange(editor) {
// console.log(editor.getHtml())
// $('#blog-textarea').value = editor.getHtml()
const content = editor.children
// const contentStr = JSON.stringify(content)
// document.getElementById('blog-textarea').value = contentStr
const html = editor.getHtml()
$('#blog-textarea').val(html)
}
}
// 先创建 editor
const editor = E.createEditor({
selector: '#editor-text-area',
// content: [],
html: $('#blog-textarea').val(),
config: editorConfig
})
// 创建 toolbar
const toolbar = E.createToolbar({
editor,
selector: '#editor-toolbar',
config: {
excludeKeys: 'fullScreen',
}
})
// 点击空白处 focus 编辑器
$('#editor-text-area').addEventListener('click', e => {
if (e.target.id === 'editor-text-area') {
editor.blur()
editor.focus(true) // focus 到末尾
}
})
</script>
</body>
</html>

4
src/main/resources/templates/blog/list.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>问答-Quinn</title>
<title>论坛-Quinn</title>
<link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
</head>
@@ -85,7 +85,7 @@
</div>
<div class="p-4 my-3 bg-white rounded">
<p class="mb-0"> 社区公约: <br> 禁止瞎水博客，内容尽量有实际意义，禁止任何形式的广告，违者暂停账号使用! 申请分类可以在Q群@小狂神 </p>
<p class="mb-0"> 社区公约: <br> 禁止瞎水论坛，内容尽量有实际意义，禁止任何形式的广告，违者暂停账号使用! 申请分类可以在Q群@小狂神 </p>
</div>
<div class="p-4 my-3 bg-white rounded">

2
src/main/resources/templates/blog/read.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>问答-Quinn</title>
<title>论坛-Quinn</title>
<link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
<style>

103
src/main/resources/templates/blog/write.html
View File

@@ -3,9 +3,9 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>问答-Quinn</title>
<title>论坛-Quinn</title>
<link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="@{/editormd/css/editormd.css}"/>
<link rel="stylesheet" th:href="@{/wangedit/css/wang.style.css}"/>
<style>
.nav-underline .nav-link {
@@ -51,7 +51,9 @@
<div class="col-md-12 mb-3">
<p>文章内容</p>
<div id="blog-content">
<textarea required name="content" id="content" style="display:none;" rows="3" class="form-control"> </textarea>
<div id="editor-toolbar"></div>
<div id="editor-text-area" style="height: 400px;border: 1px solid lightgrey"></div>
<textarea id="blog-textarea" name="content" style="display: none;"></textarea>
</div>
</div>
@@ -73,51 +75,58 @@
<script th:src="@{/js/jquery-ui.min.js}"></script>
<script th:src="@{/live/js/addlive2d.js}"></script>
<script th:src="@{/editormd/editormd.js}"></script>
<script th:src="@{/wangedit/js/wang.min.js}"></script>
<script type="text/javascript">
var testEditor;
$(function() {
testEditor = editormd("blog-content", {
width : "100%",
height : 500,
syncScrolling : "single",
path : "/editormd/lib/",
saveHTMLToTextarea : true, // 保存 HTML 到 Textarea
// [TOCM] [TOC] 自动生成目录
tocm : true,
tocContainer : "",
tocDropdown : false,
tocStartLevel : 1, // Parse beginning of H2, Default value 1
emoji: true,
tex : true, // 开启科学公式TeX语言支持，默认关闭
flowChart : true, // 开启流程图支持，默认关闭
sequenceDiagram : true, // 开启时序/序列图支持，默认关闭,
//图片上传
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "/question/write/file/upload",
onload : function() {
console.log('onload', this);
},
/*指定需要显示的功能按钮*/
toolbarIcons : function() {
return ["undo","redo","|",
"bold","del","italic","quote","ucwords","uppercase","lowercase","|",
"list-ul","list-ol","hr","|",
"link","reference-link","image",
"code-block","table","datetime","emoji","html-entities","|",
"search","watch","preview","fullscreen"]
},
onfullscreen : function() {
console.log("onfullscreen");
document.getElementsByClassName("navbar")[0].style.display="none";
},
onfullscreenExit : function() {
console.log("onfullscreenExit");
document.getElementsByClassName("navbar")[0].style.display="";
}
});
});
const E = window.wangEditor
// 切换语言
const LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN'
E.i18nChangeLanguage(LANG)
const editorConfig = {
placeholder: '请输入...',
scroll: true, // 禁止编辑器滚动
MENU_CONF: {
uploadImage: {
fieldName: 'your-fileName',
base64LimitSize: 10 * 1024 * 1024 // 10M 以下插入 base64
}
},
onChange(editor) {
// console.log(editor.getHtml())
// $('#blog-textarea').value = editor.getHtml()
const content = editor.children
// const contentStr = JSON.stringify(content)
// document.getElementById('blog-textarea').value = contentStr
const html = editor.getHtml()
$('#blog-textarea').val(html)
}
}
// 先创建 editor
const editor = E.createEditor({
selector: '#editor-text-area',
content: [],
// html: '',
config: editorConfig
})
// 创建 toolbar
const toolbar = E.createToolbar({
editor,
selector: '#editor-toolbar',
config: {
excludeKeys: 'fullScreen',
}
})
// 点击空白处 focus 编辑器
$('#editor-text-area').addEventListener('click', e => {
if (e.target.id === 'editor-text-area') {
editor.blur()
editor.focus(true) // focus 到末尾
}
})
</script>
</body>

2
src/main/resources/templates/common/header.html
View File

@@ -24,7 +24,7 @@
<a class="nav-link" th:href="@{/question}">问答 </a>
</li>
<li th:class="${activeUrl=='blog'?'nav-item active':'nav-item'}">
<a class="nav-link" th:href="@{/blog}">博客 </a>
<a class="nav-link" th:href="@{/blog}">论坛 </a>
</li>
<li th:class="${activeUrl=='hotspot'?'nav-item active':'nav-item'}">
<a class="nav-link" th:href="@{/hotspot}">热门资源 </a>

4
src/main/resources/templates/user/index.html
View File

@@ -51,7 +51,7 @@
<table class="table">
<thead id="table-title">
<tr>
<th scope="col">博客</th>
<th scope="col">论坛</th>
<th scope="col">问题</th>
<th scope="col">回复</th>
</tr>
@@ -83,7 +83,7 @@
<path fill-rule="evenodd" d="M1.92.506a.5.5 0 0 1 .434.14L3 1.293l.646-.647a.5.5 0 0 1 .708 0L5 1.293l.646-.647a.5.5 0 0 1 .708 0L7 1.293l.646-.647a.5.5 0 0 1 .708 0L9 1.293l.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .801.13l.5 1A.5.5 0 0 1 15 2v13h-1V2.118l-.137-.274-.51.51a.5.5 0 0 1-.707 0L12 1.707l-.646.647a.5.5 0 0 1-.708 0L10 1.707l-.646.647a.5.5 0 0 1-.708 0L8 1.707l-.646.647a.5.5 0 0 1-.708 0L6 1.707l-.646.647a.5.5 0 0 1-.708 0L4 1.707l-.646.647a.5.5 0 0 1-.708 0l-.509-.51L2 2.118V15H1V2a.5.5 0 0 1 .053-.224l.5-1a.5.5 0 0 1 .367-.27zM0 15.5a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5z"/>
<path fill-rule="evenodd" d="M3 4.5a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm8-8a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5z"/>
</svg>
博客
论坛
</a>
<a class="nav-link"
th:href="@{'/user/question/'+${session.loginUser.getUid()}+'/1/10'}">

4
src/main/resources/templates/user/user-comment.html
View File

@@ -39,7 +39,7 @@
<path fill-rule="evenodd" d="M1.92.506a.5.5 0 0 1 .434.14L3 1.293l.646-.647a.5.5 0 0 1 .708 0L5 1.293l.646-.647a.5.5 0 0 1 .708 0L7 1.293l.646-.647a.5.5 0 0 1 .708 0L9 1.293l.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .801.13l.5 1A.5.5 0 0 1 15 2v13h-1V2.118l-.137-.274-.51.51a.5.5 0 0 1-.707 0L12 1.707l-.646.647a.5.5 0 0 1-.708 0L10 1.707l-.646.647a.5.5 0 0 1-.708 0L8 1.707l-.646.647a.5.5 0 0 1-.708 0L6 1.707l-.646.647a.5.5 0 0 1-.708 0L4 1.707l-.646.647a.5.5 0 0 1-.708 0l-.509-.51L2 2.118V15H1V2a.5.5 0 0 1 .053-.224l.5-1a.5.5 0 0 1 .367-.27zM0 15.5a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5z"/>
<path fill-rule="evenodd" d="M3 4.5a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm8-8a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5z"/>
</svg>
博客
论坛
</a>
<a class="nav-link"
th:href="@{'/user/question/'+${session.loginUser.getUid()}+'/1/10'}">
@@ -69,7 +69,7 @@
class="text-dark font-weight-bold text-decoration-none d-block">
</a>
<!-- 类型 -->
<span th:text="${comment.getTopicCategory()==1?'博客':'问答'}"
<span th:text="${comment.getTopicCategory()==1?'论坛':'问答'}"
th:class="${comment.getTopicCategory()==1?'badge badge-success':'badge badge-primary'}">
</span>
<!-- 时间 -->

2
src/main/resources/templates/user/user-question.html
View File

@@ -33,7 +33,7 @@
<path fill-rule="evenodd" d="M1.92.506a.5.5 0 0 1 .434.14L3 1.293l.646-.647a.5.5 0 0 1 .708 0L5 1.293l.646-.647a.5.5 0 0 1 .708 0L7 1.293l.646-.647a.5.5 0 0 1 .708 0L9 1.293l.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .801.13l.5 1A.5.5 0 0 1 15 2v13h-1V2.118l-.137-.274-.51.51a.5.5 0 0 1-.707 0L12 1.707l-.646.647a.5.5 0 0 1-.708 0L10 1.707l-.646.647a.5.5 0 0 1-.708 0L8 1.707l-.646.647a.5.5 0 0 1-.708 0L6 1.707l-.646.647a.5.5 0 0 1-.708 0L4 1.707l-.646.647a.5.5 0 0 1-.708 0l-.509-.51L2 2.118V15H1V2a.5.5 0 0 1 .053-.224l.5-1a.5.5 0 0 1 .367-.27zM0 15.5a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5z"/>
<path fill-rule="evenodd" d="M3 4.5a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm8-8a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5z"/>
</svg>
博客
论坛
</a>
<a class="nav-link active"
th:href="@{'/user/question/'+${session.loginUser.getUid()}+'/1/10'}">