Improve HTML

This commit is contained in:
Jan-Lukas Else 2019-02-10 10:46:36 +01:00
parent 9857315274
commit 3946d21e68
2 changed files with 163 additions and 156 deletions

View File

@ -1,11 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="utf-8" />
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="viewport" content="width=device-width, initial-scale=1"> <link
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-lite.css" rel="stylesheet"> href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-lite.css"
rel="stylesheet"
/>
<style> <style>
* { * {
max-width: 100% !important; max-width: 100% !important;
@ -23,9 +25,9 @@
border: none !important; border: none !important;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="summernote"></div> <div id="summernote"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-lite.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-lite.min.js"></script>
@ -41,7 +43,7 @@
nodeElement.tag = domNode.tagName.toLowerCase(); nodeElement.tag = domNode.tagName.toLowerCase();
for (var i = 0; i < domNode.attributes.length; i++) { for (var i = 0; i < domNode.attributes.length; i++) {
var attr = domNode.attributes[i]; var attr = domNode.attributes[i];
if (attr.name == 'href' || attr.name == 'src') { if (attr.name == "href" || attr.name == "src") {
if (!nodeElement.attrs) { if (!nodeElement.attrs) {
nodeElement.attrs = {}; nodeElement.attrs = {};
} }
@ -59,7 +61,12 @@
} }
function getNodeJson() { function getNodeJson() {
window.android.getText(JSON.stringify(domToNode(document.getElementsByClassName('note-editable')[0]).children)); window.android.getText(
JSON.stringify(
domToNode(document.getElementsByClassName("note-editable")[0])
.children
)
);
} }
function uploadImage(file) { function uploadImage(file) {
@ -72,32 +79,31 @@
cache: false, cache: false,
contentType: false, contentType: false,
processData: false, processData: false,
success: function (data) { success: function(data) {
if (data) { if (data) {
$('#summernote').summernote('insertImage', data[0].src); $("#summernote").summernote("insertImage", data[0].src);
} }
} }
}); });
} }
$(document).ready(function () { $(document).ready(function() {
$('#summernote').summernote({ $("#summernote").summernote({
height: 1200,
focus: true, focus: true,
placeholder: 'Start writing...', placeholder: "Start writing...",
styleTags: ['p', 'h3', 'h4', 'blockquote', 'pre'], styleTags: ["p", "h3", "h4", "blockquote", "pre"],
toolbar: [ toolbar: [
['style', ['style', 'bold', 'italic', 'underline', 'clear']], ["style", ["style", "bold", "italic", "underline", "clear"]],
['para', ['ul', 'ol']], ["para", ["ul", "ol"]],
['insert', ['link', 'picture', 'hr']], ["insert", ["link", "picture", "hr"]],
['history', ['undo', 'redo']], ["history", ["undo", "redo"]],
['other', ['codeview']] ["other", ["codeview"]]
], ],
callbacks: { callbacks: {
onInit: function (e) { onInit: function(e) {
$("#summernote").summernote("fullscreen.toggle"); $("#summernote").summernote("fullscreen.toggle");
}, },
onImageUpload: function (files) { onImageUpload: function(files) {
uploadImage(files[0]); uploadImage(files[0]);
} }
} }
@ -105,9 +111,8 @@
}); });
function setContent(content) { function setContent(content) {
$('#summernote').summernote('code', content); $("#summernote").summernote("code", content);
} }
</script> </script>
</body> </body>
</html> </html>

View File

@ -1,12 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="utf-8" />
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="viewport" content="width=device-width, initial-scale=1"> <link
<link rel="stylesheet" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css"> href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css"
/>
<style> <style>
* { * {
max-width: 100% !important; max-width: 100% !important;
@ -14,45 +15,46 @@
word-break: break-all; word-break: break-all;
word-break: break-word; word-break: break-word;
} }
</style> </style>
</head> </head>
<body>
<body> <main role="main" class="container">
<main role="main" class="container">
<div id="viewerTitle" class="mt-3"></div> <div id="viewerTitle" class="mt-3"></div>
<div id="viewerAuthor"></div> <div id="viewerAuthor"></div>
<div id="viewerViews"></div> <div id="viewerViews"></div>
<div id="viewerContent"></div> <div id="viewerContent"></div>
</main> </main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script>
<script>
function setTitle(title) { function setTitle(title) {
$('#viewerTitle').html('<h1>' + title + '</h1>'); document.getElementById("viewerTitle").innerHTML =
"<h1>" + title + "</h1>";
} }
function setAuthor(author, url) { function setAuthor(author, url) {
if (author && url && author.length > 0 && url.length > 0) $('#viewerAuthor').html('By <a href="' + url + '">' + author + '</a><br>'); var viewerAuthor = document.getElementById("viewerAuthor");
else if (author && author.length > 0) $('#viewerAuthor').html('By ' + author + '<br>'); if (author && url && author.length > 0 && url.length > 0)
else if (url && url.length > 0) $('#viewerAuthor').html('By <a href="' + url + '"><i>Author</i></a><br>'); viewerAuthor.innerHTML =
else $('#viewerAuthor').html(''); 'By <a href="' + url + '">' + author + "</a><br>";
else if (author && author.length > 0)
viewerAuthor.innerHTML = "By " + author + "<br>";
else if (url && url.length > 0)
viewerAuthor.innerHTML =
'By <a href="' + url + '"><i>Author</i></a><br>';
else viewerAuthor.innerHTML = "";
} }
function setViews(views) { function setViews(views) {
$('#viewerViews').html(views + ' times viewed<br><br>'); document.getElementById("viewerViews").innerHTML =
views + " times viewed<br><br>";
} }
function setDescription(description) { function setDescription(description) {
$('#viewerContent').html(description); document.getElementById("viewerContent").innerHTML = description;
} }
function setContent(content) { function setContent(content) {
$('#viewerContent').html(content); document.getElementById("viewerContent").innerHTML = content;
} }
</script>
</body>
</script>
</body>
</html> </html>