I'm currently facing a situation where I get a whole HTML document as part of a JSON object and would like to let the user edit it in a WYSIWG fashion. My current approach is to use TinyMCE but I'd be open for other suggestion as well.
The problem I'm facing using TinyMCE is that that part of the document is being lost if a user edits it. Would anyone know a solution to work around this?
The below example contains a string with a simple HTML document that is being displayed within the textarea. After the documents loads, you will see that the area contains the whole document. If you continue to click on the "Init" button, it will initialize TinyMCE and you will find that the markup is being read and that you can even change it. The problem is that, regardless of whenever you press save or view the source using the options in "tools", only the body part of the document remains.
The document is actually a out of office message from exchange. The original code is a bit more complex but this is a minimal working example I came up with.
So would anyone happen to know how I could enable a user to still be able to do some formatting in a WYSIWG fashion while also preserving the original HTML markup that is being loaded? That primarily means including the html, head etc. tags.
<!DOCTYPE html>
<html>
<head>
<script src="http://cloud.tinymce.com/stable/tinymce.min.js"></script>
</head>
<body>
<button onclick="tinymce.init({ selector:'textarea', plugins:'code' })">Init</button>
<button onclick="tinyMCE.editors[0].save()">Save</button>
<button onclick="tinyMCE.editors[0].remove()">Remove</button><br />
<textarea id="editorArea" style="width: 100%;" rows="15"></textarea>
<script>
var htmlElements = `
<html xmlns:o="urn:schema-microsoft-com:office:office">
<head>
<style>
body{font-family: sans-serif; font-size: 55pt;}
</style>
</head>
<body>
<div>
<span style="font-size: 7pt">Here is some text.</span>
</div>
</body>
</html>`;
document.getElementById("editorArea").innerHTML = htmlElements;
</script>
</body>
</html>
The fullpage plugins allows someone to work with the entire HTML document when looking at the code view of the content:
https://www.tinymce.com/docs/plugins/fullpage/
When you then save the content you should get back the entire document.
I don't know whether this is the best approach or not. But this is what i did in one of my project. My use case was to render markdown text or html on browser and it should be editable. I used showdown.js in this case, you are free to choose any library.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.6.4/showdown.min.js">
</script>
</head>
<body>
<br />
<div id="editorArea" contentEditable="true" style="width: 100%;"></div>
<script>
var htmlElements = `<html>
<head>
<style>
body{font-family: sans-serif; font-size: 55pt;}
</style>
</head>
<body>
<div>
<span style="font-size: 7pt; color: #dd0000;">Here is some editable text.</span>
</div>
</body>
</html>`;
var converter = new showdown.Converter(),
text = htmlElements,
output = converter.makeHtml(text);
document.getElementById("editorArea").innerHTML = output;
</script>
</body>
</html>
Related
I want to remove/edit several HTML tag in a file.
Minimal example: I have this input HTML file on my disk
<!DOCTYPE html>
<html clang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<style>
.remove-tag { color: #FF0000; }
.remove-div { color: #0000FF; }
</style>
</head>
<body>
<p>Hello world!</p>
<div class="remove-tag">
<p>I just want to remove the open/close div tags</p>
</div>
<div class="remove-div">
<p>I want the remove the div and all its content</p>
</div>
</body>
</html>
I want to process it so that I get this
<!DOCTYPE html>
<html clang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<style>
.remove-tag { color: #FF0000; }
.remove-div { color: #0000FF; }
</style>
</head>
<body>
<p>Hello world!</p>
<p>I just want to remove the open/close div tags</p>
</body>
</html>
What's the easiest/most straightforward way to do it in your opinion? I hope to be able to write some sort of script to locally run on a given file to get the output. Or have some software that does it given a list of rules to follow.
I'm quite confident with regex/sed/..., but using these tools is a big NO NO for playing with HTML tags (and can understand why).
I've read about javascript (getElementsByClassName(), ...). Made some preliminary steps with javascript, installing Node.js. I can't even open a document to retrieve the elements... Looks like I have to install/import jsdom. I'm kinda stuck...
Read about jQuery. Seen several commands examples, but I don't get how to run them on local files. In generl, I'm a completely noob about jQuery.
Read about HTML parsers. Python seems to have a HTML parser library that I can use to accomplish the task.
Also hoped for a HTML parser software; doesn't look like there is any.
Any other hints?
try this script:
<script>
var removeTag= document.getElementsByClassName('remove-tag');
for(var i=0; i<removeTag.length;i++){
var innerHTML = removeTag[i].innerHTML;
let div = document.createElement('div');
div.innerHTML = innerHTML;
insertAfter(div,removeTag[i]);
removeTag[i].remove();
}
var removeDiv= document.getElementsByClassName('remove-div');
for(var i=0; i<removeDiv.length;i++){
removeDiv[i].remove();
}
function insertAfter(newNode, existingNode) {
existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
}
</script>
I'm really new in Wordpress, Javascript and HTML so I know this question is really basic, but I wasn't able to find it solved anywhere.
I want to create some variables in javascript and then display them in my page which is created in Wordpress.
Reading other posts I've found I need to insert a javascript code that at the end stores my variable this way (dummy version):
<script type="javascript">
document.getElementById('test').innerHTML = 'hello';
</script>
And then on the text block I want to display my variable to be displayed I should add this code:
<body>
<p id="test"></p>
</body>
However I've tried adding the javascript in the header (Tatsu header) and also tried adding it in the text block (HTML version) in different combinations and it never worked. Tried adding the script block before and after the body block, and also tried having it inside, before and after the display line.
If I try the following it works:
<body>
<p>hello</p>
</body>
So I guess my problem is that I'm not setting the variable properly.
Can anyone help? Apologies if this is already solved somewhere, spent some hours and wasn't able to find it.
Thank you in advance.
Your problem is the type of which you're using here:
<script type="javascript">
I noticed this whilst constructing an example of this problem.
javascript is not a correct mime type.
It should be text/javascript as per https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
Please note this is not a complete list. Such as application/javascript also being valid. Please also see https://www.iana.org/assignments/media-types/media-types.xhtml
Working example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<p id="test">
This shouldn't show up
</p>
<script type="text/javascript">
console.log("####### JAVASCRIPT IS RUNNING ######")
document.getElementById('test').innerHTML = 'hello';
</script>
</body>
</html>
I am facing a problem about how to create HTML code examples with Prism, either with pure JS or VueJS.
I need to get something like Bootstrap documentation, with several lines of HTML code displayed, indented, and highlighted.
It works when I put the HTML code directly between the pre/code tags, replacing the < with <.
But I want something more automatic, in which you write a line of code, for example to create a button, and under it, you have the code displayed.
So I am looking for a way to copy this line of code between the pre/code tags.
The problem is that either through the data objects of Vuejs (putting it as a string), or with the appendChild or innerHTML DOM methods, it doesn't works.
With VueJS I get a highlighted line of code but I can't have a multi-line example.
With appendChild and innerHTML, is displayed only the content of the element, for example the text between the button or div tags.
What I need is a way to display all the code, from < of the first tag to > of the last one.
How can I achieve this? Is it possible or is HTML impossible to easily display in the browser?
Here is the easy JS example I am working on.
If you uncomment the line between code tags, you will have the working example, the result I want to get from a more automatic way, just writing once the line of code, and then copying it.
Thanks
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>About</title>
</head>
<body>
<div id="gg" class="div" data-modifiers='["div--small", "div--big"]'>About</div>
<pre>
<code id="hh">
<!-- <div class="div" data-modifiers='["div--small", "div--big"]'>About</div>-->
</code>
</pre>
<script>
const example = document.getElementById('gg');
const toDisplay = document.getElementById('hh');
// toDisplay.appendChild(example);
hh.innerHTML = gg.innerHTML;
</script>
</body>
</html>
I finally found the solution using only pure JS (no framework).
I share the solution if one day someone needs it.
You can add Prism to get a highlighted displayed code.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>About</title>
</head>
<body>
<div id="gg" class="div" data-modifiers='["div--small", "div--big"]'>
<p>fff</p>
About
</div>
<pre>
<code id="hh" class="language-html">
</code>
</pre>
<script>
const example = document.getElementById('gg').outerHTML;
const toDisplay = document.getElementById('hh');
const regex = /</gi;
renamed = example.replace(regex , '<');
hh.innerHTML = renamed;
</script>
</body>
</html>
I'm building a C# app (WinForm). I have a javascript component that changes the background color of the webpage. If I put the JS directly into the HTML file it works (ie the background color of the webBrowser appears red).
<!DOCTYPE html>
<<HTML>
<HEAD>
<TITLE>Title</TITLE>
</HEAD>
<BODY BGCOLOR="FFFFFF">
<HR>
<script>
var setBackColor = function () {
document.body.style.backgroundColor = "red";
}
setBackColor();
</script>
<H1>This is a Header</H1>
<H2>This is a Medium Header</H2>
<P> This is a new paragraph!
<P>
<B>This is a new paragraph!</B>
<BR><B><I>This is a new sentence without a paragraph break, in bold italics.</I></B><BR>
<HR>
</BODY>
</HTML>
When I put the JS in an external file and try to access it through the path shown, I get an error that reads...
"The value of the property 'setBackColor' is null or undefined, not a Function object."
<!DOCTYPE html>
<<HTML>
<HEAD>
<TITLE>Title</TITLE>
</HEAD>
<BODY BGCOLOR="FFFFFF">
<HR>
<script type="text/javascript" src=c:\users\local user\documents\visual studio 2015\Projects\HTMLTestApp\HTMLTestApp\Scripts\JavaScript1.js></script>
<body onload="setBackColor()"></body>
<H1>This is a Header</H1>
<H2>This is a Medium Header</H2>
<P> This is a new paragraph!
<P>
<B>This is a new paragraph!</B>
<BR><B><I>This is a new sentence without a paragraph break, in bold italics.</I></B><BR>
<HR>
</BODY>
</HTML>
I am a complete novice coder, so I don't know what I am doing wrong.
Okay this is more of an HTML and javascript thing than it is a web browser control thing.
Take a look at w3schools on the src attribute of scripts.
So first off, you will need the URL for your src attribute in quotes.
Secondly people usually have some kind of directory structure setup with the webpages so they normally use relative paths so that when they copy over from Dev environment on to their webserver it still works.
So if your script folder is one below the folder with the HTML in it then you would use this as your script tag :
<script src="Scripts/JavaScript1.js"> </script>
Also you have your body tag declared twice. That is too many times.
There's a good chance that might be a repeat question, but I couldn't find an answer that seemed to resolve my problem. I'm trying to make a jQuery bit where text is inputted into a text box, a button is clicked, and the text in the text box gets appended to a div. The end product is to make a game, but for now I'm just trying to make sure that the variable gets stored and put into the div. Here's my HTML
<!DOCTYPE html>
<html>
<head>
<title>Maybe a game maybe</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h2>Please enter your name.</h2>
<form name="userInput">
<input type="text" name="textInput"/>
</form>
<button id="confirm">Confirm</button>
<br/>
<div class="textOutput"></div>
</body>
</html>
Here's my CSS
h2 {
font-family:arial;
}
form {
display: inline-block;
}
.list {
font-family:garamond;
color:#cc0000;
}
And here's my jQuery
$(document).ready(function(){
$('#confirm').click(function() {
var playerName = $('input[name=textInput]').val();
$(".textOutput").append("<p>" + playerName + "</p>");
});
});
The idea is that text that gets inputted into the textInput box gets stored in the variable playerName. Then a <p> that contains playerName is appended to the .textOutput <div> when the confirm button is clicked. I'm using a Codecademy tutorial to help me confirm this. The code is almost exactly like the code in the tutorial. The only differences are the names of certain items, and the fact that the confirm button is a button and not a div. The code works perfectly fine in the tutorial, but when I try it in a normal editor, it doesn't work at all. I've even tried copying and pasting the exact code in the tutorial into my editor and still doesn't work. The editor I'm using is Sublime Text 2. I can't find what I'm missing here. Thank you very much in advance.
Please replace
<script type="text/javascript" src="script.js"></script>
with
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
and then try you code:
$(document).ready(function(){
$('#confirm').click(function() {
var playerName = $('input[name=textInput]').val();
$(".textOutput").append("<p>" + playerName + "</p>");
});
});
I presume you are saving it as text file.
You have to save the file as .html or .htm and wrap the script in <script> tag and wrap the css in <style> tag and then open it in a browser.
you need to include the jquery-library:
put e.g.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
inside the head-tag.
You do not have any jQuery libraries in the head tag.
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
Your code works, as shown here. http://jsfiddle.net/haxtbh/2gMgQ/