WordPress 3.9+ TinyMCE 4 Tweaks: Thêm kiểu, nút, phông chữ, thả xuống và cửa sổ bật lên

Một trong những cập nhật yêu thích của tôi trong WordPress 3.9 là tạo lõi TinyMCE phiên bản 4.0. TinyMCE mới trông gọn gàng hơn (thực sự phù hợp với bảng điều khiển WP) và nó có một số chức năng được thêm vào thực sự tốt đẹp. Rất nhiều chủ đề và plugin cũ của tôi đã được cập nhật để hoạt động với TinyMCE mới vì vậy tôi đã dành thời gian tìm hiểu kỹ API và tìm ra một số thứ hay ho. Dưới đây tôi sẽ cung cấp cho bạn một số ví dụ về cách bạn có thể mở rộng chức năng của TinyMCE. Tôi sẽ không hướng dẫn bạn tất cả các bước hoặc mã chính xác nghĩa là gì (điều này dành cho nhà phát triển) nhưng sẽ cung cấp cho bạn mã chính xác mà bạn có thể sao chép / dán trong chủ đề hoặc plugin của mình và sau đó điều chỉnh cho phù hợp.


Thêm kích thước phông chữ và lựa chọn phông chữ

Theo mặc định, Phông chữ tùy chỉnh và kích thước phông chữ không được thêm vào trình chỉnh sửa TinyMCE. Hàm bên dưới sẽ thêm cả hai danh sách thả xuống này ở phía bên trái của trình soạn thảo ở hàng thứ hai. Chỉ cần thay đổi nơi nó nói ‘mce_buttons_2, nếu bạn muốn nó ở một hàng khác (ví dụ: sử dụng‘ mce_buttons_3, cho hàng thứ 3).

// Kích hoạt cỡ chữ & họ phông chữ trong trình chỉnh sửa
if (! function_exists ('wpex_mce_buttons')) {
hàm wpex_mce_buttons (nút $) {
mảng_unshift (nút $, 'fontelect'); // Thêm phông chữ Chọn
mảng_unshift (nút $, 'fontizeselect'); // Thêm cỡ chữ Chọn
trả về các nút $;
}
}
add_filter ('mce_buttons_2', 'wpex_mce_buttons');

Thêm cỡ chữ tùy chỉnh

Theo mặc định, kích thước phông chữ được đặt thành giá trị pt không phải là lý tưởng. Tôi thích sử dụng các giá trị pixel (12px, 13px, 14px, 16px..etc) và để cung cấp thêm tùy chọn cho tính linh hoạt của vắt. Hàm bên dưới sẽ thay đổi các tùy chọn kích thước phông chữ mặc định trong bộ chọn thả xuống.

// Tùy chỉnh kích thước phông chữ của trình soạn thảo mce
if (! function_exists ('wpex_mce lòng_sizes')) {
hàm wpex_mce bản_sizes ($ initArray) {
$ initArray ['Fontize_formats'] = "9px 10px 12px 13px 14px 16px 18px 21px 24px 28px 32px 36px 36px";
trả về $ initArray;
}
}
add_filter ('tiny_mce_b Before_init', 'wpex_mce lòng_sizes');

Thêm phông chữ tùy chỉnh

Theo mặc định, các tùy chọn phông chữ trong bộ chọn họ phông chữ đều là các phông chữ An toàn trên web, nhưng nếu bạn muốn thêm nhiều phông chữ vào bộ chọn thì sao? Có lẽ một số Google Fonts? Chúng tôi rất dễ nhìn vào ví dụ dưới đây.

// Thêm phông chữ tùy chỉnh vào danh sách Phông chữ
if (! function_exists ('wpex_mce_google_fonts_array')) {
hàm wpex_mce_google_fonts_array ($ initArray) {
$ initArray ['font_formats'] = 'Lato = Lato; Andale Mono = andale mono, times; Arial = arial, helvetica, sans-serif; Arial Black = arial black, avant gardene; Book Antiqua = book antiqua, palatino MS = truyện tranh sans ms, sans-serif; Courier New = chuyển phát nhanh mới, chuyển phát nhanh; Georgia = georgia, palatino; Helvetica = helvetica; Impact = Impact, chicago; Symbol = Symbol; Tahoma = tahoma, arial, helvetica, sans-serif; Terminal = terminal, monaco; Times New Roman = lần mới roman, lần; Trebuchet MS = trebuchet ms, geneva; Verdana = verdana, geneva; Webdings = webdings; Wingdings = wingdings, zapf dingbats ';
trả về $ initArray;
}
}
add_filter ('tiny_mce_b Before_init', 'wpex_mce_google_fonts_array');

