conferences | speakers | series

wikiLingo - a unified approach to wysiwyg... programming?!?!

home

wikiLingo - a unified approach to wysiwyg... programming?!?!
FOSDEM 2014

wikiLingo is a programming environment that is wysiwyg first. It is parsed JIT and creates a sort of DOM that is traversable and modifiable. wikiLingo comes with wiki markup, but it is so much more than that. It is a cross CMS platform for a living whiteboard.

Imagine a living whiteboard, where you could tell the whiteboard you wanted to have a movie, a tabbed interface, a report, and logic, in sort of pseudo way, and the whiteboard do what you want... without ever writing a line of code. Meet wikiLingo.

Why is wikiLingo different?

  • Editing: wikiLingo uses html5's contenteditable and complements it with javascript that forces it to act the same in modern browsers, thus limiting the amount of code needed for a wysiwyg editor, because you are using the browser, not a monolithic wysiwyg project.
  • Parsing: wikiLingo parses to an object oriented structure, just like a DOM does with html (a POM, or Parsed Object Model). This structure can then be rendered to whatever component is needed abstractly. You want html? fine. wysiwyg html? ok! PDF, sweet! EPUB, no problem. These are abstract layers that can be manipulated at will.
  • WYSIWYG HTML: html is seen as a separate item within wikiLingo, although in the wysiwyg output, there are both standard html and wikiLingo markup html, they are treated completely different.
  • Drag and Drop in WYSIWYG: CKEditor says this is going to be a very complicated task, and it is like they are doing it. They say you can't nest widgets, they are just doing it wrong. What we have come up with is the ability to insert a drag handle image into the page when wysiwyg is needed, this handle forces the plugin to detach from the page when dragging and is then reinserted where the image is dragged to. By doing this, we have ALREADY SOLVED drag and drop.
  • Standardisation: We are already compliant with Drupal, and WordPress, and are brainstorming an easy transition into Tiki.
  • Security: wikiLingo parses html tags, and knows which ones are acceptable (this can be changed with events), when a tag is not acceptable, it is rendered in a way that it is safe, and won't be parsed on the client.
  • Implementation: wikiLingo is event driven, so ANY system can tap into these events and do things like limit certain plugins for security, only allow certain users to user certain plugins. The sky is the limit.
  • CSS and Javascript management: wikiLingo has a css and javascript collector that is used internally, this makes cross platform implementation a breeze!
  • Multi Language: It is a very simple event, wikiLingo is easily tapped into to facilitate any language needed
  • Roadmap?: wikiLingo is built in php, but it is strongly typed in order for it to be used on other platforms in the future... Like C# ;)
  • What is the goal?: To make a wysiwyg tool that a grandma could use.
  • But it is programming?!?: Yes but you don't have to code, it is "programming... without".
  • I've heard enough, I want to see it! ok:

(please note, the is a preview, the site has not launched yet) http://wikiLingoDoesThat.com/demo/editor.php (a simple editor implementation, highlight some text) http://wikiLingoDoesThat.com/demo/mirror.php (if you actually want to code, here you can) http://wikiLingoDoesThat.com/demo/test.php (unit tests) http://wikiLingoDoesThat.com/demo/compare.php (reciprical wikiLingo to html5 wysiwsyg to wikiLingo test, please ignore the php warnings, we are fixing them)

Github Links: The organization: https://github.com/wikilingo The code, and examples of accepted syntax: https://github.com/wikiLingo/wikiLingo The code wiki: https://github.com/wikiLingo/wikiLingo/wiki The drupal plugin: https://github.com/wikiLingo/drupal the wordpress plugin: https://github.com/wikiLingo/wordpress

Speakers: Torsten Fabricius