JSFiddle - React, Tailwind, and code Playground

by adrianhdezm

HTML

<script src="http://cujae.bitbucket.org/libs/tiny_mce/tiny_mce_src.js"></script>
<script src="http://cujae.bitbucket.org/libs/bootstrap/js/bootstrap.js"></script>
<script src="http://cujae.bitbucket.org/libs/bootstrap-editable/js/bootstrap-editable-inline.js"></script>
<script src="http://cujae.bitbucket.org/libs/tricia-input.js"></script>
<a href="#" id="address" data-type="tricia">awesome</a>
<p>
    
<div class='wrapper'>
    <p>JSON will be received in 3 seconds</p>
    <ul id='post'></ul>
</div>

CSS

@import url('http://cujae.bitbucket.org/libs/bootstrap/css/bootstrap.css');
@import url('http://cujae.bitbucket.org/libs/bootstrap-editable/css/bootstrap-editable.css');

.editable-address {
    display: block;
    margin-bottom: 5px;  
}

.editable-address span {
    width: 70px;  
    display: inline-block;
}

JavaScript

$(function(){
    $('#address').editable({
        url: '/post',
        showbuttons: false,
    });
});



new Request.JSON({
    url: '/echo/json/',
    data: {
        json: JSON.encode({text:"<form method=\"post\" action=\"/infoasset/functions/submitFeature?params=noLabel\" class=\"tricia-edit-form modal-form form-horizontal\">\r\n\t<div class=\"modal-header\">\r\n\t\t<button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;<\/button>\r\n\t\t<h3>Edit Ayuda de Tricia <span id=\"6daa94977ab8c614a19f1e3f29b65646-message\" class=\"tricia-richstring-draft-message\"><\/span><\/h3>\r\n\t<\/div>\r\n\t<div class=\"modal-body\">\r\n\t\t<input type=\"hidden\" name=\"parameterName\" value=\"edit_content_page_vvl0somuky7g\" />\r\n\t\t<input type=\"hidden\" name=\"changes\" value=\"\" class=\"changes-hidden\" />\r\n\t\t<input type=\"hidden\" id=\"tricia-on-success-url\" name=\"onSuccessUrl\" value=\"http://cloud.triciahosted.de/infoasset/pages/li564lq8c2xu/Ayuda-de-Tricia\" />\r\n\t\t\r\n\t\r\n\t\t<div>\r\n\t\t\t<div class=\"tricia-edit-control\">\r\n\t\t\t\t<div class=\"tricia-richstring-edit-control \">\r\n    <script type=\"text/javascript\">\r\n        jQuery(document).ready(function(){\r\n\t\t\t/*\r\n\t\t\t * WARNING\r\n\t\t\t * setTimeout has to be used in order to get tinyMCE working in Firefox\r\n\t\t\t * when it has been reloaded via an AJAX call.\r\n\t\t\t * See existing bug report: http://www.tinymce.com/develop/bugtracker_view.php?id=4528\r\n\t\t\t */\r\n            setTimeout(function() {\r\n\t\t\t\ttinyMCE.init({\r\n\t                execcommand_callback: \"triciaCommandHandler\",\r\n\t                mode: \"exact\",\r\n\t                elements: \"6daa94977ab8c614a19f1e3f29b65646\",\r\n\t                height: \"480\",\r\n\t                width: \"100%\",\r\n\t                theme: \"advanced\",\r\n\t                content_css: \"/infoasset/__1nxnoyddupt8c/css/undohtml.css,/infoasset/__1nxnoyddupt8c/css/tricia-richtext.css\",\r\n\t        ...