Как изменить упорядоченный и неупорядоченный список по умолчанию, предоставляя различные параметры в редакторе Jodit? - PullRequest
Новая
       23

Как изменить упорядоченный и неупорядоченный список по умолчанию, предоставляя различные параметры в редакторе Jodit?

0 голосов
/ 18 июня 2019

Я могу указать опции в строке меню, но когда я нажимаю на любую из опций, она работает абсолютно нормально, но если я попытался выбрать дважды, она меняется во всех местах.НапримерЯ хочу сделать упорядоченный список, например: 

1.Some Text here

a.option 1                 b.option 2
c.option 3                 d.option 4.

Когда я пытаюсь выделить какой-либо текст, он также преобразуется в 1 в A.

Пожалуйста, помогите. Заранее спасибо 

document.execCommand('insertUnorderedList',true,null);
let selectedStyle = event.target.parentNode.classList.value;
   $('li').attr('id', function(i) {
     return 'unorder'+(counter+1);
   });
$('ol > li').css({'list-style-type':selectedStyle});

Вы можете игнорировать часть счетчика, которая не требуется. Я пытался установить id для каждого элемента и использовать jquery для обновления только этой части. 

let counter = 0;
document.querySelectorAll (".unorder-list-select .unorder-list-main .unorder-container ul").forEach((elem)=>{
  elem.addEventListener("click",(event)=>{
  counter++;
   $('li').attr('id', function(i) {
    return 'unorder'+(counter+1);
  });
  $('ul > li').css({'list-style-type':selectedStyle});
}

HTML 

<div class="order-list-select" id="orderList" draggable="true"> 
  <div> 
    <span class="jodit_popup_triangle"></span> 
    <div class="math-toolbar-top" id="orderlistHeader"></div>
    <div class="order-list-main">
      <div class="order-list-container"></div>
      <div class="order-container">
        <ol class="upper-roman">
          <li><hr></li>
        </ol>
        <ol class="decimal">
          <li><hr></li>
        </ol>
      </div>
    </div>
  </div>
</div>

Фактический 

1.text
2.text
Some text here
1.Txt
2.Txt

Ожидаемый 

1.text
2.text
Some text here
a.Txt
b.Txt

1 Ответ

0 голосов
/ 20 июня 2019

Я сделал это Jquery, не знаю, правильный ли это подход, но он заставил меня выполнить мою задачу. Ниже приведен код для моего этого. 

document.querySelectorAll(".unorder-list-select .unorder-list-main .unorder-container ul").forEach((elem)=>{
                elem.addEventListener("click",(event)=>{
                    counter++;
                    document.execCommand('insertUnorderedList',true,null);
                    let selectedStyle = event.target.parentNode.classList.value;
                    let select = window.getSelection().focusNode.parentElement.parentElement;
                    let ul_id = ""
                    $(select).attr('id', function(i) {
                        ul_id = "unorder"+(counter);
                        return ul_id;
                     });
                    if(selectedStyle == "right-arrow"){
                        $('#'+ul_id).css({'list-style-image':`url('icons/list-right-editor.svg')`});                        
                    }else if(selectedStyle == "open-square"){
                        $('#'+ul_id).css({'list-style-image':`url('icons/square-open-editor.svg')`});
                    }else{
                        $('ul').attr('type',function(){
                            return selectedStyle;
                        })
                        $('#'+ul_id).css({'list-style-type':selectedStyle});
                    }
                    document.querySelector(".unorder-list-select").remove();
                })
            });

Пожалуйста, измените класс соответствующим образом, чтобы получить тег и нажать.

...