6

I made my own WYSIWYG text-editor.

The contenteditable-field is a div, see code below:

<div spellcheck="false" id="textEditorField" contenteditable="true"></div>

The button-events look like this:

boldButton.onclick = function() {
    document.execCommand('bold', false, null); 
    return false; 
}

The texteditor is working fine. It italics and un-italics the text, underlining works. But with bold there is a problem: it bolds the text, but doesn't unbold it. This is in every browser on both OS X and Windows.

I'm using a custom font which is imported using @font-face.

In the css I do the following:

b {
    font-family: "Caviar Dreams Bold";
    font-weight: normal;
}
b i, i b {
    font-family: "Caviar Dreams Bold Italic";
    font-weight: normal;
}

If I remove the font-weight property the text gets the font-family "Caviar Dreams Bold" AND it is made bold via CSS, so extra bold.

There are some similar questions, but without an answer I can use. I also have to note that I can't use jQuery for this.

Jeroen
  • 2,011
  • 2
  • 26
  • 50
  • Looks like a JavaScript issue. Inspect your DOM and see if the is really being removed. I've created a simple editor myself here https://github.com/NenadP/biu-editor if you need inspiration :) – NenadP Feb 19 '15 at 19:12
  • It looks like it's removed and added again instantly. Because in web-inspector it has ``. If I expand this tag and then try to unbold the text the tags collapse again. – Jeroen Feb 19 '15 at 19:15
  • It's not a general issue, it's something specific in your code. Provide some jsfiddle or codepen. – Alexander Dayan Feb 19 '15 at 19:18
  • Finally I got the JSFiddle working, and luckily the problem exists here too (else it would be even more difficult to solve I guess). Here it is https://jsfiddle.net/ume3t0vp/ – Jeroen Feb 19 '15 at 19:34
  • OK, I understood what is the problem. Will post my answer in some minutes. – Alexander Dayan Feb 19 '15 at 19:42

2 Answers2

10

The execCommand('bold'... works as expected, i.e. toggles the surrounding of the text in tag. The problem is that you set 'font-weight: normal' style for the b tag in the following CSS classes. It means that you explicitly want the text in the <b> tag to be normal and it's what you get. 

b {
    font-family: "Caviar Dreams Bold";
    font-weight: normal;
}
b i, i b {
    font-family: "Caviar Dreams Bold Italic";
    font-weight: normal;
}

So, you should remove this property and everything work fine.

UPDATE:

It's important to understand how in certain circumstances the method may "bold but not unbold". In fact, execCommand makes something more smart than just surrounding the text. It also normalizes it taking in account that there may be a mix of crossing tags like <b> or <strong> together with <i>, <u>, etc. The browser algorithm analyses the text styles to understand what is actually bold and why. When you redefine bold to normal it may cause the algorithm to decide: "OK, although it's inside <b> tag, the text is not bold and so there is nothing to change" and keeps the tag.

Alexander Dayan
  • 2,846
  • 1
  • 17
  • 30
  • I didn't expect the `execCommand()`-algorithm to be _this_ smart. You are right, this is the solution. But the thing now is: the text in the contenteditable `div` that's being set to bold is _extra_ bold, because of the font (Caviar Dreams BOLD) + the font-weight. I guess the best/only solution is to give the `b`-element for this div the font "Caviar Dreams REGULAR" so it looks bold? – Jeroen Feb 19 '15 at 21:28
  • 1
    Yes, it seems to be the most correct solution. BTW, why have you decided to use this font? Being really nice for a large size typography, in WYSIWYG editor it look not different from something simple and standard like arial... – Alexander Dayan Feb 19 '15 at 21:44
  • Thank you. I will use this. About the font? I don't know. I'm studying software engineering, so I'm absolutely NOT a designer. ;) I will maybe look into some other fonts (and color schemes) for the website I'm building for the course Client. – Jeroen Feb 19 '15 at 23:01
  • 1
    If you want to use a fancy bolded font, rather than setting the family and then font-weight to normal (and breaking execCommand), you can instead extend the original font-family with @font-face to tell the browser which font to use when font-weight is set to "bold". http://stackoverflow.com/questions/2436749/how-to-add-multiple-font-files-for-the-same-font – joegoldbeck Dec 01 '15 at 15:32
0

Try this :

#textEditorField * {
    font-family: unset;
}
#textEditorField b {
    font-weight: bold;
}
POPI
  • 745
  • 6
  • 10