更新编辑器为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

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/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> </head>
<body> <body>
<div class="row"> <div class="row">
@ -74,8 +74,12 @@
placeholder="请输入标签"> placeholder="请输入标签">
</div> </div>
<div class="form-group col-md-12"> <div class="form-group col-md-12">
<label for="content">文章内容</label> <label for="editor-text-area">文章内容</label>
<textarea id="content" name="content" data-provide="summernote" data-toolbar="full"></textarea> <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>
<div class="form-group col-md-12"> <div class="form-group col-md-12">
<button type="submit" class="btn btn-primary ajax-post" target-form="add-form">立即提交 <button type="submit" class="btn btn-primary ajax-post" target-form="add-form">立即提交
@ -155,60 +159,45 @@
<!--select2--> <!--select2-->
<script type="text/javascript" src="/static/admin/js/select2.min.js"></script> <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 src="https://cdn.staticfile.org/wangeditor5/5.1.23/index.js"></script>
<script type="text/javascript" src="/static/admin/js/summernote/lang/summernote-zh-CN.min.js"></script>
<!--标签--> <!--标签-->
<script src="/static/admin/js/jquery-tags-input/jquery.tagsinput.min.js"></script> <script src="/static/admin/js/jquery-tags-input/jquery.tagsinput.min.js"></script>
<script> <script>
$(function () { $(function () {
$('#tag').select2(); $('#tag').select2();
}); });
$(document).ready(function(){ $(document).ready(function(){
$('[data-provide="summernote"]').each(function() { var E = window.wangEditor
var options = { // 切换语言
dialogsInBody: true, var LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN'
lang: 'zh-CN', E.i18nChangeLanguage(LANG)
dialogsFade: true, window.editor = E.createEditor({
height:400 selector: '#editor-text-area',
}; html: '<p><br></p>',
var config = {}; config: {
$.each( $(this).data(), function(key, value){ placeholder: '请输入...',
key = key.replace(/-([a-z])/g, function(x){return x[1].toUpperCase();}); MENU_CONF: {
if ( key == 'provide' ) { uploadImage: {
return; 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); window.toolbar = E.createToolbar({
options.toolbar = [ editor,
// [groupName, [list of button]] selector: '#editor-toolbar',
['para_style', ['style']], config: {}
['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);
});
$(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('修改完成');
});
}); });
/** /**

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/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> </head>
<body> <body>
<div class="row"> <div class="row">
@ -93,8 +93,12 @@
placeholder="请输入标签" value="{$info.tags}"> placeholder="请输入标签" value="{$info.tags}">
</div> </div>
<div class="form-group col-md-12"> <div class="form-group col-md-12">
<label for="content">文章内容</label> <label for="editor-text-area">文章内容</label>
<textarea id="content" name="content" data-provide="summernote" data-toolbar="full">{$info.content}</textarea> <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>
<div class="form-group col-md-12"> <div class="form-group col-md-12">
<button type="submit" class="btn btn-primary ajax-post" target-form="add-form">立即提交 <button type="submit" class="btn btn-primary ajax-post" target-form="add-form">立即提交
@ -175,8 +179,7 @@
<!--select2--> <!--select2-->
<script type="text/javascript" src="/static/admin/js/select2.min.js"></script> <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 src="https://cdn.staticfile.org/wangeditor5/5.1.23/index.js"></script>
<script type="text/javascript" src="/static/admin/js/summernote/lang/summernote-zh-CN.min.js"></script>
<!--标签--> <!--标签-->
<script src="/static/admin/js/jquery-tags-input/jquery.tagsinput.min.js"></script> <script src="/static/admin/js/jquery-tags-input/jquery.tagsinput.min.js"></script>
<script> <script>
@ -184,51 +187,37 @@
$('#tag').select2(); $('#tag').select2();
}); });
$(document).ready(function(){ $(document).ready(function(){
$('[data-provide="summernote"]').each(function() { var E = window.wangEditor
var options = { // 切换语言
dialogsInBody: true, var LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN'
lang: 'zh-CN', E.i18nChangeLanguage(LANG)
dialogsFade: true, //需要判断是否含有html标签
height:400 window.editor = E.createEditor({
}; selector: '#editor-text-area',
var config = {}; html: $('#content').val(), // 从 editor.getHtml() 获取的 html 内容
$.each( $(this).data(), function(key, value){ config: {
key = key.replace(/-([a-z])/g, function(x){return x[1].toUpperCase();}); placeholder: '请输入...',
if ( key == 'provide' ) { MENU_CONF: {
return; 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); window.toolbar = E.createToolbar({
options.toolbar = [ editor,
// [groupName, [list of button]] selector: '#editor-toolbar',
['para_style', ['style']], config: {}
['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);
});
$(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('修改完成');
});
}); });
/** /**

View File

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

View File

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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,10 +1,12 @@
document.addEventListener('DOMContentLoaded', (event) => { document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('.corepress-code-pre code').forEach((block) => { document.querySelectorAll('pre').forEach((pre) => {
hljs.highlightBlock(block); 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>') $('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 code").each(function () {
$(this).html("<ul class='hijs-line-number'><li>" + $(this).html().replace(/\n/g, "\n</li><li>") + "\n</li></ul>"); $(this).html("<ul class='hijs-line-number'><li>" + $(this).html().replace(/\n/g, "\n</li><li>") + "\n</li></ul>");
}); });

View File

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

View File

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