>

링크 작성을 위해 contenteditable html에서 선택한 텍스트에 대한 컨텍스트 메뉴를 만드는 솔루션을 찾고 있습니다.

워크 플로우 : 기본적으로 사용자는 웹 페이지에서 텍스트를 편집 할 수 있으며 (div의 contenteditable = "true") 선택한 텍스트에 링크를 추가하려면 선택한 텍스트를 마우스 오른쪽 버튼으로 클릭하고 URL을 입력 할 수있는 컨텍스트 메뉴를 사용해야합니다 상황에 맞는 메뉴에서 입력란을 입력 한 다음 붐을 선택하면 선택한 텍스트가 하이퍼 링크로 표시됩니다.

감사합니다.

  • 답변 # 1

    여기서 예제를 작성하고 여기서 데모를 약간 변경하면 "contextmenu"이벤트를 사용한 결과입니다. 이제 나만의 기능을 만들 수 있습니다.

    if (!window.x) {
        x = {};
    }
    x.Selector = {};
    x.Selector.getSelected = function() {
        var t = '';
        if (window.getSelection) {
            t = window.getSelection();
        } else if (document.getSelection) {
            t = document.getSelection();
        } else if (document.selection) {
            t = document.selection.createRange().text;
        }
        return t;
    }
    var pageX;
    var pageY;
    $(document).ready(function() {
       $(document).on('contextmenu', function(ev) {
          ev.preventDefault();
          var selectedText = x.Selector.getSelected();
          if(selectedText != ''){
                $('ul.tools').css({
                    'left': pageX,
                    'top' : pageY - 20
                }).fadeIn(200);
          } else {
                $('ul.tools').fadeOut(200);
          }
        });
        
        $(document).on("click", function(e){
            $('ul.tools').fadeOut(200);
        });
        
        $(document).on("mousedown", function(e){
            pageX = e.pageX;
            pageY = e.pageY;
        });
        
    });
    
    

    body {
        padding: 60px 10px;
    }
    ul.tools {
        display: none;
        list-style: none;
        box-shadow: 0px 0px 4px rgba(0,0,0,.5);
        border: solid 1px #000;
        position: absolute;
        background: #fff;
        padding: 0;
    }
    ul.tools li {
        height: 20px;
        margin: 5px;
        padding: 2px;
        cursor: pointer;
    }
    
    

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div contenteditable="true">Vestibulum vel orci hendrerit ligula pharetra volutpat et sed dui. Phasellus vitae feugiat dolor. Mauris eleifend neque ac iaculis aliquet. Nunc malesuada nisi in dictum tristique. Vestibulum mauris eros, varius sed faucibus sed, pellentesque et nunc. Curabitur ultricies blandit urna. Pellentesque ut augue mollis, lacinia dui non, rutrum justo. Nunc et odio dapibus, blandit leo eget, aliquet urna. Etiam lorem dolor, vehicula a purus in, fermentum congue diam. Integer vel urna nec turpis posuere tempor eu lacinia purus. Praesent mattis viverra lacus bibendum fringilla. Nulla commodo posuere ante, at cursus est rhoncus quis. In iaculis viverra neque in blandit. Pellentesque eleifend arcu diam, sed sodales ligula pharetra at. Morbi ac nisl adipiscing sem interdum convallis. </div>
    <ul class="tools">
        <li>Add link</li>
        <li>Another item</li>
        <li>Another item</li>
    </ul>
    
    

  • 이전 sql - 범위를 부울로 변환
  • 다음 playframework - `MessagesApi`에 적합한 규정 Bean이 없습니다