Creating My WYSIWYG Editor - JavaScript Strange Behaviour - javascript

I'm working on my on Visual Text editor. It's working decently, preview works perfectly, and so does my JS appending. The HTML is this one:
<div class="wysiwyg">
<div class="wystitle">What You See Is What You Get<br>Editor by ShowTime</div>
<div class="wysmenu"><button class="wysbutton" onClick="addBold()">Bold</button><button class="wysbutton">Italic</button><button class="wysbutton">Underline</button><button class="wysbutton">Link</button><button class="wysbutton">Color</button><button class="wysbutton">Quote</button></</div>
<textarea rows="9" cols="145" id="wystext"></textarea><br>
<button class="wysbutton" onClick="preview()">Preview</button><button class="wysbutton">Post!</button>
</div>
<br><br><br><br><br><br><br><br><br><br><br>
<div class="wyspreview" id="wyspreview">Hit 'Preview' To See the Post General Look<br>Hit 'Post' To Create the Blog Post</div>
And I want to have the Bold button to simply add TEXT HERE. This is the JAvaScript:
function preview() {
var preview = document.getElementById("wystext").value;
document.getElementById("wyspreview").innerHTML = preview;
}
function addBold() {
var text = document.getElementById("wystext").value;
document.getElementById("wystext").innerHTML = text + "<strong></strong>";
var text = null;
}
The addBold function works properly, but as soon as I type in the text area, it won't work anymore. Any ideas why ?

You should put the text inside the tag:
"<strong>" + text + "</strong>"
It would also be helpful to incude a jsfiddle with an example.

Nevermind, found a fix, just edited innerHTML to value.
Might come helpfull for some users.

Related

How can I get my Copy and Paste function to keep new line formatting?

I only need this to work on Google Chrome so there is no requirement for multi-browser compatible code.
This is the JS function I use to copy the text to clipboard.
// Copy text to clip-board JS
function copy(txt){
var cb = document.getElementById("cb");
cb.value = txt;
cb.style.display='block';
cb.select();
document.execCommand('copy');
cb.style.display='none';
}
var var1='download here: \n www.link-to-download.com';
Here is my HTML
<button class="buttonClass" onclick="copy(softwareinstall)">Install software</button>
<textarea id="cb" style="display: none"></textarea>
When I click the button, it will copy to clipboard, however when I paste the content into somewhere else for example notepad and outlook, the text is all on one line and the \n does nothing.
I would like for the string to be split onto 2 seperate lines.
Thank you in advanced.
If it is an option, you could easily preserve you text content by using navigator.clipboard.writeText() instead of document.execCommand() as that does not copy from the DOM. Something like:
const str = "Text \n on \n different lines";
navigator.clipboard.writeText(str).then(() =>
console.log("copied")
);
This is because the input element doesn't support line breaks, so your \n gets lost. Try to use a textarea instead:
// Copy text to clip-board JS
function copy(txt){
var cb = document.getElementById("cb");
cb.value = txt;
cb.style.display='block';
cb.select();
document.execCommand('copy');
cb.style.display='none';
}
var var1='first line of text \n second line of text';
<button onclick="copy(var1)">Copy Option 1</button>
<textarea id="cb" style="display: none"></textarea>

Add New Line in textarea by getElementById().value not Working

I'm quite new in Javascript. Sorry if I say some absurd. None of the previous answers I found here worked in my case...
The code gets an index from a selected option from a dropdown list generated by an array loop, and uses this index to post description of a product in a textarea. Ideal would be one in each line. But whenever I add '\n'(added only for visualization by the end of the code) or '
&#10'; the dropdown list itself disapears. Trying '< br>' does not work either.
pr[] is a nested array that contains a description of 10 products (ex adidas soccer ball) in its first position and price at the second.
The function buy() is called by a button onclick event, each time it is called it adds one product to the textarea.
Thanks in advance!
textd=" ";
valord=0;
function buy() {
var e = document.getElementsByTagName("select");
var f = e[0].selectedIndex;
textd +=pr[f][0];
valore = valord += pr[f][1];
document.getElementById("compras").value=textd\n;
document.getElementById("valor").value ="R$ "+ valore+",00";
}
You need to add "\n" to the end of the string while adding text to text area, then this "\n" ensures that row will be displayed in a new line instead of same line.
Look at the following code
<!DOCTYPE html>
<html>
<body>
<script>
function appendText()
{
debugger;
var ele = document.getElementById("textArea");
var text = ele.value;
text += "im clicked\n";
text +="clicked again\n";
text +="clicked third time\n";
text +="clicked forth time";
ele.value = text;
}
</script>
<textarea rows="4" cols="50" id="textArea">
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>
<button type="button" onclick="appendText()">Click me </button>
</body>
</html>
You may need to change your code to
textd +=pr[f][0] + "\n";
document.getElementById("compras").value=textd;

