Question

我能够在菜单栏中提供选项，但是当我单击任何选项时，它都可以正常工作，但是，如果我尝试选择两次，则它在所有位置都在变化。对于前我想列出一个有序列表，例如：

 ...
 private gridOptions: GridOptions;
 ...
 constructor(
   this.gridOptions.columnDefs = [
  {
    headerName: 'Parent Process Code', field: 'parentProcessCode',
    checkboxSelection: function (params) {
      return params.columnApi.getRowGroupColumns().length === 0;
    },
    headerCheckboxSelection: function (params) {
      return params.columnApi.getRowGroupColumns().length === 0;
    },
    filter: 'agTextColumnFilter',
    cellRenderer: 'agGroupCellRenderer',
    cellRendererParams: {
      innerRenderer: function (params) {
        return '<span style="cursor: default;">' + params.value + '</span>';
      }
    }
  },
  {
    headerName: 'Created Date', field: 'createdDate', filter: 'agDateColumnFilter',
    cellRenderer: (data) => {
      if (typeof data !== 'undefined') {
        return dateService.checkDateTime(data.value)
      }

      return '';
    }
  },
  { headerName: 'Process Code', field: 'processCode', filter: 'agTextColumnFilter' },
  { headerName: 'Process Name', field: 'processName', filter: 'agTextColumnFilter' },
  { headerName: 'Supplier', field: 'supplier', filter: 'agSetColumnFilter' },
  { headerName: 'Input', field: 'input', filter: 'agSetColumnFilter' },
  { headerName: 'Output', field: 'output', filter: 'agTextColumnFilter' },
  { headerName: 'Customer', field: 'customer', filter: 'agTextColumnFilter' },
  {
    headerName: 'Action', field: 'Action', cellRenderer: 'actionButtonsComponent',
    width: 100, filter: false, sortable: false, editable: false, cellStyle: { 'text-align': 'center' }
  }
];
}
...

onGridReady(params) {
this.processService.list().subscribe((response: ApiResponse) => {
  this.gridOptions.api.setRowData(response.result);
})

}

当我尝试选择一些文本时，也会将1转换为A。

请帮助。谢谢！

1.Some Text here

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

您可以忽略不需要的计数器部分。我试图在每个元素上放置id并使用jquery仅更新该部分。

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

HTML

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

实际

<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

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 Editor中更改提供各种选项的默认有序和无序列表？

1 个答案: