Thay đổi loại phông chữ/kích thước mặc định trong TinyMCE

Question

Làm cách nào để thay đổi loại phông chữ và kích thước phông chữ mặc định trong TinyMCE?

Tôi đang sử dụng làn da tiên tiến và tôi đã thay đổi kiểu body, td, pre trong mặc định/content.css nhưng nó vẫn không thay đổi.

Answer 1

Vâng, có một số content.css và chỉ có một được sử dụng để tạo kiểu soạn thảo của bạn tùy thuộc vào thiết lập cấu hình của bạn.

Bạn nên sử dụng tùy chọn content_css cấu hình và đặt tên cho một file css riêng nơi bạn có thể ghi đè lên các biên tập viên mặc định (các content.css bạn được thời gian gần đây tìm kiếm). Trong init chức năng một cái gì đó sử dụng của bạn như

content_css: "http://localhost/css/my_tiny_styles.css", 

và trong my_tiny_styles.css hoặc bất cứ tập tin bạn chọn bạn sử dụng

font-family: myfont1, myfont2, sans-serif; 

Answer 2

Dưới đây là một cách khác để giải quyết vấn đề này.

Bằng cách thêm kiểu tùy chỉnh của riêng bạn vào tệp CSS của chúng tôi bằng cách xác định id tinymce.

#tinymce .mceContentBody p { 
    font-family: your_font_name !important; 
} 

Answer 3

Dưới đây là cách thực hiện mà không cần chạm vào CSS hoặc bất kỳ mã nào khác.

1. Sử dụng plugin 'TinyMCE Advanced'
2. Kích hoạt nó trong cài đặt.

Hướng dẫn chi tiết khác here.

Answer 4

Nếu bạn muốn thay đổi mặc định của hộp kéo thả chứ không phải là chỉ hiển thị css, với TinyMCE 4 nó bây giờ là:

setup : function(ed) { 
ed.on('init', function(ed) { 
    ed.target.editorCommands.execCommand("fontName", false, "Calibri"); 
    ed.target.editorCommands.execCommand("fontSize", false, "11pt"); 
}); 
} 

EDIT: đây là lựa chọn thiết lập của hàm init như đã giải thích ở đây : https://www.tinymce.com/docs/configure/integration-and-setup/#setup

Answer 5

Đối với những người gặp rắc rối thêm một stylesheet do những vấn đề đường dẫn hoặc bất cứ lý do, điều này sẽ làm điều đó khá đơn giản:

setup : function(ed) { 
    ed.on('init', function(){ 
     $(this.getDoc()).find('head').append('<style>p{margin:0;}</style>'); 
    }); 
} 

Lưu ý tôi đã sử dụng jQuery, nhưng tất nhiên có thể được thực hiện mà không cần nó.