execCommand adds unwanted styling to my elements - javascript

So I'm creating something like an online text editor. After going through some bugs, I just noticed that if I try to do something like justify some text in the center, it creates a div with text-align: center as it should. However, it also ends up creating a span with font and weight properties which I do not want since the font will be set by the user in a parent element and since the text is in a span with its own font and weight properties, it never gets applied.
So before I click the center button it'd look something like
<div contenteditable="true">Write your text here!</div>
And after
<div contenteditable="true">
<div style="text-align: center;">
<span style="font-size: 1rem; font-weight: 400;">Write your text here!</span>
</div>
</div>
When I want it to just be
<div contenteditable="true">
<div style="text-align: center;">
Write your text here!
</div>
</div>
I took two pictures of before and after I use execCommand("justifyCenter") it on the element if you'd rather see the actual example.
Before
After
Any suggestions on how I can make it so that either the parent elements font weight and size properties will be applied to the text rather than its own properties, or how to stop it from creating those properties in the first place.
Thanks!

Well I seem to have figured it out. For some reason since the parent contenteditable="true" didn't have it's font-size and font-weight set, it created that extra span. So I added those style attributes to the parent div and it stopped creating it. Hope this helps if someone ever comes across this problem again :)

Inserting HTML with the a div wrapped around the selection worked for me. You will need to style the div for your justification type.
document.execCommand("insertHTML", false, "<div style='text-align: center;'>"+ document.getSelection()+"</div>");

Related

Text obstructing a textarea

In order to make a textarea handle some basic formatting, I put a div over it with the same monospace font and position. The div would display the same text, but with color and boldness.
However, the text inside the div obstructs and makes the user unable to select text inside the textarea.
<div class="centerc">
<div class="copyc">
<textarea id="input" class="ipadded epadded txtarea" rows=20 cols=80></textarea>
<div id="copyadd" class="copyadd"></div>
<!--THIS IS THE DIV FOR FORMATTING ^ -->
</div>
</div>
-webkit-user-select: none;-ms-user-select:none;user-select:none; etc has not fixed this issue, only made the user unable to select text in the div as well. If any more CSS code is needed, I will comment it but I don't think this is necessary.
How would I stop the div from making the user unable to select text from the textarea (if this is possible)?
If not, are there any alternatives to the method I use?
Edit: I should have made it clear from the start I wanted multiple types of formatting.
You can't put formatting in a textarea but you can use an editable div and get rid of the textarea. It will at least make the problem simpler.
See this question: editable div
In order to expand capacity of being stylized of a <textarea> a good starting point is thinking at the opposite: making a <div> editable...
<div id='divTextEditable' contenteditable></div>
That's not "the magic wand", and it has its downside, but it's a good starting point.
Why don't you just add some css to the textarea to accomplish what the div is trying to accomplish.
.dark-text {
font-weight: bold;
font-color: black;
}
You could, for instance, add a CSS rule that puts the text area in front of the div when the user is hovering over the parent div, something like this:
.copyc:hover txtarea {
z-index: 2;
}

h1 blocking other h1 with anchor in it

I have two h1 elements, one is a subtitle and is placed behind the first one using z-index. I want to have a click on the first h1. This click needs to go to jQuery because I'm going to use it to stop playback of a video amongst other things. I used to have a click on the first h1 itself, but since its a block element this wasn't ideal as it was stretched over the whole page width. So I replaced that with a dummy anchor .
My problem is that I can't get the subtitle h1 to stop blocking the title h1. Even when using z-index. Somehow it keeps blocking the first h1
Ideally the text in both h1's is clickable, but I prefer the title to be clickable.
<div class="title-box">
<h1 class="content-title">
FooFooFooFooFoo
</h1>
<h1 class="content-subtitle"> Bar </h1>
</div>
Fiddle with my problem: https://jsfiddle.net/nL5pn4w2/4/
z-index only works on positioned elements position:absolute , position:relative , or position:fixed
Another option would be to have the non-link h1 ignore pointer events pointer-events: none;
jsfiddle

HTML Conteneditable - join paragraphs without inline styles being applied

