tùy chọn forced_root_block trong TinyMCE

Question

Tôi đang cố gắng triển khai trình chỉnh sửa WYSIWYG tùy chỉnh bằng cách sử dụng contenteditable<div>.

Một trong những vấn đề chính mà tôi đang đối mặt là trình duyệt cách không nhất quán xử lý ENTER phím tắt (dấu ngắt dòng). Chrome chèn <div>, Firefox chèn <br> và chèn IE <p>. Tôi đã xem TinyMCE và nó có một tùy chọn cấu hình được gọi là forced_root_block. Đặt forced_root_block thành div thực sự hoạt động trên tất cả các trình duyệt chính. Có ai biết làm thế nào forced_root_block tùy chọn trong TinyMCE có thể đạt được nó trên các trình duyệt?

Answer 1

Trong nguồn TinyMCE (/tiny_mce/classs/dom/DomParser.js), bạn sẽ tìm thấy những điều sau đây:

rootBlockName = "forced_root_block" in args ? args.forced_root_block : settings.forced_root_block; 

     whiteSpaceElements = schema.getWhiteSpaceElements(); 
     startWhiteSpaceRegExp = /^[ \t\r\n]+/; 
     endWhiteSpaceRegExp = /[ \t\r\n]+$/; 
     allWhiteSpaceRegExp = /[ \t\r\n]+/g; 

     function addRootBlocks() { 
      var node = rootNode.firstChild, next, rootBlockNode; 

      while (node) { 
       next = node.next; 

       if (node.type == 3 || (node.type == 1 && node.name !== 'p' && !blockElements[node.name] && !node.attr('data-mce-type'))) { 
        if (!rootBlockNode) { 
         // Create a new root block element 
         rootBlockNode = createNode(rootBlockName, 1); 
         rootNode.insert(rootBlockNode, node); 
         rootBlockNode.append(node); 
        } else 
         rootBlockNode.append(node); 
       } else { 
        rootBlockNode = null; 
       } 

       node = next; 
      }; 
     }; 

Điều này rõ ràng sẽ chăm sóc của việc tạo ra các yếu tố khối gốc. Tôi chắc chắn rằng 99% tinymce xử lý chính phím 'ENTER' và dừng lệnh truyền/trình duyệt mặc định.