Статьи

Упрощенный текстовый редактор для вашего следующего веб-приложения на Ruby On Rails

Февраль 3, 2018

Вы хотите прийти в  метапартию ? Хорошо, это не инструмент партии, это политический сайт на немецком языке, где сам член партии создает платформу партии. Видение таково: если вы проголосуете за metapartei, вы получите представительных кандидатов, которые поддерживают мнение нации, а не конкретного лобби. Как член Metapartei вы можете создавать концепции (идеи) и голосовать за них. В один прекрасный день набор всех проголосовавших концепций станет нашей партийной платформой.

Metapartei.de  был написан полностью с рельсами и с помощью NetBeans как IDE (я мог бы заменить aptana ;-)). Это и было действительно весело. Особенно миграции баз данных в рельсах являются фантастическими для производства! Ладно, иногда рубин был не таким уж веселым. Например следующие проходы (очень странно!):

assert_equal 2, "ÄÄa__".mb_chars.index("a", 4)

 

В то же время мы должны решить, как пользователь может вводить не только текст. Если вы разрешите чистый html, то создадите большую дыру в безопасности! Например, кто-то может вставить любую понравившуюся ему функцию javascript, например, с помощью тега <script>. Итак, нам нужен богатый текстовый редактор. Но какой? Существует множество редакторов, позволяющих пользователю разметить текст. Смотрите приложение для некоторых мы оценили. Но мы наконец выбираем

Контроль. TextArea

от Райана Джонсона, потому что он очень маленький и очень настраиваемый. Смотрите  здесь  для примера из жизни. Небольшой компромисс, который мы должны были заплатить, заключался в том, что мы должны были реализовать разговор от вики-текста до HTML. Но это было относительно легко. См. Код ruby ​​(в свободном доступе) для класса WikiText, который реализует следующее поведение:

  • Жирным шрифтом жирным шрифтом
  • «Курсив» — курсив
  • разрывы строк до <br />
  • и ссылки вроде [http://www.metapartei.de Metapartei — отличная идея] на  Metapartei — отличная идея

Вы можете просто добавить другие вещи (просто дайте мне знать, если вы реализуете списки ;-)). Но как вы можете встроить JavaScript с ruby? Вот ответ:

TextArea в Rails

Получите textarea.js из   пакета TextArea и поместите его в public / javascripts. Затем создайте файл textarea_init.js из кода в разделе кода javascript. Затем вставьте

<%= javascript_include_tag 'textarea' %>

 

в app / views / layouts / application.html.erb (<head> ЗДЕСЬ </ head>). Затем непосредственно перед закрывающим тегом </ body> напишите:

<%= javascript_include_tag 'textarea_init' %>

Кроме того, вы должны добавить специальный CSS-файл mark_down и получить его из проекта TextArea.

Теперь вы можете использовать его где угодно. Например, в новом шаблоне контроллера комментариев. В new.html.erb добавьте следующую строку в качестве самой последней:

<div id="markdown_formatted"></div>

Но убедитесь, что вы указали хотя бы один идентификатор для текстового содержимого (например, как мы это сделали: comment_content). Смотрите раздел кода JavaScript.

Вот и все. Надеюсь, тебе понравится!

Рубиновый код 

