показ контекстного меню в содержимом div - PullRequest
Новая
       1

показ контекстного меню в содержимом div

2 голосов
/ 31 октября 2010

У меня есть div contentEditable со следующим текстом, например: 

<div contentEditable='true'> This document is classified</div>

Теперь, например, если пользователь нажимает «m» в текстовом документе, я хочу показать контекстное меню, содержащее несколько вариантов выбора текста. Это контекстное меню будет содержаться в элементе div. Я хочу заменить слово «документ» на вариант (текст), выбранный пользователем из контекстного меню. По моему мнению, я должен найти абсолютную позицию щелчка, чтобы показать контекстное меню, а затем мне нужно найти пробелы до и после позиции каретки, а затем заменить выбор на вариант, выбранный из контекстного меню. Любая идея, как я могу сделать это, используя JavaScript и jQuery? Edit: одна часть моего вопроса касается контекстного меню, а другая, более важная, состоит в том, как я могу определить слово, по которому пользователь щелкнул в элементе содержимого div или в текстовой области с другой стороны. моя цель примерно такая, как на картинке ниже alt text на самом деле я хочу сделать подобное приложение транслитерации. процесс преобразования скрипта с римского на урду был выполнен, однако я сталкиваюсь с множеством проблем при разработке пользовательского интерфейса в Интернете. Приложение для транслитерации Google можно найти здесь . Я надеюсь, что кто-то может помочь мне получить слово под мышью пользователя и отобразить контекстное меню, содержащее несколько вариантов выбора.

Ответы [ 2 ]

6 голосов
/ 05 ноября 2010

Возможно, вы захотите взглянуть на некоторые из существующих плагинов контекстного меню

  1. http://www.trendskitchens.co.nz/jquery/contextmenu/
  2. http://labs.abeautifulsite.net/projects/js/jquery/contextMenu/demo/
  3. http://plugins.jquery.com/plugin-tags/context-menu

Чтобы получить текущее выбранное слово в текстовой области, взгляните на плагин fieldSelection .

Таким образом, используя второй плагин и fieldSelection (Отказ от ответственности: я думаю, что индексирование относительно замены строки немного отключено - не полностью протестировано)

Javascript 

 $(document).ready(function () {
    //replace
    $("#tx").contextMenu({
       menu: 'replace'
    }, function (action, el, pos) {
        update(action, el)
    });

    function update(action, el) {
        var range = $("#tx").getSelection();
        var textLength = $("#tx").val().length;

        var firstPart = $("#tx").val().substring(0, range.start);
        var secondPart = $("#tx").val().substring(range.start, textLength);

        var lastIndexofSpaceInfirstPart = firstPart.lastIndexOf(" ");
        var firstIndexofSpaceInSecondPart = secondPart.indexOf(" ");

        var startOfWord = 0
        var endOfWord = 0


        if (lastIndexofSpaceInfirstPart < 0) {
            // start of string
            startOfWord = 0;
        } else {
            startOfWord = lastIndexofSpaceInfirstPart;
        }

        if (firstIndexofSpaceInSecondPart < 0) {
            // end of textArea
            endOfWord = textLength
        } else {
            endOfWord = firstIndexofSpaceInSecondPart + range.start;
        }

        var word = $.trim($("#tx").val().substring(startOfWord, endOfWord));

        var replaceMent = $("#tx").val().substr(0, startOfWord)
                            + action.toString()
                            + $("#tx").val().substr(endOfWord, textLength);

                alert(
                      "rangeStart: " + range.start +
                      "\n\nrangeEnd: " + range.end +
                      "\n\nrangeLength: " + range.length +
                    +"\n\nfirstPart: " + firstPart
                    + "\n\n secondPart: " + secondPart
                    + "\n\n lastIndexofSpaceInfirstPart: " + lastIndexofSpaceInfirstPart
                    + "\n\n firstIndexofSpaceInSecondPart:" + firstIndexofSpaceInSecondPart
                     + "\n\nWordStart: " + startOfWord
                     + "\n\nEndofWord: " + endOfWord
                     + "\n\nWord: '" + word + "'"
                     + "\n\nNew Text: '" + replaceMent + "'"
                    );
            }
        });

Html 

<textarea id="tx">
    Some text
    </textarea>


    <ul id="replace" class="contextMenu">
      <li class="edit"><a href="#youwordhere1">youwordhere1</a></li>
      <li class="cut separator"><a href="#youwordhere2">youwordhere2</a></li>
      <li class="copy"><a href="#youwordhere3">youwordhere3</a></li>
      <li class="paste"><a href="#youwordhere4">youwordhere4</a></li>
      <li class="delete"><a href="#youwordhere5">youwordhere5</a></li>
      <li class="quit separator"><a href="#youwordhere6">youwordhere6</a></li>
    </ul>
2 голосов
/ 07 ноября 2010

  1. Чтобы надежно обнаружить слово под курсором мыши: просто оберните каждое слово, которое вы хотите обнаружить, в отдельный контейнер, например, span.Это не сложно сделать с помощью JavaScript.Просто проанализируйте слова в цикле и создайте для каждого элемента span, а затем установите его innerHTML = word.Затем вы можете прочитать цель события щелчка, и она даст вам интервал со словом.

  2. Показать контекстное меню на месте - тривиальная задача: создать div с вашим контентомменю и сделать его положительным: абсолютным и отображать: нет.Если вы хотите показать его, установите его верхний и левый стили (например), равные смещению целевого элемента span от родительского контейнера, и сделайте его стиль display = "box".Все готово;)

...