Enhance EasyMDE editor toolbar with Font Awesome icons and titles
This commit is contained in:
@@ -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',
|
||||||
},
|
},
|
||||||
|
|
||||||
],
|
],
|
||||||
|
|||||||
Reference in New Issue
Block a user