class WikiText
  def initialize(str)
    # process umlaute correctly
    @text = str.mb_chars
  end

  def to_html
    str, ii = process_sub_tag(nil, 0)
    str
  end  

  # returns the resulting string and the processed characters
  def process_sub_tag(until_tag_name, from_index)
    ii = from_index
    if(until_tag_name != nil)
      found_tag_index = @text.index(until_tag_name, from_index)
      if(found_tag_index != nil)
        until_index = found_tag_index + until_tag_name.length
      else
        return "", 0
      end
    end
    until_index = @text.length if until_index == nil

    result = ""
    while(ii < until_index)
      # F... ruby: '\n' != "\n"
      if (@text.at(ii) == "\n")
        result << "\n<br />"
        ii += 1

      elsif check_chars(ii, "'''")
        ii += 3
        if(until_tag_name == "'''")
          break
        end
        str, p_chars = process_sub_tag("'''", ii)
        result << "<b>" + str + "</b>"
        ii += p_chars

      elsif check_chars(ii, "''")
        ii += 2
        # closing tag
        if(until_tag_name == "''")
          break
        end
        last_index = @text.index("''", ii)
        if(last_index != nil)
          str, p_chars = process_sub_tag("''", ii)
          result << "<i>" + str + "</i>"
          ii += p_chars
        end

      elsif check_chars(ii, "]")
        ii += 1
        break;

      elsif check_chars(ii, "[")
        ii += 1
        last_index = @text.index("]", ii)
        if(last_index != nil)
          res = @text[ii, last_index-1].split(' ')
          if(res.length > 1 && !res[1].blank?)
            ii += res[0].length+1
            str, p_chars = process_sub_tag("]", ii)
            result << '<a target="_blank" href="'+ res[0]+'">'+str+"</a>"
            ii += p_chars
          end
        end
      else
        result << @text.at(ii)
        ii += 1
      end
    end
    return result, ii - from_index
  end

  # returns true if the specified chars match directly from the current position
  def check_chars(index, chars)
    len = chars.length
    #if (index > 0 && @text[index-1, 1] == chars.at(0) ||
    #      index + len < @text.length && @text[index+len, 1] == chars.at(0))
    #  return false
    #end
    @text[index, len] == chars
  end
end

# ПРЕДУПРЕЖДЕНИЕ: с юникодом он не будет работать на 100%. Смотрите странное утверждение в начале поста в блоге.

Код JavaScript

/**
 * @author Ryan Johnson <http://saucytiger.com/>
 * @copyright 2008 PersonalGrid Corporation <http://personalgrid.com/>
 * @package LivePipe UI
 * @license MIT
 * @url http://livepipe.net/control/textarea
 * @require prototype.js, livepipe.js, textarea.js
 */

if(typeof(Control.TextArea) == "undefined")
    throw "Initialization requires Control.TextArea to be loaded.";

var idOfComponent = 'comment_content';
if($(idOfComponent) == null) {
    idOfComponent = 'concept_content';
}

if($(idOfComponent) != null) {
    var textarea = new Control.TextArea(idOfComponent);

    var toolbar = new Control.TextArea.ToolBar(textarea);

    //for css styles
    toolbar.container.id = 'markdown_toolbar';

    //buttons
    toolbar.addButton('Italics',function(){
        this.wrapSelection("''","''");
    },{
        id: 'markdown_italics_button'
    });

    toolbar.addButton('Bold',function(){
        this.wrapSelection("'''","'''");
    },{
        id: 'markdown_bold_button'
    });

    toolbar.addButton('Link',function(){
        var selection = this.getSelection();
        var response = prompt('Enter Link URL','');
        if(response == null)
            return;
        this.replaceSelection('[' + (response == '' ? 'http://link_url/' : response).
            replace(/^(?!(f|ht)tps?:\/\/)/,'http://') + ' ' + (selection == '' ? 'Link Text' : selection) + ']');
    },{
        id: 'markdown_link_button'
    });

    toolbar.addButton('Help',function(){
        window.open('/documents/wiki_text');
    },{
        id: 'markdown_help_button'
    });
}

аппендикс

  • http://www.fckeditor.net/ GPL, MPL или LGPL (возможна загрузка изображений) -> http://www.underpantsgnome.com/projects/fckeditor-on-rails/
  • http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/advanced-editing-and-display/editor-rich-text BSD или AFL
  • http://www.deveiate.org/projects/BlueCloth text to html
  • http://www.cdolivet.net/editarea/ LGPL
  • http://tinymce.moxiecode.com/ LGPL WordPress использует это. Смотрите http://johnwulff.com/articles/2006/05/31/tinymce-with-ruby-on-rails

Больше редакторов смотрите  здесь .

37
Share: