Creating a HTML mail editor.. Inherting classes?

Question

So basically I am creating a mail editor.. (Just want it as a div with contenteditable where i can switch HTML/Clear Text and I've already created a Word style editor (decorations/color/font/size etc)

I DO NOT WANT TO USE A PLUGIN

Problem im having is the div is inherting styles from the page =/ This is not good at all, how can I prevent it?

Example is using H1's. A "bad" but working solution is to only style classes instead of example H1's.. But is there any good way?

Example pic:

You could put it in an iframe. I believe that's what other rich text editors do, like TinyMCE. — Travesty3, Dec 17 '13 at 12:39

score 3 · Accepted Answer · edited May 23 '17 at 12:19

3

The best solution is, to move the content to an iFrame. All major HTML editors do this trick to avoid interferences from the main style to the editable content

Take a look at the answer from a CKEditor devloper to my question too. Also I wouldn't suggest developing you own editor, it only looks simple in the beginning, but you end up building a lot of workarounds for browser incompatibilities!

edited May 23 '17 at 12:19

Community

1
1

answered Dec 17 '13 at 13:10

Stefan

14,826
17
80
143

The actual editor we have already built it and works great in all versions we officially support. But yeah, seems like iframe is the way to go :) – Alex S Dec 17 '13 at 13:18
If you already have working components, that's a different storry, in that case you have to use an iFrame. Please accept my anser then :) – Stefan Dec 17 '13 at 13:46

Mihai Iorga · Answer 2 · 2013-12-17T12:48:08.403

0

You can take a look at YUI CSS Reset. Include or copy their CSS Contextual Reset and add to your editable DIV:

<div class="yui3-cssreset"></div>

edited Dec 17 '13 at 12:48

answered Dec 17 '13 at 12:36

Mihai Iorga

39,330
16
106
107

http://yuilibrary.com/yui/docs/cssreset/cssreset-basic-example.html Here H1 looks like normal text, I dont want it styled at all, it should be like a default H1.. – Alex S Dec 17 '13 at 12:45
That is CSS Reset. I was talking about contextual reset. Check [JSFiddle](http://fiddle.jshell.net/EGLQK/show/). Contextual resets to browser default. – Mihai Iorga Dec 17 '13 at 12:47

peter · Answer 3 · 2013-12-17T14:23:58.327

0

If you don't care much about backward compatibility, you can use Shadow DOM. Setting applyAuthorStyles=false and resetStyleInheritance=true on the ShadowRoot prevents CSS of the parent document from affecting the Shadow DOM.

ShadowRoot can be created by calling createShadowRoot() on the div element. Alternatively, you can create a web component for your editor using one of the convenience libraries - Polymer or X-Tag.

There are certainly simpler (and more portable) solutions to your problem, but this one may give you additional benefits in terms of making your editor more reusable and encapsulated.

edited Dec 17 '13 at 14:23

answered Dec 17 '13 at 13:22

peter

480
3
7

Problem is we need to support IE7+, so HTML5 and CSS3 only stuff are kind off a "nono" =/ And this seems more complicated though.. I just made an iframe from the editor which took 3sec then it worked perfectly :P But I will look into it for learning purposes. – Alex S Dec 17 '13 at 14:25

score 0 · Answer 4 · answered Dec 17 '13 at 14:25

0

If you are using it as a html email editor, you shouldn't be using semantic tags like <h1> anyway. Html email doesn't play nice with modern web standards.

I'd suggest converting all the WYSIWYG text into <font> or <span> tags with inline CSS.

Because html email uses different element types (tables vs divs), it is easy to separate the CSS targeting between your page and editable content, providing you are formatting the user input.

answered Dec 17 '13 at 14:25

John

11,985
3
45
60

I am using fonts, h1 was only to show the css issue – Alex S Feb 03 '14 at 13:48

Creating a HTML mail editor.. Inherting classes?

4 Answers4