Enhance EasyMDE editor toolbar with Font Awesome icons and titles

This commit is contained in:
2025-12-07 06:40:09 -05:00
parent 225a9baf6f
commit 355f435fa1

View File

@@ -1,5 +1,6 @@
@assets @assets
<link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css"> <link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script> <script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
@endassets @endassets
@script @script
@@ -17,40 +18,61 @@
toolbar: [{ toolbar: [{
name: 'bold', name: 'bold',
action: EasyMDE.toggleBold, action: EasyMDE.toggleBold,
className: 'fa fa-bold',
title: 'Bold',
}, { }, {
name: 'italic', name: 'italic',
action: EasyMDE.toggleItalic, action: EasyMDE.toggleItalic,
className: 'fa fa-italic',
title: 'Italic',
}, { }, {
name: 'strikethrough', name: 'strikethrough',
action: EasyMDE.toggleStrikethrough, action: EasyMDE.toggleStrikethrough,
className: 'fa fa-strikethrough',
title: 'Strikethrough',
}, { }, {
name: 'link', name: 'link',
action: EasyMDE.drawLink, action: EasyMDE.drawLink,
className: 'fa fa-link',
title: 'Create Link',
}, '|', }, '|',
{ {
name: 'heading', name: 'heading',
action: EasyMDE.toggleHeadingSmaller, action: EasyMDE.toggleHeadingSmaller,
className: 'fa fa-heading',
title: 'Heading',
}, '|', }, '|',
{ {
name: 'quote', name: 'quote',
action: EasyMDE.toggleBlockquote, action: EasyMDE.toggleBlockquote,
className: 'fa fa-quote-left',
title: 'Quote',
}, { }, {
name: 'code', name: 'code',
action: EasyMDE.toggleCodeBlock, action: EasyMDE.toggleCodeBlock,
className: 'fa fa-code',
title: 'Code',
}, { }, {
name: 'unordered-list', name: 'unordered-list',
action: EasyMDE.toggleUnorderedList, action: EasyMDE.toggleUnorderedList,
className: 'fa fa-list-ul',
title: 'Unordered List',
}, { }, {
name: 'ordered-list', name: 'ordered-list',
action: EasyMDE.toggleOrderedList, action: EasyMDE.toggleOrderedList,
className: 'fa fa-list-ol',
title: 'Ordered List',
}, '|', }, '|',
{ {
name: 'undo', name: 'undo',
action: EasyMDE.undo, action: EasyMDE.undo,
className: 'fa fa-rotate-left',
title: 'Undo',
}, { }, {
name: 'redo', name: 'redo',
action: EasyMDE.redo, action: EasyMDE.redo,
className: 'fa fa-rotate-right',
title: 'Redo',
}, },
], ],