Internetiniams WYSIWYG teksto redaktoriams skirtas HTML valytuvas

<div class="container">
  <h3><a href="http://tools.mekdrop.name/internetiniams-wysiwyg-teksto-redaktoriams-skirtas-html-valytuvas/" rel="bookmark" title="Permanent Link to Internetiniams WYSIWYG teksto redaktoriams skirtas HTML valytuvas">Internetiniams WYSIWYG teksto redaktoriams skirtas HTML valytuvas</a></h3>

<div class="full-post-content">
    <p>Labai patogu rašyti didesnius tekstus internetui kokiame „<a href="http://www.libreoffice.org/" target="_blank">LibreOffice</a>“, gražiai juos suformatuoti ir tuomet nukopijuoti rezultatą į <a href="http://en.wikipedia.org/wiki/WYSIWYG" target="_blank">WYSIWYG tipo</a>      redaktorių savo naršyklėje. Bet tuomet netikėtai iškyla nauja bėda. Rezultatas neatrodo taip gražiai kaip originalas, nes, pasirodo, kopijuojant buvo pridėta nematomų HTML kodų, kurie tinklalapyje turi visai kitą prasmę. Šis įrankis (tiesa, šiuo
      metu dar gana ankstyvoje stadijoje) yra skirtas būtent tam, kad būtų įmanoma neredaguojant rankomis HTML’o pataisyti rezultatą.</p>
    <form method="post" class="form" action="javascript://" id="tool">
      <fieldset>
        <legend><b>Šaltinis</b></legend>
        <p>
          <textarea cols="80" name="source" id="source" rows="20"></textarea>
        </p>
        <div class="checkbox">
          <label for="option_p_to_div">
            <input id="option_p_to_div" name="p_to_div" type="checkbox" value="yes">&lt;p&gt; į &lt;div&gt;</label>
        </div>
        <div class="checkbox">
          <label for="option_list_to_div">
            <input id="option_list_to_div" name="list_to_div" type="checkbox" value="yes">Sąrašai kaip &lt;div&gt;</label>
        </div>

<p>
          <button type="submit" class="btn btn-primary">Pataisyti</button>
        </p>
      </fieldset>
    </form>
    <fieldset>
      <legend><b>Rezultatas</b></legend>
      <p>
        <textarea cols="80" name="result" id="result" readonly="readonly" rows="20"></textarea>
      </p>
    </fieldset>

</div>

HTML

// main

var main = function($, jForm, loading) {

var obj = jForm('tool'),
    loader = loading('tool'),
    replace = [
      [
        /\r/igm,
        ' '
      ],
      [
        /\n/igm,
        ' '
      ],
      [
        /<(p|li)[^>]*?(\/?)>/igm,
        "<\$1\$2>"
      ],
      [
        /<p><br \/><\/p>/igm,
        ''
      ],
      [
        /<div><br \/><\/div>/igm,
        ''
      ],
      [
        /<div>([ ]+)<p>/i,
        '<div><p>'
      ],
      [
        /<li>([ ]+)<p>/i,
        '<li><p>'
      ],
      [
        /<\/p>([ ]+)<\/li>/i,
        '</p></li>'
      ],
      [
        /<span>(.*?)<\/span>/i,
        "\$1"
      ],
      [
        /<\/li>([ ]+)<li>/i,
        '</li><li>'
      ],
      [
        /<\/p>([ ]+)<p>/i,
        '</p><p>'
      ],
      [
        /<li><p>(.*?)<\/p><\/li>/i,
        "<li>\$1</li>"
      ],
      [
        /<p>(.*?)<\/p>/i,
        "<div>\$1</div>",
        'p_to_div'
      ],
      [
        /<li>(.*?)<\/li>/i,
        "<div style=\"display: list-item;\">\$1</div>",
        'list_to_div'
      ],
      [
        /<ul>(.*?)<\/ul>/i,
        "<div style=\"list-style-type: disc;\">\$1</div>",
        'list_to_div'
      ],
      [
        /<ol>(.*?)<\/ol>/i,
        "<div style=\"list-style-type: hebrew;\">\$1</div>",
        'list_to_div'
      ],
      [
        /<\/div>(\s+)<div>/i,
        '</div><div>'
      ]
    ];

obj.form.submit(function(e) {
    e.preventDefault();
    loader.start();

var ret = tinyMCE.activeEditor.getContent();
    for (var i = 0; i < replace.length; i++) {
      if (replace[i][2] !== undefined && !$('[name=' + replace[i][2] + ']').first().is(':checked')) {
        continue;
      }
      ret = ret.replace(replace[i][0], replace[i][1]);
    }

tinyMCE.get('result').setContent(ret);

loader.stop();
  });
  obj.result.click(function() {
    obj.result.select();
  });
};

$(function() {
  // "jquery", "data/form", "helpers/loading", "tinymce"
  main($, func.data.form($, func.data.result($), func.data.source($), func.helpers.reactions($)), func.helpers.loading($));
  tinymce.init({
    selector: "textarea",
    theme: 'modern',
    toolbar: "insertfile undo redo  | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l      ink image | print preview media fullpage | forecolor backcolor emoticons",
    auto_focus: true,
    menu: {}
  });
});

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

online javascript editor, testing javascript online, online ide, online code editor, html, css, coffeescript, scss online editor

Fiddle Author

Fiddle Meta

External Resources 3

AJAX Requests

Legal, Credits and Links

Language

Doctype

Body tag

Language

Frameworks & Extensions

Load type

Framework <script> attribute

Language

Options

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

online javascript editor, testing javascript online, online ide, online code editor, html, css, coffeescript, scss online editor

Tabs:

Visual:

Embed code Prefer iframe?:

Diff between the saved and locally drafted fiddle:

Fiddle Author

Fiddle Meta

External Resources 3

AJAX Requests

Legal, Credits and Links

Language

Doctype

Body tag

Language

Frameworks & Extensions

Load type

Framework <script> attribute

Language

Options