Posted by
Ted on
URL: https://discuss.asciidoctor.org/Asciidoc-tor-for-PHP-customers-tp2329p2332.html
For PHP and JavaScript based wikis, I think the simplest way would be to add Asciidoctor.js (the JavaScript version). In my opinion this could practically be plugged into any web based CMS. Just store the content as plain AsciiDoc text.
Check out this very simple HTML code following. Get the whole thing here:
https://github.com/tedbergeron/simple-Asciidoctor.js-webpageThe only things you need to make it work
* index.html (posted here)
* asciidoctor.js
* opal.js
* asciidoctor.css (or another Asciidoctor theme)
This code adds in 3 lines for Font-Awesome because I really like icons for the Admonition blocks, but it is not required.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Asciidoctor.js Editor | Viewer</title>
<link rel="stylesheet" type="text/css" href="themes/asciidoctor.css">
<link rel="stylesheet" href="
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" />
</head>
<body>
<div id="editorPanel" style="float: left;">
<textarea id="txtAsciiDoc" rows="15" cols="40" border=1>
== AsciiDoc
TIP: Use Asciidoctor.js
Document generated with Asciidoctor {asciidoctor-version}.
</textarea>
</div>
<div id="viewerPanel" style="float: left;">
<div id="content">
This is content area that is replaced with the rendered AsciiDoc.
</div>
</div>
<script src="js/opal.js"></script> <script src="js/asciidoctor.js"></script>
<script type="text/javascript">
var isCalled = false;
function renderAsciiDoc() {
if (!isCalled) {
isCalled = true;
// add attribute options for Font-Awesome by default
var asciidoctorAttributes = Opal.hash2(['attributes'], { 'attributes': ['icons=font@'] }); // by adding the @ symbol, attributes added in line in the asciidoc text takes precedence over this hard-coded attribute
//var html_doc = Opal.Asciidoctor.$render(document.getElementById("txtAsciiDoc").value);
var html_doc = Opal.Asciidoctor.$render(document.getElementById("txtAsciiDoc").value, asciidoctorAttributes);
document.getElementById('content').innerHTML = html_doc;
return false;
}
}
setInterval('isCalled = renderAsciiDoc()', 1000);
// Render HTML from AsciiDoc text
document.getElementById('txtAsciiDoc').addEventListener('keydown', function (e) {
isCalled = renderAsciiDoc();
}, false);
</script></body>
</html>
The only difficulty I've run into incorporating this into websites, is getting the asciidoctor.css themes to play nice with the rest of the website's CSS. My solution has been to prefix each and every line in the asciidoctor.css with the ID of the div tag where the AsciiDoc is rendered. This has contained the Asciidoctor.css style just to the #content div. In my code example above, it would be #content.
So in the asciidoctor.css
e.g.
#content a:hover { cursor: pointer; }
#content img, #content object, #content embed { max-width: 100%; height: auto; }