Display html link with javascript

In some part of an html page, I have a link with the following code :
<a id="idname" class="classname" href="www.MySite.com/image-name.jpg">link-text</a>
I would like to automatically display the same link in another part of the same page by using a javascript.
What would be the script to insert in my page ?
Thank you in advance for any help in this matter.
Patrick
Try this:
myVar = document.getElementById("idname");
varLink = (myVar.attributes.href);
As son as you know the target id:
<div id="targetID">New Link: </div>
<div id="targetID2">New Link 2: </div>
And If you are using jQuery you can do like this:
var link = $("#idname").clone();
link.attr("id",link.attr("id") + (Math.random() * 10));
$("#targetID").append(link);
If not:
var link = document.getElementById("idname");
var newLink = document.createElement("a");
newLink.href = link.href;
newLink.className = link.className;
newLink.innerHTML = link.innerHTML;
newLink.id = link.id + (Math.random() * 10);
document.getElementById("targetID2").appendChild(newLink);
See this Example
<script>
window.onload = function() {
// get data from link we want to copy
var aHref = document.getElementById('idname').href;
var aText = document.getElementById('idname').innerHTML;
// create new link element with data above
var a = document.createElement('a');
a.innerHTML = aText;
a.href = aHref;
// paste our link to needed place
var placeToCopy = document.getElementById('anotherplace');
placeToCopy.appendChild(a);
}
</script>
Use code above, if you want just to copy your link to another place. JSFiddle
First, I want to point out that if you will just copy the element that will throw an error because the copied element will have the same id of the first one, so if you will create a copy of your element you don't have to give it the same id.
Try this code:
function copyLink(newDestination){
var dest=document.getElementById(newDestination);
var newLink=document.createElement("a");
var myLink=document.getElementsByClassName("classname")[0];
newLink.href=myLink.href;
newLink.className = myLink.className;
newLink.innerHTML = myLink.innerHTML;
newDestination.appendChild(newLink);
}
The newDestination parameter is the container element of the new Link.
For example if the new Container element has the id "div1":
window.onload = function() {
copyLink(div1);
}
Here's a DEMO.
Thank you very much to everyone for so many prompt replies.
Finally, I was able to use Jquery.
So, I tried the solution given by Andrew Lancaster.
In my page, I added the codes as follows, in this order :
1-
<span id="span1">
<a class="classname" href="www.MySite.com/image-name.jpg">link-text</a>
</span>
<p>
<span id="span2"></span>
</p>
and further down the page :
2-
<script type="text/javascript">
var span1val = $('#span1').html();
$('#span2').html(span1val);
</script>
Therefore, the two expected identical links are properly displayed.
But, unfortunately, I forgot to say something in my initial request:
the original link is in the bottom part of my page
I would like to have the duplicated link in a upper part of my page
So, would you know how to have the duplicated link above the original link ?
By the way, to solve the invalid markup mentioned by David, I just deleted id="idname" from the original link (that I could ignored or replaced by other means).
Thank you again in advance for any new reply.
Patrick
Using Jquery you could wrap your link in a span with an ID and then get the value of that ID and push it into another span id.
HTML
<span id="span1">
<a id="idname" class="classname" href="www.MySite.com/image-name.jpg">link-text</a>
</span>
<p>
<span id="span2"></span>
</p>
jQuery
var span1val = $('#span1').html();
$('#span2').html(span1val);
Example can be found here.
http://jsfiddle.net/3en2Lgmu/5/

Replace text, and replace it back

