Skip to content
Snippets Groups Projects
Commit a1e1a2d1 authored by Florian Spreckelsen's avatar Florian Spreckelsen
Browse files

ENH: Add MathJax buttons

parent 9dcac036
Branches
Tags
No related merge requests found
...@@ -23,15 +23,14 @@ import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar'; ...@@ -23,15 +23,14 @@ import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock'; import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';
import Code from '@ckeditor/ckeditor5-basic-styles/src/code'; import Code from '@ckeditor/ckeditor5-basic-styles/src/code';
import MyPlugin from '../src/myplugin'; import MathJaxCodeDelimiters from '../src/mathjax_code_delimiters';
/* global document, window */ /* global document, window */
ClassicEditor ClassicEditor
.create( document.querySelector( '#editor' ), { .create( document.querySelector( '#editor' ), {
plugins: [ plugins: [
// `MyPlugin` is an example plugin generated by the package generator. MathJaxCodeDelimiters,
MyPlugin,
Essentials, Essentials,
Autoformat, Autoformat,
BlockQuote, BlockQuote,
...@@ -55,8 +54,8 @@ ClassicEditor ...@@ -55,8 +54,8 @@ ClassicEditor
Base64UploadAdapter Base64UploadAdapter
], ],
toolbar: [ toolbar: [
// `myButton` is an example button provided by the `MyPlugin` class. 'inlineMathButton',
'myButton', 'displayMathButton',
'|', '|',
'heading', 'heading',
'|', '|',
......
import { import {
Plugin Plugin
} from 'ckeditor/src/core'; } from 'ckeditor5/src/core';
import { import {
ButtonView ButtonView
} from 'ckeditor/src/ui'; } from 'ckeditor5/src/ui';
import displayIcon from '../theme/icons/display.svg';
import inlineIcon from '../theme/icons/inline.svg';
export default class MathJaxCodeDelimiters extends Plugin { export default class MathJaxCodeDelimiters extends Plugin {
static get pluginName() { static get pluginName() {
...@@ -23,7 +26,7 @@ export default class MathJaxCodeDelimiters extends Plugin { ...@@ -23,7 +26,7 @@ export default class MathJaxCodeDelimiters extends Plugin {
view.set( { view.set( {
label: t( 'Insert inline math delimiters' ), label: t( 'Insert inline math delimiters' ),
icon: '$', icon: inlineIcon,
tooltip: true, tooltip: true,
isToggleable: true isToggleable: true
} ); } );
...@@ -38,6 +41,33 @@ export default class MathJaxCodeDelimiters extends Plugin { ...@@ -38,6 +41,33 @@ export default class MathJaxCodeDelimiters extends Plugin {
editor.editing.view.focus(); editor.editing.view.focus();
} ); } );
return view;
} );
// Add the display-math button
editor.ui.componentFactory.add( 'displayMathButton', locale => {
const view = new ButtonView( locale );
view.set( {
label: t( 'Insert display math delimiters' ),
icon: displayIcon,
tooltip: true,
isToggleable: true
} );
// Insert the inline delimiters ("`$$ $$`") into the text at the
// position of the cursor.
this.listenTo( view, 'execute', () => {
model.change( writer => {
const textNode = writer.createText( '`$$ $$`' );
model.insertContent( textNode );
} );
editor.editing.view.focus();
} );
return view;
} ); } );
} }
} }
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="68"
height="64"
viewBox="0 0 68 64"
version="1.1"
id="svg10"
sodipodi:docname="display.svg"
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs14">
<rect
x="5.1852225"
y="3.8651919"
width="75.926501"
height="50.619746"
id="rect4529" />
</defs>
<sodipodi:namedview
id="namedview12"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
showgrid="false"
inkscape:zoom="13.640625"
inkscape:cx="33.979381"
inkscape:cy="30.057274"
inkscape:window-width="2560"
inkscape:window-height="1371"
inkscape:window-x="0"
inkscape:window-y="32"
inkscape:window-maximized="1"
inkscape:current-layer="g8" />
<g
fill="none"
fill-rule="evenodd"
id="g8">
<g
aria-label="`$$"
transform="matrix(1.0350938,0,0,1.1142891,-8.1211871,1.9607164)"
id="text4527"
style="font-size:40px;line-height:1.25;white-space:pre;shape-inside:url(#rect4529);fill:#000000">
<path
d="m 12.353516,7.2636719 5.507812,7.3046871 H 14.873047 L 8.5058594,7.2636719 Z"
id="path30788" />
<path
d="m 38.701172,45.134766 h -1.953125 l -0.01953,-5.878907 q -2.050782,-0.03906 -4.101563,-0.46875 -2.050781,-0.449218 -4.121094,-1.328125 v -3.515625 q 1.992188,1.25 4.023438,1.894532 2.050781,0.625 4.21875,0.644531 v -8.90625 q -4.316406,-0.703125 -6.289063,-2.382813 -1.953125,-1.679687 -1.953125,-4.609375 0,-3.183593 2.128907,-5.019531 2.128906,-1.835937 6.113281,-2.109375 V 8.8652344 h 1.953125 v 4.5312496 q 1.816406,0.07813 3.515625,0.390625 1.699219,0.292969 3.320312,0.820313 v 3.417969 q -1.621093,-0.820313 -3.339843,-1.269532 -1.699219,-0.449218 -3.496094,-0.527343 v 8.339843 q 4.433594,0.683594 6.523437,2.441407 2.089844,1.757812 2.089844,4.804687 0,3.300781 -2.226562,5.214844 -2.207032,1.894531 -6.386719,2.1875 z M 36.748047,24.216797 v -8.007813 q -2.265625,0.253907 -3.457031,1.289063 -1.191407,1.035156 -1.191407,2.753906 0,1.679688 1.09375,2.617188 1.113282,0.9375 3.554688,1.347656 z m 1.953125,3.75 v 8.457031 q 2.480469,-0.332031 3.730469,-1.40625 1.269531,-1.074219 1.269531,-2.832031 0,-1.71875 -1.210938,-2.734375 -1.191406,-1.015625 -3.789062,-1.484375 z"
id="path30790" />
<path
d="m 64.150391,45.134766 h -1.953125 l -0.01953,-5.878907 q -2.050781,-0.03906 -4.101562,-0.46875 -2.050781,-0.449218 -4.121094,-1.328125 v -3.515625 q 1.992188,1.25 4.023438,1.894532 2.050781,0.625 4.21875,0.644531 v -8.90625 q -4.316407,-0.703125 -6.289063,-2.382813 -1.953125,-1.679687 -1.953125,-4.609375 0,-3.183593 2.128906,-5.019531 2.128907,-1.835937 6.113282,-2.109375 V 8.8652344 h 1.953125 v 4.5312496 q 1.816406,0.07813 3.515625,0.390625 1.699218,0.292969 3.320312,0.820313 v 3.417969 q -1.621094,-0.820313 -3.339844,-1.269532 -1.699218,-0.449218 -3.496093,-0.527343 v 8.339843 q 4.433593,0.683594 6.523437,2.441407 2.089844,1.757812 2.089844,4.804687 0,3.300781 -2.226563,5.214844 -2.207031,1.894531 -6.386718,2.1875 z M 62.197266,24.216797 v -8.007813 q -2.265625,0.253907 -3.457032,1.289063 -1.191406,1.035156 -1.191406,2.753906 0,1.679688 1.09375,2.617188 1.113281,0.9375 3.554688,1.347656 z m 1.953125,3.75 v 8.457031 q 2.480468,-0.332031 3.730468,-1.40625 1.269532,-1.074219 1.269532,-2.832031 0,-1.71875 -1.210938,-2.734375 -1.191406,-1.015625 -3.789062,-1.484375 z"
id="path30792" />
</g>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="68"
height="64"
viewBox="0 0 68 64"
version="1.1"
id="svg10"
sodipodi:docname="inline.svg"
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs14">
<rect
x="5.1852225"
y="3.8651919"
width="75.926501"
height="50.619746"
id="rect4529" />
</defs>
<sodipodi:namedview
id="namedview12"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
showgrid="false"
inkscape:zoom="13.640625"
inkscape:cx="33.979381"
inkscape:cy="30.057274"
inkscape:window-width="2560"
inkscape:window-height="1371"
inkscape:window-x="0"
inkscape:window-y="32"
inkscape:window-maximized="1"
inkscape:current-layer="g8" />
<g
fill="none"
fill-rule="evenodd"
id="g8">
<g
aria-label="`$"
transform="matrix(1.0350938,0,0,1.1142891,-8.1211871,1.9607164)"
id="text4527"
style="font-size:40px;line-height:1.25;white-space:pre;shape-inside:url(#rect4529);fill:#000000">
<path
d="m 12.353516,7.2636719 5.507812,7.3046871 H 14.873047 L 8.5058594,7.2636719 Z"
id="path33568" />
<path
d="m 38.701172,45.134766 h -1.953125 l -0.01953,-5.878907 q -2.050782,-0.03906 -4.101563,-0.46875 -2.050781,-0.449218 -4.121094,-1.328125 v -3.515625 q 1.992188,1.25 4.023438,1.894532 2.050781,0.625 4.21875,0.644531 v -8.90625 q -4.316406,-0.703125 -6.289063,-2.382813 -1.953125,-1.679687 -1.953125,-4.609375 0,-3.183593 2.128907,-5.019531 2.128906,-1.835937 6.113281,-2.109375 V 8.8652344 h 1.953125 v 4.5312496 q 1.816406,0.07813 3.515625,0.390625 1.699219,0.292969 3.320312,0.820313 v 3.417969 q -1.621093,-0.820313 -3.339843,-1.269532 -1.699219,-0.449218 -3.496094,-0.527343 v 8.339843 q 4.433594,0.683594 6.523437,2.441407 2.089844,1.757812 2.089844,4.804687 0,3.300781 -2.226562,5.214844 -2.207032,1.894531 -6.386719,2.1875 z M 36.748047,24.216797 v -8.007813 q -2.265625,0.253907 -3.457031,1.289063 -1.191407,1.035156 -1.191407,2.753906 0,1.679688 1.09375,2.617188 1.113282,0.9375 3.554688,1.347656 z m 1.953125,3.75 v 8.457031 q 2.480469,-0.332031 3.730469,-1.40625 1.269531,-1.074219 1.269531,-2.832031 0,-1.71875 -1.210938,-2.734375 -1.191406,-1.015625 -3.789062,-1.484375 z"
id="path33570" />
</g>
</g>
</svg>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment