Tuesday, September 23, 2014

Tinymce + Simplenote


No install software such as a simple editor, can be a real advantage. Here are two.

A no install web editor is tinymce (http://www.tinymce.com/index.php) The demo version is nothing to look at, but if you download the development version and change one line of code, it becomes a bit more powerful.

Original:

<!DOCTYPE html>
<html>
<head><!-- Hosted -->
<script src="tinymce.js"></script>
<script>tinymce.init({selector:'textarea'});</script>
</head>
<body>
 <textarea>Your content here.</textarea>
</body>
</html>
 

With the development package it becomes:

<!DOCTYPE html>
<html>
<head><!-- CDN hosted by Cachefly -->
<script src="tinymce.dev.js"></script>
<script>tinymce.init({selector:'textarea'});</script>
</head>
<body>
    <textarea>Your content here.</textarea>
</body>
</html>

Another nice little editor is at http://ckeditor.com/



Then you could just build one yourself. And ever just want to write down some notes and do not care that it looks fancy or not?  Here is just what you need is a simple html5 no frills note taker. This perfect for a system that will only let you use the web browser and a usb device to save data. Warning: There could be some security issues with this so use carefully.




Code for editor just shown:

<html>
<body>

<table>
    <tr><td>Text to Save:</td></tr>
    <tr>
        <td colspan="3">
            <textarea id="inputTextToSave" style="width:512px;height:256px"></textarea>
        </td>
    </tr>
    <tr>
        <td>Filename to Save As:</td>
        <td><input id="inputFileNameToSaveAs"></input></td>
        <td><button onclick="saveTextAsFile()">Save Text to File</button></td>
    </tr>
    <tr>
        <td>Select a File to Load:</td>
        <td><input type="file" id="fileToLoad"></td>
        <td><button onclick="loadFileAsText()">Load Selected File</button><td>
    </tr>
</table>

<script type='text/javascript'>

function saveTextAsFile()
{
    var textToWrite = document.getElementById("inputTextToSave").value;
    var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
    var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;

    var downloadLink = document.createElement("a");
    downloadLink.download = fileNameToSaveAs;
    downloadLink.innerHTML = "Download File";
    if (window.webkitURL != null)
    {
        // Chrome allows the link to be clicked
        // without actually adding it to the DOM.
        downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
    }
    else
    {
        // Firefox requires the link to be added to the DOM
        // before it can be clicked.
        downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
        downloadLink.onclick = destroyClickedElement;
        downloadLink.style.display = "none";
        document.body.appendChild(downloadLink);
    }

    downloadLink.click();
}

function destroyClickedElement(event)
{
    document.body.removeChild(event.target);
}

function loadFileAsText()
{
    var fileToLoad = document.getElementById("fileToLoad").files[0];

    var fileReader = new FileReader();
    fileReader.onload = function(fileLoadedEvent)
    {
        var textFromFileLoaded = fileLoadedEvent.target.result;
        document.getElementById("inputTextToSave").value = textFromFileLoaded;
    };
    fileReader.readAsText(fileToLoad, "UTF-8");
}

</script>

</body>
</html>

No comments:

Post a Comment