Chú ý cách tôi thêm Lat Lato vào danh sách trong đoạn mã trên? Nó đơn giản mà! Trong chủ đề Total WordPress của tôi, tôi thực sự lặp qua bất kỳ phông chữ tùy chỉnh nào được sử dụng trên trang web như được xác định trong bảng chủ đề và thêm chúng vào hộp chọn để chúng cũng có sẵn trong khi chỉnh sửa bài đăng / trang của bạn (ngọt). Nhưng mã CHỈ quảng cáo họ phông chữ cho trình đơn thả xuống, nó đã giành được phần mềm tải tập lệnh một cách kỳ diệu để khi bạn thay đổi văn bản của mình trong trình chỉnh sửa, bạn thực sự có thể thấy phông chữ tùy chỉnh được áp dụng cho nó.!

// Thêm Google ScScript để sử dụng với trình chỉnh sửa
if (! function_exists ('wpex_mce_google_fonts_styles')) {
hàm wpex_mce_google_fonts_styles () {
$ font_url = 'http://fonts.googleapis.com/css?family=Lato:300,400,700';
add_editor_style (str numplace (',', '% 2C', $ font_url));
}
}
add_action ('init', 'wpex_mce_google_fonts_styles');

Bật Menu thả xuống Định dạng (kiểu) & Thêm kiểu mới

Bạn còn nhớ phần thả xuống của Styles Styles trong WP 3.8 không? Điều đó thật tuyệt! Bạn có thể sử dụng nó để thêm một số lớp thú vị sẽ được sử dụng trong trình chỉnh sửa bài đăng (tôi thực sự sử dụng nó trên WPExplorer cho các nút, nhịp màu, hộp..v.v). Chúng tôi có thể thêm các kiểu trong ứng dụng WP 3.9, tuy nhiên, nó đã được đổi tên trong TinyMCE 4.0 mới thành Định dạng định dạng vì vậy nó hoạt động hơi khác một chút. Dưới đây là một ví dụ về cách bật thả xuống Định dạng và cũng thêm một số mục mới vào đó.

Menu thả xuống định dạng WordPress TInyMCE

Kích hoạt Menu thả xuống định dạng

Điều này thực sự được thực hiện theo cách tương tự trước WP 3.9 nhưng tôi chia sẻ trong trường hợp bạn không biết cách thực hiện.

// Thêm định dạng menu thả xuống vào MCE
if (! function_exists ('wpex_style_select')) {
hàm wpex_style_select (nút $) {
mảng_push (nút $, 'styleelect');
trả về các nút $;
}
}
add_filter ('mce_buttons', 'wpex_style_select');

Thêm mục mới vào định dạng

Thêm các mục mới là siêu dễ dàng. Vui lòng lưu ý cách tôi đã thêm cài đặt $ $ [‘style_formats_merge bụng] = true; theo mã bên dưới, điều này đảm bảo các chỉnh sửa của bạn được thêm vào menu thả xuống định dạng cùng với bất kỳ thứ gì khác – don không đi ghi đè toàn bộ (có thể các plugin khác cũng muốn sử dụng nó).

// Thêm kiểu mới vào trình đơn thả xuống "định dạng" của TinyMCE
if (! function_exists ('wpex_styles_dropdown')) {
chức năng wpex_styles_dropdown ($ settings) {

// Tạo mảng các kiểu mới
$ new_styles = mảng (
mảng(
'title' => __ ('Kiểu tùy chỉnh', 'wpex'),
'mục' => mảng (
mảng(
'title' => __ ('Nút chủ đề', 'wpex'),
'bộ chọn' => 'a',
'lớp' => 'nút chủ đề'
),
mảng(
'tiêu đề' => __ ('Đánh dấu', 'wpex'),
'nội tuyến' => 'span',
'lớp' => 'tô sáng văn bản',
),
),
),
);

// Hợp nhất các kiểu cũ & mới
$ settings ['style_formats_merge'] = true;

// Thêm kiểu mới
$ settings ['style_formats'] = json_encode ($ new_ststyle);

// Trả về cài đặt mới
trả về cài đặt $;

}
}
add_filter ('tiny_mce_b Before_init', 'wpex_styles_dropdown');

Thêm nút MCE đơn giản

