search

jakiestfu / Medium.js

A tiny JavaScript library for making contenteditable beautiful (Like Medium's editor)
http://jakiestfu.github.io/Medium.js/
4.39k stars 404 forks source link

How to change colors #170

Open oleghind opened 8 years ago

oleghind commented 8 years ago

What is the best way to apply colors in Mediumjs, I tried invoking a span with a color style but it creates a huge tree of nested spans instead of toggling them while I applying different colors to the same selection

hyyper commented 8 years ago

Use medium.invokeElement to toggle. Ensure you are invoking the exact same element to toggle.

DanielHaroldLane commented 8 years ago

I have this exact same problem. The issue being that changing the style attribute (or any attribute) dynamically when making an invokeElement call means that medium cannot toggle the element as it doesn't recognise it as the same element due to the different attributes.

editor.highlight(); var colorVar = 'Red'; medium.invokeElement('span', { style: 'color:' + colorVar + ';'}); colorVar = 'Black'; medium.invokeElement('span', { style: 'color:' + colorVar + ';'});

The above code will result in multiple elements being created as outlined here: <span style="color:red"><span style="color:black;">Content</span></span>

When the expected output it closer to: <span style="color:black;">Content</span>

Is there a way to ignore the style attribute and simply toggle based on the tagName argument for invokeElement?