博客变为论坛，修改编辑器为正常编辑器
This commit is contained in:
limqhz
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user