diff --git a/resources/js/editor/menu/index.js b/resources/js/editor/menu/index.js index f29108849..ed6a1c25b 100644 --- a/resources/js/editor/menu/index.js +++ b/resources/js/editor/menu/index.js @@ -49,7 +49,7 @@ function markItem(markType, options) { passedOptions[prop] = options[prop]; } - return cmdItem(toggleMark(markType), passedOptions) + return cmdItem(toggleMark(markType, passedOptions.attrs), passedOptions) } const inlineStyles = [ @@ -117,11 +117,17 @@ const alignments = [ }), ]; +const colors = [ + markItem(schema.marks.text_color, {title: "Green", label: "Green", attrs: {color: '#00FF00'}}), + markItem(schema.marks.text_color, {title: "Blue", label: "Blue", attrs: {color: '#0000FF'}}), +]; + const menu = menuBar({ floating: false, content: [ [undoItem, redoItem], [new DropdownSubmenu(formats, { label: 'Formats' })], + colors, inlineStyles, alignments, ], diff --git a/resources/js/editor/schema-marks.js b/resources/js/editor/schema-marks.js index d4c546c08..175d8bda8 100644 --- a/resources/js/editor/schema-marks.js +++ b/resources/js/editor/schema-marks.js @@ -30,11 +30,27 @@ const subscript = { } }; +const text_color = { + attrs: { + color: {}, + }, + parseDOM: [{ + style: 'color', + getAttrs(color) { + return {color} + } + }], + toDOM(node) { + return ['span', {style: `color: ${node.attrs.color};`}, 0]; + } +}; + const marks = baseMarks.append({ underline, strike, superscript, subscript, + text_color, }); export default marks; \ No newline at end of file diff --git a/resources/views/editor-test.blade.php b/resources/views/editor-test.blade.php index 5d1dc7429..1f4a6751e 100644 --- a/resources/views/editor-test.blade.php +++ b/resources/views/editor-test.blade.php @@ -15,6 +15,7 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores?
Some Underlined content Lorem ipsum dolor sit amet.
Some striked content Lorem ipsum dolor sit amet.
+ Some Red Content Lorem ipsum dolor sit amet.

Logo