Thêm một nút mới vào trình soạn thảo TinyMCE đặc biệt hữu ích cho các mã ngắn, bởi vì là người dùng, bạn không cần phải nhớ bất kỳ mã ngắn nào, bạn chỉ cần nhấp vào một nút và nó sẽ chèn nó. Tôi không nói sẽ thêm 100 nút vào TinyMCE cho tất cả các mã ngắn của bạn (Tôi ghét khi các nhà phát triển làm điều này, đó là cách thực hành tồi tệ và trông thật kinh khủng) nhưng nếu bạn thêm 1 hoặc một vài thì tôi sẽ bỏ qua �� Nếu bạn muốn thêm một bó, thì bạn nên tạo một menu con như được giải thích trong phần sau.

Nút MCE mới của WordPress

Mã PHP – Khai báo plugin MCE mới trong WP

Mã này sẽ khai báo plugin MCE mới của bạn, đảm bảo thay đổi vị trí của tệp javascript, mce-button.js, để phù hợp với vị trí của tệp của bạn (tôi cũng sẽ cung cấp cho bạn mã trong phần phụ tiếp theo) rõ ràng là đổi tên tiền tố của tôi thành một cái gì đó độc đáo hơn!

// Móc các chức năng của bạn vào các bộ lọc chính xác
hàm my_add_mce_button () {
// kiểm tra quyền của người dùng
if (! current_user_can ('edit_posts') &&! current_user_can ('edit_pages')) {
trở về;
}
// kiểm tra xem WYSIWYG có được bật không
if ('true' == get_user_option ('rich_editing')) {
add_filter ('mce_external_plugins', 'my_add_tinymce_plugin');
add_filter ('mce_buttons', 'my_register_mce_button');
}
}
add_action ('admin_head', 'my_add_mce_button');

// Khai báo tập lệnh cho nút mới
chức năng my_add_tinymce_plugin ($ plugin_array) {
$ plugin_array ['my_mce_button'] = get_template_directory_uri (). '/ js / mce-button.js';
trả lại $ plugin_array;
}

// Đăng ký nút mới trong trình chỉnh sửa
chức năng my_register_mce_button (nút $) {
mảng_push (nút $, 'my_mce_button');
trả về các nút $;
}

Mã JS – Thêm nút vào MCE

Mã js này đi vào tệp js đã đăng ký trong đoạn trích ở trên trong hàm symple_shortcodes_add_tinymce_plugin. Thao tác này sẽ thêm một nút văn bản mới có nội dung là Nút mới của nút Mới vào trình soạn thảo của bạn và khi nhấp vào, nó sẽ chèn văn bản. WPExplorer.com thật tuyệt vời! (tất nhiên).

(chức năng() {
tinymce.PluginManager.add ('my_mce_button', chức năng (trình chỉnh sửa, url) {
biên tập viên.addButton ('my_mce_button', {
văn bản: 'Nút mới',
biểu tượng: sai,
onclick: function () {
Editor.insertContent ('WPExplorer.com thật tuyệt vời!');
}
});
});
}) ();

Thêm biểu tượng tùy chỉnh vào nút MCE mới của bạn

Ở trên tôi đã chỉ cho bạn cách thêm một nút mới sẽ hiển thị dưới dạng Nút New Nút mới trong trình chỉnh sửa, đây là một chút khập khiễng Vì vậy, mã đã thay đổi sẽ chỉ cho bạn cách thêm biểu tượng tùy chỉnh của riêng bạn.

Tải biểu định kiểu bằng CSS của bạn

Sử dụng chức năng này để tải biểu định kiểu mới để sử dụng trong bảng quản trị của bạn – một số plugin / chủ đề có thể đã thêm biểu định kiểu để nếu chủ đề / plugin của bạn đang bỏ qua điều này và chỉ cần thêm CSS tùy chỉnh của bạn và điều chỉnh js (hiển thị bên dưới).

chức năng my_shortcodes_mce_css () {
wp_enqueue_style ('symple_shortcodes-tc', plugins_url ('/ css / my-mce-style.css', __FILE__));
}
add_action ('admin_enqueue_scripts', 'my_shortcodes_mce_css');

CSS tùy chỉnh của bạn

Đây là CSS để thêm biểu định kiểu đã tải trước đó.

i.my-mce-icon {
hình nền: url ('URL ICON CỦA BẠN');
}

Tinh chỉnh Javascript của bạn

Bây giờ đơn giản tinh chỉnh javascript mà bạn đã thêm trước đó để xóa tham số văn bản và thay vì đặt biểu tượng thành false, hãy đặt tên tùy chỉnh.

