Làm cách nào để thêm các nút tiêu đề (h1, h2 ...) vào tinyMCE với chủ đề nâng cao, bố cục đơn giản?

Question

Tôi có trình chỉnh sửa tinyMCE sử dụng chủ đề nâng cao. Tôi đang sử dụng cách bố trí đơn giản trên chủ đề nâng cao đó để tôi có thể định nghĩa các thanh công cụ của riêng mình trên init() mà không cần phải quá sâu vào những gì tinyMCE đang làm.

Vấn đề tôi gặp phải là trình chỉnh sửa của tôi không có nút để thêm các phần tử tiêu đề. Tôi đang rất cần tùy chọn này nhưng không thể tìm thấy lời khuyên thực tế nào về chủ đề này.

Tất cả những gì tôi đang làm xảy ra bên trong tinymce.init() chức năng, mà tôi đã dán dưới đây:

$("textarea.tinymce").not(".simple").tinymce({ 
      script_url : "/_lib/script/tiny_mce/tiny_mce.js", 
      plugins : "wordcount,paste,spellchecker,table", 
      theme : "advanced", 
      theme_advanced_layout_manager : "SimpleLayout", 
      theme_advanced_statusbar_location : "bottom", 
      theme_advanced_toolbar_location : "top", 
      theme_advanced_buttons1 
       : "bold,italic,underline,strikethrough,|,sub,sup,|,charmap,|,forecolorpicker", 
      theme_advanced_buttons2 
       : "undo,redo,|,cut,copy,pastetext,pasteword,|,link,unlink,anchor,|,image,code", 
      theme_advanced_buttons3 : "", 
      theme_advanced_toolbar_align : "left", 
      height : 480, 
      apply_source_formatting : false, 
      convert_fonts_to_spans : true 
     }); 

Tôi đang sử dụng plugin jquery để truy cập TinyMCE (Tôi chắc chắn điều này không có gì để làm với câu hỏi của tôi nhưng nó giải thích mã).

Một ý tưởng tôi có là sử dụng tùy chọn theme_advanced_styles nhưng tôi không nghĩ rằng điều này sẽ cho phép tôi chèn các thẻ tiêu đề thực, nhưng thay vì chỉ đánh dấu mẫu của tôi bằng các nhịp và không giống như tiêu đề.

Bất kỳ ý tưởng nào được đánh giá cao. Chúc mừng, J

Answer 1

Đây là nút sẽ đặt tiêu đề 1 trong một đoạn. Thêm 'formath1' để buttonlist của bạn và thêm video này vào init TinyMCE bạn

setup : function(ed){ 
    ed.addButton('formath1', // name to add to toolbar button list 
    { 
     title : 'Make h1', // tooltip text seen on mouseover 
     image : 'http://myserver/ma_button_image.png', 
     onclick : function() 
     { 
     ed.execCommand('FormatBlock', false, 'h1'); 
     } 
    }); 
}, 

Answer 2

đề mục Thêm và các yếu tố khác với phong cách tiềm ẩn có thể được thêm vào thông qua danh sách theme_advanced_buttons_[1-3]formatselect với theme: 'advanced' trường:

tinyMCE.init({ 
    mode : 'textareas', 
    theme : 'advanced', 
    editor_selector : 'mceAdvanced', 
    plugins: 'autolink,inlinepopups', 
    theme_advanced_blockformats: 'p,address,pre,h1,h2,h3,h4,h5,h6', 
    theme_advanced_buttons1: 'formatselect,|,bold,italic,removeformat', 
    theme_advanced_buttons2: '', 
    theme_advanced_buttons3: '', 
    theme_advanced_toolbar_location: 'top', 
    theme_advanced_statusbar_location: 'bottom', 
    theme_advanced_resizing: true, 
    theme_advanced_resize_horizontal: false, 
    relative_urls: false 
}); 

tôi superfluously -bao gồm các giá trị mặc định chỉ để trình diễn nhưng TinyMCE Wiki nói rằng, kể từ 2010-10-28 danh sách yếu tố này có thể được giảm hoặc thêm vào với các yếu tố bao gồm:

`p,div,h1,h2,h3,h4,h5,h6,blockquote,dt,dd,code,samp` 

Answer 3

Tôi đã tìm thấy heading plugin để trở thành giải pháp hoàn hảo cho vấn đề này. Câu trả lời được chấp nhận cũng hoạt động ok. Vấn đề duy nhất chúng tôi tìm thấy là nút tiêu đề không xuất hiện khi con trỏ của bạn ở đầu đề, do đó làm cho nó không trực quan, bạn có thể nhấn lại nút để hoàn nguyên định dạng. Plugin tiêu đề hiển thị chính xác trạng thái hoạt động.