Netsyms/easy-markdown-editor
2
0
Fork 0
mirror of https://github.com/Ionaru/easy-markdown-editor synced 2025-07-05 17:14:27 -06:00
Code Issues Releases Wiki Activity

Add toolbarButtonClassPrefix option

Browse Source 
Fixes #493
This commit is contained in:
Jeroen akkerman 2022-09-17 23:07:24 +02:00
parent 84aafddd92
commit d26b4e399b
9 changed files with 117 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
CHANGELOG.md
View File

@ -4,7 +4,9 @@ All notable changes to EasyMDE will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
[//]: # (## [Unreleased]) ## [Unreleased]
### Added
- `toolbarButtonClassPrefix` option to resolve conflicts with Bootstrap classes ([#493]).
## [2.17.0] - 2022-08-20 ## [2.17.0] - 2022-08-20
### Added ### Added
@ -254,6 +256,7 @@ Project forked from [SimpleMDE](https://github.com/sparksuite/simplemde-markdown
- Cursor not always showing in "text" mode over the edit field - Cursor not always showing in "text" mode over the edit field
<!-- Linked issues --> <!-- Linked issues -->
[#493]: https://github.com/Ionaru/easy-markdown-editor/issues/493
[#478]: https://github.com/Ionaru/easy-markdown-editor/issues/478 [#478]: https://github.com/Ionaru/easy-markdown-editor/issues/478
[#399]: https://github.com/Ionaru/easy-markdown-editor/issues/399 [#399]: https://github.com/Ionaru/easy-markdown-editor/issues/399
[#252]: https://github.com/Ionaru/easy-markdown-editor/issues/252 [#252]: https://github.com/Ionaru/easy-markdown-editor/issues/252

2
README.md
View File

@ -206,6 +206,7 @@ easyMDE.value('New input for **EasyMDE**');
- **theme**: Override the theme. Defaults to `easymde`. - **theme**: Override the theme. Defaults to `easymde`.
- **toolbar**: If set to `false`, hide the toolbar. Defaults to the [array of icons](#toolbar-icons). - **toolbar**: If set to `false`, hide the toolbar. Defaults to the [array of icons](#toolbar-icons).
- **toolbarTips**: If set to `false`, disable toolbar button tips. Defaults to `true`. - **toolbarTips**: If set to `false`, disable toolbar button tips. Defaults to `true`.
- **toolbarButtonClassPrefix**: Adds a prefix to the toolbar button classes when set. For example, a value of `"mde"` results in `"mde-bold"` for the Bold button.
- **direction**: `rtl` or `ltr`. Changes text direction to support right-to-left languages. Defaults to `ltr`. - **direction**: `rtl` or `ltr`. Changes text direction to support right-to-left languages. Defaults to `ltr`.
@ -311,6 +312,7 @@ const editor = new EasyMDE({
tabSize: 4, tabSize: 4,
toolbar: false, toolbar: false,
toolbarTips: false, toolbarTips: false,
toolbarButtonClassPrefix: "mde",
}); });
``` ```

17
cypress/e2e/3-class-prefix/class-prefix.cy.js Normal file
View File

@ -0,0 +1,17 @@
/// <reference types="cypress" />
describe('Default editor', () => {
it('table', () => {
cy.visit(__dirname + '/index-no-prefix.html');
cy.get('button.table').should('be.visible');
cy.get('button.table').invoke('outerWidth').should('not.equal', 30);
});
it('loads the editor with default settings', () => {
cy.visit(__dirname + '/index.html');
cy.get('button.mde-table').should('be.visible');
cy.get('button.mde-table').invoke('outerWidth').should('equal', 30);
});
});

21
cypress/e2e/3-class-prefix/index-no-prefix.html Normal file
View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Default</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="../../../dist/easymde.min.css">
<script src="../../../dist/easymde.min.js"></script>
</head>
<body>
<textarea id="textarea"></textarea>
<script>
const easyMDE = new EasyMDE({
showIcons: ["table"],
});
</script>
</body>
</html>

22
cypress/e2e/3-class-prefix/index.html Normal file
View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Default</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="../../../dist/easymde.min.css">
<script src="../../../dist/easymde.min.js"></script>
</head>
<body>
<textarea id="textarea"></textarea>
<script>
const easyMDE = new EasyMDE({
toolbarButtonClassPrefix: 'mde',
showIcons: ["table"],
});
</script>
</body>
</html>

47
example/index.html
View File

@ -13,7 +13,52 @@
<body> <body>
<textarea></textarea> <textarea></textarea>
<script> <script>
const easyMDE = new EasyMDE(); const easyMDE = new EasyMDE({
showIcons: ["code", "table"],
toolbar: [
{
name: "bold",
action: EasyMDE.toggleBold,
className: "fa fa-bold",
title: "Bold",
},
'table',
{
name: "italic",
action: EasyMDE.toggleItalic,
className: "fa fa-italic",
title: "Italic",
},
{
name: "strikethrough",
action: EasyMDE.toggleStrikethrough,
className: "fa fa-strikethrough",
title: "Strikethrough",
children: [
{
name: 'link',
action: 'https://github.com/Ionaru/easy-markdown-editor',
className: 'fa fab fa-github',
title: 'A Custom Link',
noDisable: true,
noMobile: true,
},
'preview',
{
name: 'bold',
action: EasyMDE.toggleBold,
className: 'fa fas fa-bold',
title: 'Bold',
attributes: {
'data-custom': 'some value',
'data-custom-2': 'another value',
}
},
],
},
],
toolbarButtonClassPrefix: 'mde'
});
</script> </script>
</body> </body>

3
src/js/easymde.js
View File

@ -194,7 +194,8 @@ function createToolbarButton(options, enableActions, enableTooltips, shortcuts,
} }
} }
el.className = options.name; var classNamePrefix = parent.options.toolbarButtonClassPrefix ? parent.options.toolbarButtonClassPrefix + '-' : '';
el.className = classNamePrefix + options.name;
el.setAttribute('type', markup); el.setAttribute('type', markup);
enableTooltips = (enableTooltips == undefined) ? true : enableTooltips; enableTooltips = (enableTooltips == undefined) ? true : enableTooltips;

1
types/easymde-test.ts
View File

@ -177,6 +177,7 @@ const editorImagesCustom = new EasyMDE({
}); });
new EasyMDE({ new EasyMDE({
toolbarButtonClassPrefix: 'mde',
sideBySideFullscreen: true, sideBySideFullscreen: true,
lineNumbers: false, lineNumbers: false,
unorderedListStyle: '*', unorderedListStyle: '*',

1
types/easymde.d.ts vendored
View File

@ -210,6 +210,7 @@ declare namespace EasyMDE {
tabSize?: number; tabSize?: number;
toolbar?: boolean | ReadonlyArray<'|' | ToolbarButton | ToolbarIcon | ToolbarDropdownIcon>; toolbar?: boolean | ReadonlyArray<'|' | ToolbarButton | ToolbarIcon | ToolbarDropdownIcon>;
toolbarTips?: boolean; toolbarTips?: boolean;
toolbarButtonClassPrefix?: string;
onToggleFullScreen?: (goingIntoFullScreen: boolean) => void; onToggleFullScreen?: (goingIntoFullScreen: boolean) => void;
theme?: string; theme?: string;
scrollbarStyle?: string; scrollbarStyle?: string;