In a WYSIWYG editor (based on a contenteditable div), I have code to make sure that no inline styles are inserted into the HTML while copy-pasting, normal typing, etc. But now browsers seem to want to screw with me even more. Say I have 2 paragraphs of this sort in my HTML
<p>This is the first paragraph |(cursor)</p>
<p>This is the second paragraph</p>
There are no inline styles present. But if I now join the two paragraphs by pressing "Delete/Backspace", Chrome decides to do this
<p>This is the first paragraph |(cursor)
<!-- Note the horrible inline styles -->
<span style="font-size: 13px; line-height: 19.53px;">
This is the second paragraph
</span>
</p>
Does anyone have any idea as to how I might prevent/detect when this happens?
This is a Webkit's issue. It also influences CKEditor (http://dev.ckeditor.com/ticket/9998). I reported these tickets:
http://code.google.com/p/chromium/issues/detail?id=226941
https://bugs.webkit.org/show_bug.cgi?id=114791
But there was no response.
You could not replicate this on jsfiddle because styles need to be applied to those paragraphs. E.g.:
p { line-height: 1.5em; font-size: 12px; }
Check this one: http://jsfiddle.net/HHHak/2/
So currently there are two possible solutions:
avoid any styling :| (but that won't solve other issues I described in mentioned bug reports),
implement your own backspace/delete support (really tricky... you can find an algorithm in a spec draft, but I'm not certain that it is complete).

Show div with jQuery. css question

I have three divs with display: inline-block. In every div i have div with display: none when im trying to show hiding div with $('#div-id').show(1000) nearest divs 'jump around'
What should i change? I do like to see div under div just draw and the left or right div doesn't change his place.
For example two divs with my problem there (hide div shows up onchange in the textbox)
http://jsfiddle.net/WZCJu/13/
I added this CSS:
#amount-div, #specific-div {
width: 300px;
vertical-align: top
}
Version without the width, you may like it better:
http://jsfiddle.net/WZCJu/15/
Try using css's visibility property instead since it retains the element's position in the flow.
Docs: http://www.w3schools.com/css/pr_class_visibility.asp
Example:
<div id="herp" style="width: 100px; height: 40px; visibility: hidden;">plarp</div>
<div id="derp" style="width: 100px; height: 40px; visibility: visible;">slarp</div>
If you change the divs to use float: left; with a specified width you can avoid the "jump around".
See my updated example at: http://jsfiddle.net/WZCJu/12/
I changed the following:
<div id="amount-div" style="display:inline-block;">
...
<div id="specific-div" style="display:inline-block;">
To use floats with a specified width.
<div id="amount-div" style="float:left;width:220px;">
...
<div id="specific-div" style="float:left;width:220px;">
I also changed the <br> tag which preceeds the submit button so that it will clear the floated divs like so (though, there are better ways of handling that in my opinion):
<br style="clear:both">
display none removes the element completely from the document. there wont be any space reserved for it. so when u bring it back(show) it ll rearrange the nearby divs. so try using visibility:hidden which will retain the space but keep the div hidden..
Changing an HTML element from display: none to display: block or some other value will always cause it to change the flow of other elements around it in the tree. To prevent the DIVs from jumping around, you have a few options. Here are a couple simple ones:
First, you could "pad" the DIV in another DIV with a fixed size. For example:
<div style="width: 100%; height: 2em;">
<div id="js-amount" style="display: none">
<p>You will achieve this goal by:</p>
<p id="achieved-date"> <p>
<p id="weekly-limit-amount">Your weekly limit will be decreased by $100</p>
</div>
</div>
Secondly, you could use absolute positioning to remove your DIV from the flow of the document:
<div id="js-amount" style="display: none; position: absolute; top: 200px; left: 50px;">
<p>You will achieve this goal by:</p>
<p id="achieved-date"> <p>
<p id="weekly-limit-amount">Your weekly limit will be decreased by $100</p>
</div>
You must set a fixed size for your divs, so when the new one appears, it's constrained with the given side. I updated your JSFiddle : http://jsfiddle.net/WZCJu/16/
Have a look at how I constrain the size for your divs in the CSS. To improve layout, I took the liberty to add some styling to the submit button, so the HTML is a little bit modified too.
If you have any trouble understanding my solution, ask some questions.
When using display: none, the element does not render at all so it doesn't use any space on the rendered web page. I think you might want to use visibility:hidden to hide your element but still make the space usage calculation.
EDIT: It appears jQuery method works only on the display style so my answer is not applicable and indeed a fixed offset is necessary to avoid side effects in the page flow.

Make an h2 tag unremovable in a contenteditable section

is it possible to make a section within a contenteditable element permanent, so that a user cannot remove it?
I have an h2 tag in a contentEditable div. I don't want the user to edit the h2 tag, so I set contentEditable=false, but the user can still select and remove it, which I want to disallow.
So, for ex:
<div contentEditable="true">
<h2 contentEditable="false">My h2 tag</h2>
This is a div you can edit. But you can't edit or remove the h2 tag.
</div>
Nope, sorry, it's all-or-nothin'.
A work-around would be to grab the H2 tag and reinsert it after the edit is complete, using JavaScript.
Why not use position:absolute to move it above the div (maybe using a proper z-index) without being inside it (in the source)?
Remember to add some padding to your div in the space allocated for your h2.

Categories

Resources