muzi
/
apeblog
mirror of https://github.com/1099438829/apeblog
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

更新编辑器为wangEditer 

主题支持代码高亮和复制
This commit is contained in:
yumo 2023-12-31 12:59:27 +08:00
parent 759fe7fa06
commit cc15e83a70
9 changed files with 92 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
app/admin/view/article/add.html
View File

@ -6,7 +6,7 @@
<!--标签插件-->
<link rel="stylesheet" href="/static/admin/js/jquery-tags-input/jquery.tagsinput.min.css">
<!--富文本输入框-->
<link rel="stylesheet" href="/static/admin/js/summernote/summernote.min.css">
<link href="https://cdn.staticfile.org/wangeditor5/5.1.23/css/style.min.css" rel="stylesheet">
</head>
<body>
<div class="row">
@ -74,8 +74,12 @@
placeholder="请输入标签">
</div>
<div class="form-group col-md-12">
<label for="content">文章内容</label>
<textarea id="content" name="content" data-provide="summernote" data-toolbar="full"></textarea>
<label for="editor-text-area">文章内容</label>
<div style="border: 1px solid #ccc;">
<div id="editor-toolbar" style="border-bottom: 1px solid #ccc;"></div>
<div id="editor-text-area" style="height: 500px"></div>
</div>
<textarea id="content" name="content" style="display: none;"></textarea>
</div>
<div class="form-group col-md-12">
<button type="submit" class="btn btn-primary ajax-post" target-form="add-form">立即提交
@ -155,60 +159,45 @@
<!--select2-->
<script type="text/javascript" src="/static/admin/js/select2.min.js"></script>
<!--富文本输入框-->
<script type="text/javascript" src="/static/admin/js/summernote/summernote.min.js"></script>
<script type="text/javascript" src="/static/admin/js/summernote/lang/summernote-zh-CN.min.js"></script>
<script src="https://cdn.staticfile.org/wangeditor5/5.1.23/index.js"></script>
<!--标签-->
<script src="/static/admin/js/jquery-tags-input/jquery.tagsinput.min.js"></script>
<script>
$(function () {
$('#tag').select2();
});
$(document).ready(function(){
$('[data-provide="summernote"]').each(function() {
var options = {
dialogsInBody: true,
lang: 'zh-CN',
dialogsFade: true,
height:400
};
var config = {};
$.each( $(this).data(), function(key, value){
key = key.replace(/-([a-z])/g, function(x){return x[1].toUpperCase();});
if ( key == 'provide' ) {
return;
var E = window.wangEditor
// 切换语言
var LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN'
E.i18nChangeLanguage(LANG)
window.editor = E.createEditor({
selector: '#editor-text-area',
html: '<p><br></p>',
config: {
placeholder: '请输入...',
MENU_CONF: {
uploadImage: {
fieldName: 'your-fileName',
base64LimitSize: 10 * 1024 * 1024 // 10M 以下插入 base64
}
},
onChange(editor) {
let content = editor.getHtml()
console.log('editor content', content)
// 也可以同步到 <textarea>
$("#content").val(content)
}
config[key] = value;
});
}
})
options = $.extend(options, config);
options.toolbar = [
// [groupName, [list of button]]
['para_style', ['style']],
['style', ['bold', 'italic', 'underline', 'clear']],
['font', ['strikethrough', 'superscript', 'subscript']],
['fontsize', ['fontname', 'fontsize', 'height']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph', 'hr']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['do', ['undo', 'redo']],
['misc', ['fullscreen', 'codeview', 'help']]
];
$(this).summernote(options);
});
window.toolbar = E.createToolbar({
editor,
selector: '#editor-toolbar',
config: {}
})
$(document).on('click', '[data-summernote-edit]', function(){
var target = $(this).data('summernote-edit');
$(target).summernote({focus: true});
});
$(document).on('click', '[data-summernote-save]', function(){
var target = $(this).data('summernote-save');
var markup = $(target).summernote('code');
$(target).summernote('destroy');
alert('修改完成');
});
});
/**

83
app/admin/view/article/edit.html
View File

@ -6,7 +6,7 @@
<!--标签插件-->
<link rel="stylesheet" href="/static/admin/js/jquery-tags-input/jquery.tagsinput.min.css">
<!--富文本输入框-->
<link rel="stylesheet" href="/static/admin/js/summernote/summernote.min.css">
<link href="https://cdn.staticfile.org/wangeditor5/5.1.23/css/style.min.css" rel="stylesheet">
</head>
<body>
<div class="row">
@ -93,8 +93,12 @@
placeholder="请输入标签" value="{$info.tags}">
</div>
<div class="form-group col-md-12">
<label for="content">文章内容</label>
<textarea id="content" name="content" data-provide="summernote" data-toolbar="full">{$info.content}</textarea>
<label for="editor-text-area">文章内容</label>
<div style="border: 1px solid #ccc;">
<div id="editor-toolbar" style="border-bottom: 1px solid #ccc;"></div>
<div id="editor-text-area" style="height: 500px"></div>
</div>
<textarea id="content" name="content" style="display: none;">{$info.content}</textarea>
</div>
<div class="form-group col-md-12">
<button type="submit" class="btn btn-primary ajax-post" target-form="add-form">立即提交
@ -175,8 +179,7 @@
<!--select2-->
<script type="text/javascript" src="/static/admin/js/select2.min.js"></script>
<!--富文本输入框-->
<script type="text/javascript" src="/static/admin/js/summernote/summernote.min.js"></script>
<script type="text/javascript" src="/static/admin/js/summernote/lang/summernote-zh-CN.min.js"></script>
<script src="https://cdn.staticfile.org/wangeditor5/5.1.23/index.js"></script>
<!--标签-->
<script src="/static/admin/js/jquery-tags-input/jquery.tagsinput.min.js"></script>
<script>
@ -184,51 +187,37 @@
$('#tag').select2();
});
$(document).ready(function(){
$('[data-provide="summernote"]').each(function() {
var options = {
dialogsInBody: true,
lang: 'zh-CN',
dialogsFade: true,
height:400
};
var config = {};
$.each( $(this).data(), function(key, value){
key = key.replace(/-([a-z])/g, function(x){return x[1].toUpperCase();});
if ( key == 'provide' ) {
return;
var E = window.wangEditor
// 切换语言
var LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN'
E.i18nChangeLanguage(LANG)
//需要判断是否含有html标签
window.editor = E.createEditor({
selector: '#editor-text-area',
html: $('#content').val(), // 从 editor.getHtml() 获取的 html 内容
config: {
placeholder: '请输入...',
MENU_CONF: {
uploadImage: {
fieldName: 'your-fileName',
base64LimitSize: 10 * 1024 * 1024 // 10M 以下插入 base64
}
},
onChange(editor) {
let content = editor.getHtml()
console.log('editor content', content)
// 也可以同步到 <textarea>
$("#content").val(content)
}
config[key] = value;
});
}
})
options = $.extend(options, config);
options.toolbar = [
// [groupName, [list of button]]
['para_style', ['style']],
['style', ['bold', 'italic', 'underline', 'clear']],
['font', ['strikethrough', 'superscript', 'subscript']],
['fontsize', ['fontname', 'fontsize', 'height']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph', 'hr']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['do', ['undo', 'redo']],
['misc', ['fullscreen', 'codeview', 'help']]
];
$(this).summernote(options);
});
window.toolbar = E.createToolbar({
editor,
selector: '#editor-toolbar',
config: {}
})
$(document).on('click', '[data-summernote-edit]', function(){
var target = $(this).data('summernote-edit');
$(target).summernote({focus: true});
});
$(document).on('click', '[data-summernote-save]', function(){
var target = $(this).data('summernote-save');
var markup = $(target).summernote('code');
$(target).summernote('destroy');
alert('修改完成');
});
});
/**

4
public/template/default/pc/article/detail.html
View File

@ -317,11 +317,11 @@
</main>
{include file="public/footer"/}
</div>
<script src="__LIB__/highlight/highlight.min.js"></script>
<script src="__LIB__/highlight/init.js"></script>
<script src="__JS__/post-content.js"></script>
<script src="__JS__/clipboard.min.js"></script>
<script src="__LIB__/fancybox/jquery.fancybox.min.js"></script>
<script src="__LIB__/fancybox/init.js"></script>
<script src="__LIB__/highlight/highlight.min.js"></script>
<script src="__JS__/post-content.js"></script>
</body>
</html>

6
public/template/default/pc/css/corepress-dark.css
View File

@ -69,14 +69,14 @@
}
pre.corepress-code-pre code {
pre.ape-code-pre code {
position: relative;
max-height: 500px;
overflow: auto;
padding: 10px 20px;
}
.corepress-code-pre:hover .code-bar {
.ape-code-pre:hover .code-bar {
visibility: visible;
opacity: 1;
}
@ -105,7 +105,7 @@ pre.corepress-code-pre code {
cursor: pointer;
}
pre[class='corepress-code-pre'] {
pre[class='ape-code-pre'] {
position: relative;
font-size: 14px;
margin: 0;

2
public/template/default/pc/css/dark.css
View File

File diff suppressed because one or more lines are too long

2
public/template/default/pc/css/post-content.css
View File

File diff suppressed because one or more lines are too long

12
public/template/default/pc/lib/highlight/init.js
View File

@ -1,10 +1,12 @@
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('.corepress-code-pre code').forEach((block) => {
hljs.highlightBlock(block);
document.querySelectorAll('pre').forEach((pre) => {
pre.classList.add('ape-code-pre');
pre.querySelectorAll('code').forEach((block) => {
hljs.highlightBlock(block);
});
});
});
$('.corepress-code-pre').append('<div class="code-bar"><i class="fal fa-clone code-bar-btn-copy-fonticon" title="复制"></i></div>')
$(".corepress-code-pre code").each(function () {
$('pre').append('<div class="code-bar"><i class="fal fa-clone code-bar-btn-copy-fonticon" title="复制"></i></div>')
$("pre code").each(function () {
$(this).html("<ul class='hijs-line-number'><li>" + $(this).html().replace(/\n/g, "\n</li><li>") + "\n</li></ul>");
});

6
public/template/default/pc/lib/highlight/style/corepress-dark.css
View File

@ -68,7 +68,7 @@
}
pre.corepress-code-pre code {
pre.ape-code-pre code {
position: relative;
border-radius: 5px;
max-height: 500px;
@ -76,7 +76,7 @@ pre.corepress-code-pre code {
padding: 10px 20px;
}
.corepress-code-pre:hover .code-bar {
.ape-code-pre:hover .code-bar {
visibility: visible;
opacity: 1;
}
@ -103,7 +103,7 @@ pre.corepress-code-pre code {
color: #fff;
cursor: pointer;
}
pre[class='corepress-code-pre'] {
pre[class='ape-code-pre'] {
position: relative;
font-size: 14px;
border-radius: 4px;

6
public/template/default/pc/lib/highlight/style/corepress.css
View File

@ -52,7 +52,7 @@
}
pre.corepress-code-pre code {
pre.ape-code-pre code {
position: relative;
border-radius: 5px;
background: #fafafa;
@ -62,7 +62,7 @@ pre.corepress-code-pre code {
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace, sans-serif;
}
.corepress-code-pre:hover .code-bar {
.ape-code-pre:hover .code-bar {
visibility: visible;
opacity: 1;
}
@ -88,7 +88,7 @@ pre.corepress-code-pre code {
.code-bar-btn-copy-fonticon {
cursor: pointer;
}
pre[class='corepress-code-pre'] {
pre[class='ape-code-pre'] {
position: relative;
font-size: 14px;
border-radius: 4px;