如何更改在 Jodit 编辑器中提供各种选项的默认有序和无序列表？

Question

我可以在菜单栏中提供选项，但是当我单击任何选项时，它工作得非常好，但是如果我尝试 select 两次，它在所有地方都会发生变化。对于前。我想制作一个有序列表，例如：

1.Some Text here

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

当我尝试 select 某些文本时，它也会将 1 转换为 A。

请提前help.Thanks

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});

您可以忽略对应部分，它不是 required.I 试图在每个元素上放置 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

Answer 1

我是通过 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();
                })
            });

请相应更改类以获取标签并点击。

如何更改在 Jodit 编辑器中提供各种选项的默认有序和无序列表？

How can I change the default ordered and unordered list providing various options in Jodit Editor?

javascript

jquery

editor

contenteditable

html-lists