클래스 속성없이 Rangy.js를 사용하여 태그를 만들려면 어떻게해야합니까?

Question

저는 Rangy.js를 선택 범위로 사용 해왔고 지금까지 정말 좋아했습니다. 특정 태그 내에서 선택 영역의 텍스트 노드를 감싸고 단추를 클릭 할 때이를 전환하려고합니다. 나는 cssClassApplierModule을 사용하여 훌륭하게 작동한다. (그리고 이름 때문에 의미가있다.) dom 요소에 자체적으로 적용하는 클래스를 주어야한다.

Text text text <strong class="test"> selected text </strong> text text text 

그리고 나는 그것이 싶습니다 : 나는 범위를 선택하고 예를 들어 강한 태그를 적용 할 때

는

그래서 지금, 내 최종 결과는

Text text text <strong> selected text </strong> text text text 

코드 나는 지금까지 다음과 같습니다 :

function gEBI(id) { 
       return document.getElementById(id); 
      } 

      var action; 

      function toggleAction() { 
       action.toggleSelection(); 
      } 

      rangy.init(); 

      // Enable buttons 
      var cssClassApplierModule = rangy.modules.CssClassApplier; 

      // Next line is pure paranoia: it will only return false if the browser has no support for ranges, 
      // selections or TextRanges. Even IE 5 would pass this test. 
      if (rangy.supported && cssClassApplierModule && cssClassApplierModule.supported) { 
       action = rangy.createCssClassApplier("test", { 
        elementTagName: "strong", 
        elementProperties: { } 
       }); 
       var toggleActionButton = gEBI(nsID); 
       toggleActionButton.disabled = false; 
       toggleActionButton.ontouchstart = toggleActionButton.onmousedown = function() { 
        toggleAction(); 
        return false; 
       }; 
      } 

나는 "CSS"클래스가 전달되는 "text"대신 "null"을 시도했습니다. 토글하지만 더 이상 전환하지 않으며 분명히 정확한 해결책이 아닙니다.

도움이 감사드립니다 .. 감사합니다!

Answer 1

Rangy의 CSS 클래스 적용 기가 불행히도이를 허용하지 않습니다. 근본적인 문제는 클래스를 둘러싸거나 추가/제거 할 요소 및 텍스트 노드를 결정하기 위해 CSS 클래스에 의존한다는 것입니다. 대담과 같은 스타일을 감지하는보다 일반적인 경우보다 클래스의 존재를 감지하는 것이 상당히 간단합니다.

나는 작년에 좀 더 야심적이고 일반적인 execCommand 모듈을 사용하여 원하는대로 할 수있었습니다. 그것은까지 working demo있어하지만 까다로운 가장자리 경우에 수렁에 빠졌고 그것에 노력을 멈췄습니다. 나는 그걸로 돌아갈 생각이 있지만, 준비가되기 몇 개월이 걸릴 것 같습니다.