Làm cách nào để thay đổi bảng màu phông chữ mặc định trong trình chỉnh sửa TinyMce?

Question

Tôi có một số màu được đặt trước mà tôi muốn thêm cùng với chủ đề trang web của tôi. Làm thế nào tôi có thể thay đổi bảng màu phông chữ mặc định trong TinyMce?

screenshot-with-shadow.png http://img407.imageshack.us/img407/4526/screenshotwithshadow.png

Answer 1

A. Cách dễ dàng nhưng bẩn là để chỉnh sửa mã nguồn. Lấy tệp tiny_mce.js và tìm chuỗi "000000,993300,333300," - đây là khởi đầu của định nghĩa màu của SplitButton. Bây giờ bạn có thể chỉnh sửa màu sắc theo ý muốn. Điều này sẽ điều chỉnh cài đặt màu cho tất cả các trường hợp ColorSplitButton.

B. Một cách khác, không phải là bẩn như fiddle với mã nguồn là điều chỉnh màu sau khi khởi tạo trình chỉnh sửa. Bạn sẽ cần phải thêm the setup parameter để cấu hình TinyMCE của bạn (hoặc đặt nó bên trong một trong các plugin TinyMCE của riêng bạn):

setup : function(ed) { 
     ed.onInit.add(function(ed) { 

     $('.mceColorSplitMenu').find('#_mce_item_2').get(0).setAttribute('data-mce-color','#0202FF'); 
     $('.mceColorSplitMenu').find('#_mce_item_3').get(0).setAttribute('data-mce-color','#0203FF'); 
      ... 
     $('.mceColorSplitMenu').find('#_mce_item_41').get(0).setAttribute('data-mce-color','#0241FF'); 
     }); 
    } 

Hãy nhận biết rằng bạn có thể muốn thay đổi attriubtes khác của SplitButton cũng (tức là tiêu đề, màu nền, ...)

C. các sạch nhất nhưng tốn nhiều thời gian giải pháp là để phát triển một plugin riêng sử dụng một ColorSplitButton riêng chứa các màu sắc của sự lựa chọn của bạn trong môi trường cho rằng yếu tố điều khiển (có một cái nhìn tại phiên bản dành cho nhà phát triển tinymce) có một tệp có tên là ColorSplitButton.js. Dưới đây là một số mã có chứa các thiết lập màu:

ColorSplitButton : function(id, s, ed) { 
     var t = this; 

     t.parent(id, s, ed); 

     /** 
     * Settings object. 
     * 
     * @property settings 
     * @type Object 
     */ 
     t.settings = s = tinymce.extend({ 
      colors : '000000,993300,333300,003300,003366,000080,333399,333333,800000,FF6600,808000,008000,008080,0000FF,666699,808080,FF0000,FF9900,99CC00,339966,33CCCC,3366FF,800080,999999,FF00FF,FFCC00,FFFF00,00FF00,00FFFF,00CCFF,993366,C0C0C0,FF99CC,FFCC99,FFFF99,CCFFCC,CCFFFF,99CCFF,CC99FF,FFFFFF', 
      grid_width : 8, 
      default_color : '#888888' 
     }, t.settings); 

Answer 2

https://www.youtube.com/watch?v=dySkwdZG9J0

theme_name_text_colors: "#hexhex, #hexhex, #hexhex"

Đặt rằng trong init() chức năng và phát triển vượt bậc, bạn pallet màu là tùy chỉnh. Và bạn vẫn nhận được nút màu sắc hơn. Không có plugin bổ sung nào. Không có công việc điên rồ.

Answer 3

Vâng, đó là hơi muộn nhưng giải pháp của tôi sẽ là:

1.Assuming mà bạn đang sử dụng 'Format' plugin, sao chép thư mục 'Format' trong thư mục 'plugins' và cung cấp cho nó một cái tên mới (cho phép nói 'mytextcolor'). Đó sẽ là tên của plugin mới của bạn (mytextcolor)

2.trong thư mục 'mytextcolor' mở plugin.min.js và trên dòng 12 bạn sẽ tìm thấy bảng màu mặc định . sửa đổi điều đó bằng tên và mã màu mới.

3.in cấu hình TinyMCE bạn đổi tên 'Format' trong plugin thông số để 'mytextcolor'

Hy vọng rằng sẽ giúp

Answer 4

Hãy thử sử dụng 'textcolor_map' thiết lập vào cấu hình soạn thảo của bạn?

Tôi cũng đang cố gắng tìm cách thay đổi bảng màu phông chữ mặc định trong Tinymce. Hầu hết các câu trả lời như những câu hỏi trên chỉ ra việc sử dụng một trong các thuộc tính cấu hình dựa trên 'theme_advanced_'. Tuy nhiên, chủ đề 'nâng cao' không được đóng gói với phiên bản 4 và chủ đề 'hiện đại' mà phiên bản 4 sử dụng theo mặc định không hiển thị cùng thuộc tính. Một giải pháp độc lập chủ đề sẽ là thích hợp hơn anyway.

Và lo!Một cái nhìn nhanh chóng trong plugin 'textcolor' cho thấy rằng khi plugin đang thiết lập bản đồ màu của nó, đầu tiên nó sẽ xem xét thuộc tính nói trên trên các thiết lập của trình soạn thảo.