Right now, I'm trying to create a WYSIWYG HTML editor, and I need to display the source code of a contentEditable div next to the div that is being edited. I'm trying to automatically synchronize these two elements, and I'm not yet sure what the best approach would be.
<div contentEditable ="true" id = "showSourceCodeForThis">test 1</div>
<input type = "text" id = "showSourceCodeHere"></input>
Whenever the contentEditable div is updated, I want the displayed source code to be automatically updated as well, and vice-versa. Is it possible to synchronize the contents of a contenteditable div with a text box that shows the source code of the contenteditable div?
Here is one working solution: http://jsfiddle.net/sDdN3/14/
HTML:
<div contentEditable ="true" id = "showSourceCodeForThis">test 1</div>
<input type = "text" id = "showSourceCodeHere"></input>
JavaScript:
function test(){
var divs = document.getElementById('showSourceCodeForThis');
divs.onkeyup=function(event){
document.getElementById('showSourceCodeHere').value = document.getElementById('showSourceCodeForThis').innerHTML;
}
}
function test2(){
var divs = document.getElementById('showSourceCodeHere');
divs.onkeyup=function(event){
document.getElementById('showSourceCodeForThis').innerHTML = document.getElementById('showSourceCodeHere').value;
}
}
test();
test2();
Related
Hello i am trying to dynamically create divs, at a button click, and append a span element to it. When i click the button a function is called and a div is created but i can't display the contents of the span element.
I basically have a container div and want to create divs inside that container, with the contents of the span element present, through javascript.
function createDiv ()
{
var boxEle = document.createElement('div');
var container = document.querySelector('.container');
boxEle.setAttribute('id','box_id'+ dynamicid());
//console.log(boxEle.id);
boxEle.style.width = "40%";
boxEle.style.height = "500px";
boxEle.style.backgroundColor = 'yellow';
boxEle.style.margin = "20px";
boxEle.style.boxsizing = "border-box";
boxEle.innerHTML = '<span class="list-names"></span>';
container.appendChild(boxEle);
}
This span will show a list of names that were fetched from a database. The idea was to create how many divs i wanted with the list present in every created div.
If i change the span element and insert some random text it works fine. I also tried to create a php file with just the span element there and used jquery load to insert it into my div but it only works on the first div, if i create more than one then nothing shows on the rest.
After looking on here i tried to do everything with jquery but the problem was the same.
$(function(){
var count = 0;
$('#creatediv_id').click(function(){
$('#container_id').append('<div id="first'+count+'"><span class="list-names"></span></div>');
count++;
});
});
Don't really know what else i should try or if it is doomed.
Actually your code works just fine, did you check DOM after click, because elements are there, but your span hasn't got any text, so there is nothing on the screen, here is example with jQuery way:
$(function(){
var count = 0;
$('#creatediv_id').click(function(){
$('#container_id').append('<div id="first'+count+'"><span class="list-names">test</span></div>');
count++;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="creatediv_id">Create Div</button>
<div id="container_id"></div>
I'm looking to design a form that will accept HTML tags and convert them into styled text displayed in a separate text area. Think a very simple JSbin. I thought that this would work:
document.getElementById('tagName').innerHTML='variable'
But this displays the text along with the tags - I just want the tag.
I need some helpful hints or a nudge in the direction I should go. Thanks!
Take a look at https://gomakethings.com/two-ways-to-get-and-set-html-content-with-vanilla-javascript/ you want to use .textContent to get the text without the tags.
document.getElementById('text').innerHTML=document.getElementById('html-elements').textContent
<div id="html-elements">
<button>hello</button> <strong><em>world</em></strong>
</div>
<div id="text"></div>
I think what you're looking for is contenteditable attr.
You can use that attribute in order to make editable a DOM element like div, span, p, and so on.
For more info go to Making content editable
On the order hand, to be able to write HTML from a textarea and the entered HTML text be rendered into the contenteditable element, you need to bind some kind of event in order to get the wrote HTML and then set it into the target contenteditable element.
var variable = '<b>EleFromStack</b>',
tagName = document.getElementById('tagName'),
textarea = document.getElementById('textarea');
textarea.addEventListener('input', function() {
tagName.innerHTML = this.value;
});
div {
width: 300px;
border: 1px dashed #000
}
<textarea id='textarea'>
</textarea>
<div id='tagName' contenteditable='true'>
</div>
I think what you want to do is create an input then listen to the value changes and display the inner html in another div
<!-- HTML -->
<input type="text" id="input"></input>
<div id="output"></div>
Then listen to the change and update the output
//JS
const input = document.querySelector('#input'),
output = document.querySelector('#output');
button.addEventListener('change', () => {
output.innerHTML = input.value;
})
(JSBIN: https://jsbin.com/genokox/edit?html,js,console,outputjsbin)
The problem is you're trying to write HTML into a text area. The text area is reserved, by the browser engine, to post plain text. Instead of writing out your content to a textarea write it to a DIV or some other content block designed to contain HTML.
There are a few things I'd like help with. I have found pieces of the solution on stack overflow, but can't quite put it all together.
I'd want the user to add text to a text area, click a button to post the text to a parent element, and finally have the option to remove the posted text element from the parent. This is as far as I have gotten on the code. Thanks in advance for any suggestions.
<body>
<h4>A News Module.</h4>
<div id="container">
<p>Here is some news.</p>
</div>
<textarea id="alltext" rows="13" cols="53" placeholder="Add your news here."></textarea>
<br>
<input type="button" value="Submit News" onclick="addNews()">
<script>
function addNews(){
var addEl = document.createElement('p');
document.getElementById('container').appendChild(addEl);
}
function deleteNews(){
var deleteEl = document.getElementById('container');
deleteEl.parentNode.removeChild(deleteEl);
}
</script>
</body>
Also on jsfiddle: https://jsfiddle.net/lotus89/nvo1s5re/
Two things.
1) You need to add the text from the textboxt into the newly created element. Add the folowing line right after the creation:
addEl.textContent = document.getElementById('alltext').value;
This grabs the value of the texbox and sets it as the textContent of the newly created element.
2) addNews() needs to be in the global scope for jsfiddle
Add this line:
window.addNews = addNews;
Edit: Update fiddle - https://jsfiddle.net/rtj998gL/1/
Take a look at your addNews code. You're creating a new p and adding it to the container, but you're never putting anything in it.
function addNews(){
//Create blank P element
var addEl = document.createElement('p');
//Set the new element's content to match the textarea value
addEl.innerHTML = document.getElementById("alltext").value;
//Add it to the container
document.getElementById('container').appendChild(addEl);
}
If you put your <script> in the head of your page, your code would work fine. But being that it's in the <body>, your functions are not being found because they are out-of-scope. You can adjust for this by doing window.addNews = addNews within your <script> tags.
I have the following DIV elements shown together on a page:
<div>This Link Shows Up First</div>
<div style="display:none; id:showUpAfterAwesomeButtonIsClicked;">This is the value that should show up after the link above is clicked.</div>
As you can see, the This Link Shows Up First text is displayed initially at page load. I have the following javascript which determines if the user has clicked the This Link Shows Up First text. The goal is to display the This is the value that should show up after the link above is clicked div if the awesome-button is hidden.
custom.valueAwesome = function() {
var awesomeButton = document.getElementById('awesome-button');
awesomeButton.style.visibility = 'hidden';
document.getElementById("showUpAfterAwesomeButtonIsClicked").style.display = '';
gadash.executeCommandQueue();
};
I have tested this script and it is successfully changing the state of the showUpAfterAwesomeButtonIsClicked link to hidden when the user click on the link. This leads me to believe that the connection that needs to be updated has to do with this line:
document.getElementById("showUpAfterAwesomeButtonIsClicked").style.display = '';
I have tried several variations of this line. Is there a better way to achieve this result? Thanks.
You cannot set an id attribute in CSS. It actually needs to be an attribute on the xml tag.
Change
<div style="display:none; id:showUpAfterAwesomeButtonIsClicked;">
to
<div id="showUpAfterAwesomeButtonIsClicked" style="display:none; ">
This will allow your document.getElementById to actually select it.
Let's say for example i have a textarea and a toggle button:
<div class="input">
<textarea id="links">
http://facebook.com
http://friendster.com
http://google.com
http://facebook.com
http://friendster.com
</textarea>
Toggle
</div>
How do i make it possible for each link in the textarea to clickable with the click of the toggle button?
$('.toggle').click(function(){
var clickable = false;
if(!clickable){
var links = $(this).closest('.input').find('textarea').val().split('\n');
$.each(links,function(){
//lost here
});
}
return false;
});
You cannot make clickable links inside textarea, they are for a plain text.
There are possible workarounds though, you can make a div, copy formatted content of textarea to this div, when "Toggle" is clicked, and switch textarea and div.
DEMO
Your each function takes index and value parameters that you can use to make your anchors
$.each(links, function (i, val) {
var newA = $("<a />").text(val).attr("href", $.trim(val));
$("#links").append(newA).append("<br>");
});
(Though obviously you'll have to add them to a div, as the fiddle does. As anrie says, textareas can only hold text.)