Can't get TinyMCE 4.0.6 to work - html

This is driving me crazy....
I'm trying to get TinyMCE v4.0.6 to work, and I'm probably doing something very dumb, since I can't get the editor to display at all.
I could get a v3.5.8 editor to show in a page similar to what follows, but no joy with this:
<!DOCTYPE html>
<html>
<head>
<title>TinyMCE Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "textarea"
});
</script>
</head>
<body>
<form method="post" action="something">
<textarea name="content" cols="100" rows="15">content</textarea>
<input type="submit" value="Save" />
</form>
</body>
</html>
I've verified (using FireBug) that the path to the tinymce JavaScript file is correct, but other than that, I'm completely at a loss.
Thanks for any suggestions..

After your comment, I took your HTML and checked it with a CDN copy of tinyMCE and it work fine: http://codepen.io/anon/pen/mIvFg so I can only assume it's an error with your tinymce.min.js file.

Related

When form submitted: The character encoding of the html document was not declared (although it is)

I've seen a few questions relating to this, but almost all of them use php. I have just a simple html file, with an input and a button. I've tried using proposed solutions, but I always get the error after I submit the form with the button. I have included the character enconding as utf-8. I also have the <meta charset="utf-8" /> but commented out upon seeing other solutions on SO, which I have implemented to no avail.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="index.js"></script>
<title>My Page</title>
</head>
<body>
<form name="data-form" enctype="multipart/form-data" method="post">
<input type="file" id="file-input">
<button id="form-btn" type="submit">Load File</button>
</form>
</body>
</html>
Based on my rudimentary understanding, this should read the file no problem. I'm trying to upload a JSON file, not sure if that's the issue. It is a valid JSON, I have checked and double-checked.
The index.js file that is linked, currently does not interact with the file upload in anyway, so in the interest of brevity I have not included it.
EDIT
I "solved" this, I guess. More like bypassed it. I wrote a JS function (readFile()) to read on click, and changed the button's type to type="button" and put an onclick="readFile()" and now it reads the file and eecutes properly. Hopefully maybe this will help someone else who has a similar problem. I guess this can be closed.
See edit. I used a modified version of the IFFE answer posted in this question How to access data of uploaded JSON file?. I'm not sure if this is "technically" the solution but it works for my purposes.

Vue - <head> elements appearing inside <body>

Using Vue as the frontend and Django as the backend. I am serving the production version of npm run build via django. index.html is automatically generated. However, the <head> elements are inside of <body>. I tried a few articles and sees no difference.
<!DOCTYPE html>
<html lang="">
<head>
<input type="hidden" name="csrfmiddlewaretoken" value="" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<!--[if IE]><link rel="icon" href="/static/favicon.ico"/><![endif]-->
<title></title>
manifests / css / app.js omitted
</head>
<body style="background-color: #131516;">
<noscript
><strong
>We're sorry but quicktrack doesn't work properly without
JavaScript enabled. Please enable it to continue.</strong
></noscript
>
<div id="app"></div>
<script src="/static/js/chunk-vendors.3aa94991.js"></script>
<script src="/static/js/app.40e1aa2a.js"></script>
</body>
</html>
but when visiting the site this happens
Reading some other stackoverflow questions I found that this could be encoding issue.
file -i index.html shows charset=us-ascii.
I tried digging around webpack looking for encoding but I couldn't find one.
How should I go about fixing this issue?
No, it's not an encoding issue. It's a parsing issue. The HTML parser knows that the </html> and <body> tags (among others) are optional, and it knows that input elements go in the body, so when it sees the <input type="hidden" ...> tag, it assumes that the head element is complete and the body element has started. So it puts the input element and all following elements in the body.
It ignores the </html> and <body> tags when it eventually sees them, except that it merges the style attribute from the <body> tag on to the body element that it created earlier.
To fix, move the <input type="hidden" ...> tag to immediately after the <body> tag.

404 not found on method POST on form

I got this simple form on a page. I run this on localhost but when I run the form it shall redirect to http://localhost:63342/welcome.html
but instead I get the 404 not found message.
When I mark the url in the browser and hit return the correct page shows. But the redirect doesnt work when using method="POST" to localhost
Any idea how to solve this?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form method="POST" action="welcome.html">
<input type="text" id="test" name="test"/>
<input type="submit" value="test"/>
</form>
</body>
</html>
I think you want to use the GET method instead of the POST method.
Have a look here for more information: http://www.w3schools.com/TAGS/ref_httpmethods.asp

Several Links to the Same URL

I have an HTML file that has several links to the same URL. Is there a way to specify the URL once, instead of in each anchor? Currently, if I change the URL, I manually change it in each anchor. I would consider a Javascript solution, but would prefer something a bit simpler and lightweight. Here is a code sample with two links to google.com:
<HTML>
<HEAD>
</HEAD>
<BODY>
<P>
Preferred search engine
</P>
<HR>
<P>
Google
</P>
</BODY>
</HTML>
You can use the <base> element:
For example:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<base href="https://www.google.com/">
</head>
<body>
<p>
Preferred search engine
</p>
Google
</p>
</body>
</html>
Any links you specicfy will be relative to the base URL, so if you had Preferred search engine the link would be https://www.google.com/foo.html
You have to use javascript to do that. jQuery will do nicely:
$(function() {
$('a').attr('href','https://www.google.com');
});
Then you can call the same thing if the URL changed.
If you don't want to use jQuery this is the equivalent js code:
<script>
function ChangeHref(){
document.getElementById("a").setAttribute("onclick", "location.href='https://www.google.com'");
}
</script>
You cal trigger the changehref from anywhere you want.
BTW: the above function is equal to document.ready.

Adjust attribute of html textarea dynamically?

I have the following textarea:
<textarea id="edit-note-text" autocorrect="on"><%= text %></textarea>
While this text area is in use or, in other words, while someone is typing, I need to dynamically set the autocorrect attribute to off and back to on:
<textarea id="edit-note-text" autocorrect="off"><%= text %></textarea>
Unfortunately this doesn't seem to work:
document.getElementById(‘textarea’).setAttribute(‘autocorrect’, ‘off’);
I'm in a iOS UIWebView and could try to do this natively if possible as well but this is what comes to mind first. Is this possible?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
//Declare functions
function taFocus(element){ element.setAttribute("autocorrect", "off")}
function taBlur(element){ element.setAttribute("autocorrect", "on")}
</script>
</head>
<body>
<textarea id="edit-note-text" autocorrect="on" onfocus="taFocus(this);" onblur="taBlur(this);" >texto</textarea>
<textarea id="edit-note-text2" autocorrect="on">texto</textarea>
</body>
</html>
Some like this maybe that you need