Class Names in contenteditable text divs - javascript

return (
<div
onMouseUp={() => {
this.handleMouseUp();
this.showMenu();
}}
className="sectionWrite"
contentEditable="true"
>
<div>
<br></br>
</div>
{menuSelect}
</div>
);
Here is how the div appears after text is typed into the content editable div. For each child div inside the class sectionWrite, I want to name it a class.
<div class="sectionWrite" contenteditable="true">
<div>adfasdfasdf</div>
<div>asdlkfjasdlkjf</div>
<div>asdfkljasdlfkjasdlkfj</div>
<div>asdfkjasdlkfjasdf</div>
<div>aklsdjfaskldjfas</div>
<div>dfklasjdflkajdsf</div>
<div>lkasjdflkjasdf</div>
<div><br></div>
</div>
what I type inside the editable div
When a client types in the contentEditable div, a new div encloses whatever the user typed. Is there any way to assign a class name to the div the user typed? I want to display a menu under a highlighted text and I would need a specific dom element to do that.

Related

Angular Editable Text

I'm writing a code where a user clicks a button on the screen, the user can see a paragraph. I want that paragraph to be editable. For example, the user should be able to write additional stuff in it. There was a readonly part in my code and I removed it, but it is still not editable. How can I achieve this?
HTML Code:
<div class="content fuse-white ml-24 mr-8 h-100-p" fusePerfectScrollbar>
<div class="label-list">
<p>
Label Info:
<span>
{{_stickerData?.StickerData}}
</span>
</p>
</div>
</div>
In HTML, as outlined from this link:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content
You have to set the
contenteditable
attribute on the paragraph element to make it editable.
Bind the paragraph attribute with Boolean value so that when you click the button, set the Boolean to True which will trigger the content to be editable.
Change your Span Tag to Texttera.
app.component.html:
<textarea>{{_stickerData?.StickerData}}</texttera>
app.component.ts:
_stickerData.StickerData: string = "Text in the Input Field"

Optimal way to retrieve HTML nodes having text using JavaScript/JQuery

How to get all the HTML nodes having text in an optimal way without having to loop through every node?
In other words, grab all HTML nodes having visible text.
For example, if I have a dom as below
<div>
<span>Hello This is a Text Span</span>
<div>
<p> This is a text Paragraph</p>
<button> This is Button Label</button>
</div>
<div> This is also a visible text</div>
</div>
I should select
span having text Hello This is a Text Span
p having text This is a text Paragraph
button having text This is Button Label
div having text This is also a visible text
The outermost div in the above example doesn't have text of its own so should not be part of the result.
Edit: What problem am I trying to solve?
The framework I use escapes HTML characters in labels of fields, buttons, headings etc.
For example: < is converted to & lt;'
So I am trying to write a client side code which triggers after the page is completely rendered which will unescape all the HTML texts to a readable format.
Any help will be appreciated.
Thanks in advance
The DOM property holds a numeric code indicating the node's type; text nodes use the code 3, So you can find those text nodes by filtering them having nodeType 3.
Wrap your all nodes in a div by giving a class.
Select your content by it's class like this: $(".getTextNodes").contents();.
Filter contents having nodeType 3.
selectedElement = $(".getTextNodes").contents();
textNodes = selectedElement.filter(function() {
return this.nodeType === 3;
});
console.log(textNodes);
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<div class="getTextNodes">
<span>Hello This is a Text Span</span>
<div>
<p> This is a text Paragraph</p>
<button> This is Button Label</button>
</div>
<div> This is also a visible text</div>
</div>
Check this link out to read more.
I'm using just only vanilla js
My algorithm is just select all element that has no element inside it
It means select all element that has directly Text Node
let el = document.querySelectorAll('div,span,p,button');
var arr = [];
el.forEach(function(m){
if (m.querySelectorAll('div,span,p,button').length == 0){
arr.push(m)
console.log(m)
}
})
// console.log(arr)
<div>
<span>Hello This is a Text Span</span>
<div>
<p>This is a text Paragraph</p>
<button> This is Button Label</button>
</div>
<div>This is also a visible text</div>
</div>
Jsfidle link click here
There's no css selector to get your needs and looping is only the solution.

update innerText without deleting child nodes

I have a div with some text and a child div. I want to update the outer div text and keep the child div.
<div class="outer">
some text here
<div class="arrow-down"></div>
</div>
if I try outer.innerText = "foo" the arrow-down element is deleted. How can I get around this?
Thanks
Create a child element such as a span element and place the text you want change inside that.
Then you can update that via JavaScript like so:
var el = document.getElementById('inner');
el.innerText = 'some different text';
<div class="outer">
<span id="inner">some text here</span>
<div class="arrow-down"></div>
</div>

How to type and delete text in a pre-span-wrapped text in conteteditable div while keeping the span tag

Does anyone know how to insert and delete text in a pre-span-wrapped text in content-editable div while keeping the <span id="x"> tag?
In the content-editable div, if delete "kachu", <span id="2"> would also be deleted. I want that specific tag still there even without text.<span id="2></span>
In the content-editable div, if typing in "pi" just before "kachu" to make "pikachu", <span id="2"> would not wrap "pi". I want <span id="2">pikachu</span>
HTML
<div id="inputbox" style="border:1px solid lightgrey" contenteditable="true">
<span id="1">love</span> <span id="1">kachu</span>
</div>
This will change the content of the span containing 'kachu' to an empty string, but finding the span after that will be slightly difficult, since it has the same id as the other span.
$('#inputbox').find('span:contains("kachu")').html( '' );
Once "kachu" is deleted, to find the empty span you could just do the same, but change the contains("kachu") to contains("")
You should consider using different ids for your spans. If you did intend the 2nd span to have id="2", this could be: $('#inputbox').find('#2').html( '' ) or just $('#2').html( '' )

load second content onclick in a specific div

I am trying to make a page with some fact boxes, so I have made these divs with classes on with two tag text blocks, the second block have 'display none' on it and should first be shown when you click on the div.
And that's my problem I would like to make a Jquery function that loads the second paragraph in when I click on the div i just don't know how to tell the site that its specifically that' paragraph without using any id or classes that would trigger all the other divs.
here is my code:
<div id="content">
<div class="teaser-box">
<p>TEXT TEXT TEXT TEXT</p><!-- paragraph 1 (shown) -->
<p>TEXT TEXT TEXT TEXT</p><!-- paragraph 2 (not shown) -->
</div>
<div class="teaser-box">
<p>TEXT TEXT TEXT TEXT</p><!-- paragraph 1 (shown) -->
<p>TEXT TEXT TEXT TEXT</p><!-- paragraph 2 (not shown) -->
</div>
<div class="teaser-box">
<p>TEXT TEXT TEXT TEXT</p><!-- paragraph 1 (shown) -->
<p>TEXT TEXT TEXT TEXT</p><!-- paragraph 2 (not shown) -->
</div>
<div id="load-teas"><h4>Load more</h4></div>
</div><!-- content END -->
Thanks!
You can use another Jquery Selector like :nth-child, in your function like this:
$(document).ready(function () {
$('.teaser-box').click(function () {
$('p:nth-child(2)',this).show();
})
})
The demo http://jsfiddle.net/KC63V/4/
whenever a div is clicked, you get reference to the div in this
now you just need to find the last child of this div and show it
something like:
$('.teaser-box').click(function() {
$(this).children(':last').show();
return false;
});
Bind click on each boxes and show the second p child of the box (eq(1))
$(".teaser-box").click(function(){
$(this).find("p").eq(1).show();
}

Categories