(chức năng() {
tinymce.PluginManager.add ('my_mce_button', chức năng (trình chỉnh sửa, url) {
biên tập viên.addButton ('my_mce_button', {
biểu tượng: 'my-mce-icon',
onclick: function () {
Editor.insertContent ('WPExplorer.com thật tuyệt vời!');
}
});
});
}) ();

Thêm một nút với menu con

Menu phụ nút MCE

Trước đây tôi đã đề cập rằng việc thêm một tấn biểu tượng mới vào thanh TinyMCE là một ý tưởng tồi (và đó là), vì vậy hãy kiểm tra mã bên dưới để xem cách bạn có thể chỉnh sửa javascript để hiển thị menu con cho nút tùy chỉnh của mình. Nếu bạn muốn thấy nó hoạt động, hãy kiểm tra Video mã hóa Symple.

(chức năng() {
tinymce.PluginManager.add ('my_mce_button', chức năng (trình chỉnh sửa, url) {
biên tập viên.addButton ('my_mce_button', {
văn bản: 'Mẫu thả xuống',
biểu tượng: sai,
loại: 'menubutton',
thực đơn: [
{
văn bản: 'Mục 1',
thực đơn: [
{
văn bản: 'Mục phụ 1',
onclick: function () {
Editor.insertContent ('WPExplorer.com thật tuyệt vời!');
}
},
{
văn bản: 'Mục phụ 2',
onclick: function () {
Editor.insertContent ('WPExplorer.com thật tuyệt vời!');
}
}
]
},
{
văn bản: 'Mục 2',
thực đơn: [
{
văn bản: 'Mục phụ 1',
onclick: function () {
Editor.insertContent ('WPExplorer.com thật tuyệt vời!');
}
},
{
văn bản: 'Mục phụ 2',
onclick: function () {
Editor.insertContent ('WPExplorer.com thật tuyệt vời!');
}
}
]
}
]
});
});
}) ();

Thêm một cửa sổ bật lên vào nút của bạn khi nhấp

Trong ví dụ trên, bạn có thể nhận thấy rằng mọi nút chỉ cần chèn văn bản, WPExplorer.com là tuyệt vời! Điều này thật tuyệt, nhưng còn việc tạo một cửa sổ bật lên trong đó người dùng có thể thay đổi những gì mà LỊCH được chèn vào văn bản thì sao? Bây giờ sẽ là ngọt ngào! Và nó có một thứ gì đó mà tôi đã thêm vào phiên bản 1.6 của Symple Shortcodes, làm cho plugin trở nên thân thiện hơn rất nhiều.

Cửa sổ bật lên WordPress MCE

(chức năng() {
tinymce.PluginManager.add ('my_mce_button', chức năng (trình chỉnh sửa, url) {
biên tập viên.addButton ('my_mce_button', {
văn bản: 'Mẫu thả xuống',
biểu tượng: sai,
loại: 'menubutton',
thực đơn: [
{
văn bản: 'Mục 1',
thực đơn: [
{
văn bản: 'Cửa sổ bật lên',
onclick: function () {
Editor.windowManager.open ({
tiêu đề: 'Chèn mã ngắn ngẫu nhiên',
thân hình: [
{
gõ: 'hộp văn bản',
tên: 'textboxName',
nhãn: 'Hộp văn bản',
giá trị: '30 '
},
{
gõ: 'hộp văn bản',
tên: 'multilineName',
nhãn: 'Hộp văn bản nhiều dòng',
giá trị: 'Bạn có thể nói rất nhiều thứ ở đây',
đa dòng: đúng,
tối thiểu: 300,
tối thiểu: 100
},
{
gõ: 'hộp danh sách',
tên: 'listboxName',
nhãn: 'Hộp danh sách',
'giá trị': [
{văn bản: 'Tùy chọn 1', giá trị: '1'},
{văn bản: 'Tùy chọn 2', giá trị: '2'},
{văn bản: 'Tùy chọn 3', giá trị: '3'}
]
}
],
onsubmit: hàm (e) {
Editor.insertContent ('[Random_shortcode textbox = "' + e.data.textboxName + '" multiline = "' + e.data.multilineName + '" listbox = "' + e.data.listboxName + '"]');
}
});
}
}
]
}
]
});
});
}) ();

Điều này thật tuyệt?

Câu hỏi hay! Bây giờ, bạn đã có thời gian để thực hiện các tinh chỉnh tuyệt vời này và tạo một cái gì đó hoành tráng hoặc cập nhật các plugin / chủ đề của bạn để tương thích với TinyMCE mới trong WordPress 3.9. Hãy cho tôi biết những gì bạn đưa ra trong các ý kiến ​​dưới đây!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map