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.