I have one question. I try to develop a little WYSIWYG editor.
I would like create a <h1> button which allows me to generate a <h1> title (by clicking on button after text selection in <p> element).
I obtain the selection with window.getSelection().... But now, I would like to put my append("<h1>my text selected</h1>") just before the <p>. It’s my problem, because my <p> elements don’t have id or class. So do you know a means to put my append just before the <p> where my text has been selected?
I don’t know if with my bad English you’ll understand me!
Thanks very much for your help.
Have you tried using something like jQuery?
$("#yourButton").click(
function(){
$('<h1>'+window.getSelection()+'</h1>').insertBefore("???");
}
);
Just replace "???" with the location of your <p> element. How you would find that location depends how you wrote your HTML. Feel free to post your HTML for more assistance.
Related
By RTE tags I mean <b>, <i>, <u>, or <s> tags. I've been working on a RTE, and using jquery I can get the entire area to bold, but I want to be able to bold only a specific portion (think google docs, word, or any other text editor).
The mozilla site only had deprecated information, and inspecting elements on other sites (including this one) were no help to me.
I am trying to edit a content-editable <div> currently, although I'm open to switching to a text area if that works better.
//my jquery for bolding the entire thing
var bolded = false;
$("#bold").on('click', function(){
//access css of editor div, change status using a ternary
$("#editor").css("font-weight", bolded ? this.value : 'bold');
bolded = !bolded;
//log for debugging
console.log('clicked bold: ' + bolded);
});
my HTML5 for the editor. Sectioned off for formatting purposes.
<section>
<div id="editor" contenteditable="TRUE"></div>
</section>
My buttons are id'd as "bold", "itallic", "strike", and "underl", but I really just want to get one of them working so I can work from there.
EDIT
I realized that this question isn't as straightforward as I'd hoped. I have a <div>, and I would like to have multiple different formats inside of this <div>. The way I would do it logially is by inserting a <b> tag on the click of a button / keyboard command and then continuing to type from there, but I can't find any resources for it. Hope this clears that up.
EDIT 2
So as far as I can tell, the document.execCommand() still works but is predicted to be replaced by Input Events Level 2. I can't find any readable documentation for implementing this. Does anybody know how to do this?
Answer for current methodology (document.execCommand('command')):
Attaching a simple onclick() to the buttons works, where that onclick is a function that runs the aforementioned command with no particular focus:
function format(command, value){
//In use, "value" is left blank in order to do the current selection / no selection
document.execCommand(command, false, value);
}
<button onclick="format('bold')"><strong>B</strong></button>
<button onclick="format('italic')"><em>I</em></button>
Please note that this functionality WILL be deprecated, but no replacement has come up yet. When I know more, I will come back and edit this answer.
I have a contenteditable div and using keyboard shortcuts like ctrl+i the user is able to format the text. And as they type the innerHTML changes reflecting the tags i.e:
Hello <i>thanks for <br><br>for showing up<b> y'all b</b></i>
This is fine, and works well for my purposes. but the issue arises that when I go to print the html in a different div IF a user adds any other html tags, they could really mess up the application.
For instance, if they added a <script> tag or style etc.. How do I make it that the user is only allowed to add <i>, <br>, <b>, <s>, and without being able to add anything else?
Any ideas? Thank you
I think that you can use a regExpresion to avoid the "indeseables" tags. Some like
<textarea #data [(ngModel)]="value" (input)="replace(data)"></textarea>
<div [innerHtml]="valueParse">
</div>
replace(control:any)
{
this.valueParse=control.value.replace(/<(?!br|i|u)((\w+))>/gm,"<$1>")
.replace(/<\/(?!br|i|u)((\w+))>/gm,'<\/$1>');
}
See stackblitz
I have a situation where I'd like to be able to update some default text in a <p> tag wrapped inside of a <div> tag but so far I have been unable to find a good solution for accomplishing this.
Here's a snippet of the HTML that I'd like to edit:
<div class="edit-text">
<p> Default text </p>
</div>
I would like to reach in to the <p> tag and clear the text and/or update the text with something different.
I have tried a few different ways of editing the text, including finding the element and interacting with it:
var edit = driver.wait(until.elementLocated(By.xpath("//div[#class='edit-text']/p")))
edit.click()
edit.clear()
edit.sendKeys('Hello')
But this doesn't ever seem to work. Is there something else that's going on that I'm failing to see?
I've seen a few other posts uses executeScript but I can't find a good way to use that approach and update the text the with the elements that this HTML uses because the browser doesn't seem to support finding elements by xpath.
After some experimenting a little bit I was able to get the solution by using executeScript and document.querySelector to locate the css.
document.querySelector(".edit-text").innerHTML = "Hello world"
OK, I'm going to get a bad rep here for asking too many questions. I have some javascript that dynamically changes content on my page. This works just fine. My issue is that I need to be able to tag all text with 'class="CushyCms"' in order to allow access to the site owner for easy content changes. Here is the basic code for the script, there is more than just the one set but this will give you an idea of what I'm doing. I tried adding the class tag inside the innerHTML, but Cushy couldn't see it.
<script language="javascript" type="text/javascript">
function changeText(idElement) {
if(idElement==0){
document.getElementById('tagmain').innerHTML ='<class="cushycms">Default text to display on page load.';
document.getElementById('tagtext').innerHTML ='<class="cushycms">More default body text on page load.';
}
</script>
I am looking for a way to put these text fields in a hidden div and pull the textContent from there. This is an example of a section that works with Cushy
<h2 class="cushycms">Preventative Maintanence</h2>
I'm beginning to get the hang of javascript, though Java is my primary language. I want to be more rounded i my langauge skills so I am trying to leanr as much as I can. Thanks in advance for the help.
Cushy CMS requires an actual HTML in order to edit. You could use the following:
HTML
<p id="tagmain-replace" class="cushycms" style="display:none;"></p>
<p id="tagmain">Default Text</p>
JS
var newText = document.getElementById('tagmain-replace').innerText;
if( newText != ''){
document.getElementById('tagmain').innerText = newText;
}
I would suggest changing the IDs to better work with your project.
i was wondering how does on many websites when i add a smile on textarea appears image instead of ex. :), so i want to ask you how it is possible, i need a simple example...
for example
i have :
<img class="smile" src="smiles/smile1.gif" alt=":)" onclick="add_smile(1);"/><br/>
<textarea></textarea>
so i want onclick of image (.smile) to be added image on textarea, then to be possible to insert some words after image, or just explain me how does it may be done ( is there an <div> element or it is a <textarea> or idk what it can be.. )
thanks
What you are seesing on many sites is not a textarea. It's a div with contentEditable attribute which acts like a textarea. That's how wysiwyg editors are created.
<div contentEditable="true"> Type here. You can insert images too </div>
Check working example at http://jsfiddle.net/6bCRJ/