I am using this code to replace text on a page when a user clicks the link. I would like a way to replace it back to the initial text using another link within the replaced text, without having to reload the page. I tried simply adding the same script within the replaced text and switching 'place' and 'rep_place' but it didn't work. Any ideas? I am sort of a novice at coding so thanks for any advice.
<div id="place">
Initial text here
<SCRIPT LANGUAGE="JavaScript">
function replaceContentInContainer(target,source) {
document.getElementById(target).innerHTML = document.getElementById(source).innerHTML;
}
</script>
<div class="text" onClick="replaceContentInContainer('place', 'rep_place')">
<u>Link to replace text</u></div></div>
<div id="replacements" style="display:none">
<span id="rep_place">
Replacement text here
</div></span>
Where do you store the original text? Consider what you're doing in some simpler code...
a = 123;
b = 456;
a = b;
// now how do you get the original value of "a"?
You need to store that value somewhere:
a = 123;
b = 456;
temp = a;
a = b;
// to reset "a", set it to "temp"
So in your case, you need to store that content somewhere. It looks like the "source" is a hidden element, it can just as easily hold the replaced value. That way values are swapped, not just copied. Something like this:
function replaceContentInContainer(target,source) {
var temp = document.getElementById(target).innerHTML;
document.getElementById(target).innerHTML = document.getElementById(source).innerHTML;
document.getElementById(source).innerHTML = temp;
}
So replace them you simply call:
replaceContentInContainer('place', 'rep_place')
Then to swap them back:
replaceContentInContainer('rep_place', 'place')
Note that this will replace the contents of the "source" element until they're swapped back again. From the current code we can't know if that will affect anything else on the page. If so, you might use a different element to store the original values. That could get complex quickly if you have a lot of values that you need to store.
How's this? I store the initial content in an element of an array called initialContent.
<div id="place">
Initial text here [replace]
</div>
<div id="replacements" style="display:none">
<span id="rep_place">
Replacement text here [revert]
</span>
</div>
<SCRIPT LANGUAGE="JavaScript">
var initialContent = [];
function replaceContentInContainer(target,source) {
initialContent[target] = document.getElementById(target).innerHTML;
document.getElementById(target).innerHTML = document.getElementById(source).innerHTML;
}
function showInitialContent(target) {
document.getElementById(target).innerHTML = initialContent[target];
}
</SCRIPT>
Working example: http://jsbin.com/huxodire/1/
The main changes I did were the following:
I used textContent instead of innerHTML because the later replaces the whole DOM contents and that includes removing your link to replace the text. There was no way to generate that event afterwards.
I closed the first div or else all the text would be removed with the innerText including the text that works as a link.
You said you wanted to replace back to the original text, so I used a variable to hold the last value only if this existed.
Hope this helps, let me know if you need more assistance.
The div tags were mixed up and wiping out your link after running it. I just worked with your code and showed how you could switch.
<div id="place">
Initial text here
</div>
<SCRIPT LANGUAGE="JavaScript">
function replaceContentInContainer(target,source) {
document.getElementById(target).innerHTML =
document.getElementById(source).innerHTML;
}
</script>
<div class="text" onClick="replaceContentInContainer('place', 'rep_place')">
<u>Link to replace text</u></div>
<div class="text" onClick="replaceContentInContainer('place', 'original_place')">
<u>Link to restore text</u></div>
<div id="replacements" style="display:none">
<span id="rep_place">
Replacement text here
</span>
<span id="original_place">
Initial text here
</span>
</div>

Get color from jscolor

I am using jscolor.js from http://jscolor.com
The function below is what I used before to add the users input to a code generator. They typed in the hex colour of their choice and it would get added to the code generator.
function changeOutlineColour(){
var jj_input4 = document.getElementById('jj_input4').value;
document.getElementById('outlinecolour').innerHTML = jj_input4;
document.getElementById('jj_preview2').style.outlineColor = '#' + jj_input4;
}
This is where the code gets added to, inbetween the span tags
<div class="jj_yourcode">
<p>#<span id="outlinecolour"></span>;</p>
</div>
Now that I am using jscolor, the hex code doesnt get added the the generator so my question is, what changes do I have to make to the function so that is does?
Figured it out using a button
HTML:
<button type="submit" onClick="submitColour()">Set Colour</button>
Javascript:
function submitColour(){
var jj_input4 = document.getElementById('jj_input4').value;
document.getElementById('outlinecolour').innerHTML = jj_input4;
}

Categories