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,113 +1,118 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-lite.css"
rel="stylesheet"
/>
<style>
* {
max-width: 100% !important;
height: auto;
word-break: break-all;
word-break: break-word;
}
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-lite.css" rel="stylesheet">
<style>
* {
max-width: 100% !important;
height: auto;
word-break: break-all;
word-break: break-word;
}
#summernote {
width: 100%;
height: 100%;
}
#summernote {
width: 100%;
height: 100%;
}
.note-editor {
border: none !important;
}
</style>
</head>
.note-editor {
border: none !important;
}
</style>
</head>
<body>
<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/summernote/0.8.9/summernote-lite.min.js"></script>
<script>
function domToNode(domNode) {
if (domNode.nodeType == domNode.TEXT_NODE) {
return domNode.data;
}
if (domNode.nodeType != domNode.ELEMENT_NODE) {
return false;
}
var nodeElement = {};
nodeElement.tag = domNode.tagName.toLowerCase();
for (var i = 0; i < domNode.attributes.length; i++) {
var attr = domNode.attributes[i];
if (attr.name == "href" || attr.name == "src") {
if (!nodeElement.attrs) {
nodeElement.attrs = {};
}
nodeElement.attrs[attr.name] = attr.value;
}
}
if (domNode.childNodes.length > 0) {
nodeElement.children = [];
for (var ii = 0; ii < domNode.childNodes.length; ii++) {
var child = domNode.childNodes[ii];
nodeElement.children.push(domToNode(child));
}
}
return nodeElement;
}
<body>
<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/summernote/0.8.9/summernote-lite.min.js"></script>
<script>
function domToNode(domNode) {
if (domNode.nodeType == domNode.TEXT_NODE) {
return domNode.data;
}
if (domNode.nodeType != domNode.ELEMENT_NODE) {
return false;
}
var nodeElement = {};
nodeElement.tag = domNode.tagName.toLowerCase();
for (var i = 0; i < domNode.attributes.length; i++) {
var attr = domNode.attributes[i];
if (attr.name == 'href' || attr.name == 'src') {
if (!nodeElement.attrs) {
nodeElement.attrs = {};
}
nodeElement.attrs[attr.name] = attr.value;
}
}
if (domNode.childNodes.length > 0) {
nodeElement.children = [];
for (var ii = 0; ii < domNode.childNodes.length; ii++) {
var child = domNode.childNodes[ii];
nodeElement.children.push(domToNode(child));
}
}
return nodeElement;
}
function getNodeJson() {
window.android.getText(
JSON.stringify(
domToNode(document.getElementsByClassName("note-editable")[0])
.children
)
);
}
function getNodeJson() {
window.android.getText(JSON.stringify(domToNode(document.getElementsByClassName('note-editable')[0]).children));
}
function uploadImage(file) {
data = new FormData();
data.append("FileUpload", file);
$.ajax({
data: data,
type: "POST",
url: "https://telegra.ph/upload",
cache: false,
contentType: false,
processData: false,
success: function(data) {
if (data) {
$("#summernote").summernote("insertImage", data[0].src);
}
}
});
}
function uploadImage(file) {
data = new FormData();
data.append("FileUpload", file);
$.ajax({
data: data,
type: "POST",
url: "https://telegra.ph/upload",
cache: false,
contentType: false,
processData: false,
success: function (data) {
if (data) {
$('#summernote').summernote('insertImage', data[0].src);
}
}
});
}
$(document).ready(function() {
$("#summernote").summernote({
focus: true,
placeholder: "Start writing...",
styleTags: ["p", "h3", "h4", "blockquote", "pre"],
toolbar: [
["style", ["style", "bold", "italic", "underline", "clear"]],
["para", ["ul", "ol"]],
["insert", ["link", "picture", "hr"]],
["history", ["undo", "redo"]],
["other", ["codeview"]]
],
callbacks: {
onInit: function(e) {
$("#summernote").summernote("fullscreen.toggle");
},
onImageUpload: function(files) {
uploadImage(files[0]);
}
}
});
});
$(document).ready(function () {
$('#summernote').summernote({
height: 1200,
focus: true,
placeholder: 'Start writing...',
styleTags: ['p', 'h3', 'h4', 'blockquote', 'pre'],
toolbar: [
['style', ['style', 'bold', 'italic', 'underline', 'clear']],
['para', ['ul', 'ol']],
['insert', ['link', 'picture', 'hr']],
['history', ['undo', 'redo']],
['other', ['codeview']]
],
callbacks: {
onInit: function (e) {
$("#summernote").summernote("fullscreen.toggle");
},
onImageUpload: function (files) {
uploadImage(files[0]);
}
}
});
});
function setContent(content) {
$('#summernote').summernote('code', content);
}
</script>
</body>
</html>
function setContent(content) {
$("#summernote").summernote("code", content);
}
</script>
</body>
</html>

View File

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