I would like to understand if I can wrap text in a content editable div.
For example, if a user uses markup to type
### MY TITLE
can I somehow parse that line and create another div that outputs
<b>MY TITLE<b>
I've created a jsfiddle to observe the output, but I don't see much that tells me where a line ENDS to put the closing tag. In addition, the output looks pretty weird after hitting the return key a couple times. It seems difficult to work with and I was hoping there be better indicators of what the user had typed.
"
### test
<div><br></div>"
https://jsfiddle.net/rn2camL4/1/
If I'm understanding correctly, you just want to put bold tags around the output, if so, you can accomplish this with a simple concatenation.
I brought your jsfiddle over into the snippet below, please run it to see it in action.
When you console.log(boldHtml) you will see the output wrapped in <b></b>.
$('#editable').on('keydown', function(e) {
let html = $(this).html();
//concatenate bold tags around your html and declare new boldHtml variable
let boldHtml = '<b>' + html + '</b>'
$('#render').html(boldHtml) // replace test with <b>test</b>
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="editable" contenteditable="true" style="background-color:white; outline: 0px solid transparent; width: 100%; padding: 16px;">
### test
</div>
<div id='render'>
</div>
Alternatively, if you're fine with using a library, you can use markdown-it for example and have it convert any type of markdown into HTML.
I've applied the logic to your code below.
When you console.log(markdown) you will see the correct HTML tags around your output.
const md = window.markdownit();
$('#editable').on('keydown', function(e) {
let html = $(this).html();
let markdown = md.render(html);
$('#render').html(markdown) // replace any markdown with proper html
//console.log(markdown);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/markdown-it#10.0.0/dist/markdown-it.min.js"></script>
<div id="editable" contenteditable="true" style="background-color:white; outline: 0px solid transparent; width: 100%; padding: 16px;">
Enter ANY markdown here
</div>
<div id='render'>
</div>
Related
I need to define a css style, something like <special> </special>,
special {
color: #000000;
background: #ffff00;
}
and use it in a innerHTML.
However in angular it seems not easy as it have Sanitization method.
I tried use it in the following way,
result = this.sanitizer.bypassSecurityTrustHtml(result.trim());
Right now the error in console is no longer seen, although my <special> is still not working.
Also, when use string to do the word count, result.length will simply include all the characters of <special>Hi</special>, not just Hi.
How to use my <special> style and count the real characters that is shown? Thank you.
BTW I tried to use css class too, which is also not working...
.special {
color: #000000;
background: #ffff00;
}
together with
<div class="special"> Hi </div>
in the string for innerHTML.
<div class="special"> Hi </div> works perfectly when not with innerHTML,
and in Chrome Developer Tools it is shown as
<div _ngcontent-c4 class="special">Hi</div>
Any idea of what _ngcontent-c4 is?
This is one way to do it using a class to style your special element.
.special {
display: inline;
color: orangered;
}
<html ng-app>
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js">
</script>
<input type="text" ng-model="sometext" /> <!--Proof that this is angualar-->
<h1>Hello <div class="special">{{ sometext }}</div> </h1>
</html>
I want to build a simple online editor like plunker. Does anyone know how to accomplish the live preview, once several files (.html, .css, .js, .json) have been uploaded?
Taking JSBin as example, there are only 1 html text, 1 css text and 1 js text, so it is simple: we just need to construct one complete html file from these texts and use Document.write().
However, how do editors such as plunker, brackets, vscode do live preview? Do they also construct one complete file by themselves or they use some third-party tools?
Live previews are pretty easy. Just replace the HTML of an area on the page with the HTML the user provided. In practice, you probably want to do this in a sandboxed iframe for security purposes.
The snippet below shows how this can be done, all in JavaScript. Try running the snippet and typing in the box.
function doLivePreview() {
$("#output").html($("#source").val());
}
$(function() {
doLivePreview();
$("#source").on("input", doLivePreview);
});
#source {
float: left;
}
#output {
float: left;
border: 1px solid #AAA;
margin-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="source" cols="50" rows="8">
Type to see a live preview
<br/>
<a href="https://www.google.com">Google<a>
</textarea>
<div id="output">
</div>
I need to include a HTML which adds a preview pane inside a JavaScript function, something like this :
<html>
<body>
<div style="height: 70%; border: 1px solid #000; overflow: auto;">
<div style="background: #ddd; height: 1000px;">master</div>
</div>
<div style="height: 30%; border: 1px solid; #000; overflow: auto;">
<div style="background: #ddd; height: 1000px;">detail</div>
</div>
</body>
</html>
just use quotes around html like
var a = 'some string';
just you will have to have all hmtl in 1 line or add line by line to var.
Or use ES5 and just make like this:
let a = `any
string
with new lines`;
Or
Use jsx with ReactJs for html inside js! It's awesome :-) Last time i wrote html outside js was like 2 years ago..
https://facebook.github.io/react/
great place to start learning:
https://www.youtube.com/playlist?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr
I'm not exactly sure if this is what you are asking...
Do you want to add HTML dynamically via JavaScript?
This is a way to do it with jQuery:
var html = '<div id="whatever"></div>';
$("body").prepend(html);
If you want to write html markup in javascript you can move towards React JS this is very power full engine for writing html markup in javascript it provides lot of others things.
You can:
use some template engine like:
mustaches https://github.com/janl/mustache.js/
angular https://angularjs.org/
write the code as text inside a var and then append it to them dom. (see document.write())
With this code in my document,
<body>
<a style="font-family: Arial, Helvetica, sans-serif;">Text area:</a><br>
<textarea id="html_code" style="
font-family: 'Courier New', Courier, monospace;
width: 650px;
height: 400px;
padding: 7.5px;
margin-top: 5px;
resize: vertical;" spellcheck="false"></textarea>
<script>
document.getElementById("html_code").value = '<!doctype html>\n<html>\n<head>\n<meta charset="utf-8">\n</head>\n<body>\n<script>\n</script>\n</body>\n</html>';
</script>
</body>
there is an unexpected result. The text are not correctly displayed within the textarea.
Here is a preview of the result of the above code.
What is causing this to happen?
Because you are putting
<script>\n</script>
on
'<!doctype html>\n<html>\n<head>\n<meta charset="utf-8">\n</head>\n<body><script>\n</script>\n</body>\n</html>',
which is not treating as string in textarea but tag.
UPDATE
change from </script> to <\/script> does solve your problem.
DEMO
try this
document.getElementById("html_code").innerHTML = '<!doctype html>\n<html>\n<head>\n<meta charset="utf-8">\n</head>\n<body>\n<script>\n</script>\n</body>\n</html>';
make sure you escape the html from the string, it's not showing here. Click edit on the answer to see it.
Number one, first one foremost you do not want to add html markup code to a Textarea. If you need to add raw HTML to a container use a div or p. You can use the ContentEditable attribute option of the div for adding html markup to a container. https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable
You would add the markup to the contenteditable div like so: document.getElementById("html_code").innerHTML = '<!doctype html>\ If your adding this HTML to a div that is contenteditable that exist with-in a current DOM document you do not need the
'<!doctype html>\n<html>\n<head>\n<meta charset="utf-8">\n</head>\n<body>\n<
portions of your code because you're adding a new document and a new body to a current document. That is not right. The only thing I see you need to add is the script and if that is the case you just need to add that script to the head of the document.
What are you wanting the end result to be?
I have some problem working with DIV Tag and Form input fields. I get the value of input field using javascript. Javascript working fine. It gets the input field value and displays in a DIV tag. The problem is, when i give a long input or long sentence, it displays in the div tag as it is. I want it to be displayed not in a long single line but in the form of paragraph. Here is my code.
<script>
function myFunc(){
var str = document.myform.aaa.value;
document.getElementById('mydiv').innerHTML=str;
}
</script>
<form>
<input type="text" name="aaa" />
<input type="button" value="Post" onclick="myFunc();" >
</form>
<div id="mydiv" width="500px" height="300px">Old text</div>
If i give it an input for example:
hello there, how are you hello there, how are youhello there, how are youhello there.
it displays it in a single line instead of paragraph format. I want it to display the above sentence in this form:
hello there, how are you hello there,
how are youhello there, how are youhello
there.
I have somewhat sort it out myself. I mean to say, if i write a sentence with spaces, it works fine but if there is a long line of letters without any space, then it does not work. What i want is, either i can type with space and without space, it should work both ways.
This doesn't have anything to do with javascript. By default a DIV tag will expand to 100% of its parent element.
If you set the width of the div to a specific percentage or pixel width, then the contents of that div will wrap accordingly.
You can use CSS to define the width, but you'll have to know how wide you would like to set it.
#mydiv {
width:50%; //I just guessed at this number
}
or
#mydiv {
width:100px;
}
alternately, you could use javascript to set it. (though it's probably best to set it using CSS)
document.getElementById('mydiv').style = "width:50%';
Try using css to set the width and height of the <div> rather than attributes.
jsFiddle
<div id="mydiv" style="width: 200px; height: 200px;">Old text</div>
Better yet create a style:
.comments {
width: 200px;
height: 200px;
}
<div id="mydiv" class="comments">Old text</div>
Use the word-wrap to fix the issue where there is no spaces.
word-wrap:break-word