Asciidoc(tor) for PHP customers

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

Asciidoc(tor) for PHP customers

gour
Hello,

my sites are still in PHP and there are tons of CMS-es, Wikis...written in PHP language. Yesterday I was again looking at Tiki (Tiki Wiki CMS Groupware) and wondered what is the plan to help all those customers embrace Asciidoc(tor) markup in their postings, articles etc. ?
Reply | Threaded
Open this post in threaded view
|

Re: Asciidoc(tor) for PHP customers

LightGuardjp
I see two possibilities here, do a call to ruby from php (or java or JavaScript) to do the rendering at some point. The other option is for someone to create and maintain a php implementation.

Obviously for the current situation, the first solution is the only way to do this.

On Thursday, October 9, 2014, gour [via Asciidoctor :: Discussion] <[hidden email]> wrote:
Hello,

my sites are still in PHP and there are tons of CMS-es, Wikis...written in PHP language. Yesterday I was again looking at Tiki (Tiki Wiki CMS Groupware) and wondered what is the plan to help all those customers embrace Asciidoc(tor) markup in their postings, articles etc. ?


If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/Asciidoc-tor-for-PHP-customers-tp2329.html
To start a new topic under Asciidoctor :: Discussion, email <a href="javascript:_e(%7B%7D,&#39;cvml&#39;,&#39;ml-node%2Bs49171n1h37@n6.nabble.com&#39;);" target="_blank">ml-node+s49171n1h37@...
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML


--

Ted
Reply | Threaded
Open this post in threaded view
|

Re: Asciidoc(tor) for PHP customers

Ted
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-webpage

The 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; }
- Ted @TedAtCIS