TinyMCE là gì?
TinyMCE là chữ viết tắt của cụm “Tiny Moxiecode Content Editor”. Đây là một nền tảng độc lập dựa trên Javascript HTML WYSIWYG được phát hành bởi LGPL web.
Hiểu đơn giản, TinyMCE là một trình soạn thảo văn bản mở rộng của WordPress. Người dùng thường thêm TinyMCE vào hệ thống quản trị website để nhập liệu nội dung, hình ảnh, … Nhờ TinyMCE, thao tác soạn thảo và chỉnh sửa định dạng những đoạn văn bản như blog, description… sẽ dễ dàng hơn.
Bạn có thể tìm và download TinyMCE trên kho plugin của WordPress. Plugin này thường xuyên được cập nhật và tương thích với phiên bản WordPress mới nhất. Đôi lúc giao diện trang soạn thảo văn bản WordPress của bạn bị lỗi, có thể xuất phát từ nguyên nhân là trang web của bạn chưa được update lên phiên bản mới.
Shortcode là gì?
Một trong những tính năng độc đáo của WordPress là shortcode (tạm dịch: Mã ngắn/chuỗi số ngắn). Sử dụng shortcode, bạn có thể tạo ra nhiều chức năng tùy biến. Từ đó, người dùng có thể sử dụng trong nội dung của bài viết hoặc widget thậm chí là sử dụng tại bất kỳ nơi nào trong giao diện WordPress.
Tính năng thực thi một nhiệm vụ nào đó của shortcode đã được bạn định sẵn trong lúc tạo.
Trong bài viết này, TinoHost sẽ hướng dẫn bạn cách thêm nút shortcode vào thanh công cụ của trình soạn thảo TinyMCE.
Thao tác thêm nút shortcode vào TinyMCE
Bước 1: Đầu tiên, bạn khai báo 1 shortcode có chức năng tạo nhanh 1 icon các biểu tượng cảm xúc trên TinyMCE.
Bước 2: Bạn chèn nội dung tại cuối file function.php của theme đang sử dụng.
function mce_smiley_button($buttons) {
array_push($buttons, 'smiley');
return $buttons;
}
add_filter('mce_buttons', 'mce_smiley_button');
function mce_smiley_js($plugin_array) {
$plugin_array['smiley'] = get_template_directory_uri() .'/plugin.js';
return $plugin_array;
}
add_filter('mce_external_plugins', 'mce_smiley_js');
function mce_smiley_css() {
wp_enqueue_style('tinymce-smiley-button', get_theme_file_uri('/plugin.css', __FILE__));
}
add_action( 'admin_enqueue_scripts', 'mce_smiley_css' );
add_action( 'wp_enqueue_scripts', 'mce_smiley_css' );
function mce_smiley_settings($settings) {
global $wpsmiliestrans;
if (get_option('use_smilies')) {
$keys = array_map('strlen', array_keys($wpsmiliestrans));
array_multisort($keys, SORT_ASC, $wpsmiliestrans);
$smilies = array_unique($wpsmiliestrans);
$smileySettings = array(
'smilies' => $smilies,
'src_url' => apply_filters('smilies_src', includes_url('images/smilies/'), '', site_url())
);
echo '<script>window._smileySettings = ' . json_encode($smileySettings) . '</script>';
}
return $settings;
}
add_filter('tiny_mce_before_init', 'mce_smiley_settings');Bước 3: Bạn khai báo nội dung button js đã được gọi ở trên. Bạn có thể khai báo nội dung bằng cách tạo file plugin.js ngay chính thư mục root theme đang sử dụng. Nội dung như sau :
/* global tinymce, twemoji, _wpemojiSettings, _smileySettings */
(function() {
function getSmileySrc(smiley) {
if (/\.([^.]+)$/.test(smiley)) {
return _smileySettings.src_url + smiley;
}
return ''.concat(twemoji.base, twemoji.size, '/', twemoji.convert.toCodePoint(smiley), twemoji.ext);
}
function getHtml() {
var supportEmoji = '_wpemojiSettings' in window && _wpemojiSettings.supports && _wpemojiSettings.supports.everything;
var smilies = _smileySettings.smilies;
var idx = 1;
var cols = 5;
var emoticonsHtml;
var text;
var icon;
emoticonsHtml = '<table role="list" class="mce-grid">';
for (text in smilies) {
if (Object.prototype.hasOwnProperty.call(smilies, text)) {
icon = smilies[text];
if (idx % cols === 1) emoticonsHtml += '<tr>';
emoticonsHtml += '<td><div data-mce-alt="' + text + '" tabindex="-1" role="option" aria-label="' + text + '">';
if ((!window._wpemojiSettings || supportEmoji) && icon.indexOf('.') === -1) {
emoticonsHtml += icon;
} else {
emoticonsHtml += '<img src="' + getSmileySrc(icon) + '" />';
}
emoticonsHtml += '</div></td>';
if (idx % cols === 5) emoticonsHtml += '</tr>';
idx++;
}
}
emoticonsHtml += '</table>';
return emoticonsHtml;
}
tinymce.PluginManager.add('smiley', function(editor) {
editor.addButton('smiley', {
type: 'panelbutton',
panel: {
classes: 'smily',
role: 'application',
autohide: true,
html: getHtml,
onclick: function(e) {
var linkElm = editor.dom.getParent(e.target, 'div');
if (linkElm) {
editor.insertContent(' ' + linkElm.getAttribute('data-mce-alt') + ' ');
this.hide();
}
}
},
tooltip: 'Emoticons'
});
});
Bước 4: Bạn khai báo tương tự css cho biểu tượng icon này tại file plugin.css với nội dung:
.mce-toolbar .mce-i-smiley {
background: url(../../../wp-includes/images/smilies/simple-smile.png) no-repeat 50% 50%;
background-size: contain;
}
.mce-smily .mce-grid div {
font-size: 24px;
line-height: 1;
text-align: center;
width: 1em;
height: 1em;
padding: 3px;
border: 0;
border-radius: 1px;
cursor: pointer;
}
.mce-smily .mce-grid div:hover {
background: #b4b9be;
}
.mce-smily .mce-grid img {
font-size: inherit;
width: 1em;
height: 1em;
vertical-align: top;
}
Bạn chèn và tạo nội dung tại 3 file trên theme đang sử dụng giống như sau :
Cuối cùng, bạn truy cập lại trình chỉnh sửa editor classic của WordPress. Bạn sẽ thấy biểu tượng tạo shortcode icon bạn vừa tạo ra. Lúc này, bạn có thể chọn nhanh shortcode biểu tượng icon khuôn mặt mà bạn vừa tạo ra.
Chúc bạn thêm nút shortcode vào TinyMCE thành công nhé!
Mọi thắc mắc và góp ý liên quan, xin vui lòng liên hệ ngay TinoHost để được tư vấn chi tiếthoặc Fanpage để cập nhật những thông tin mới nhất nhé!
Với bề dày kinh nghiệm hơn 5 năm cung cấp hosting, dịch vụ cho thuê máy chủ, các dịch vụ liên quan đến tên miền và bảo mật website, hãy để TinoHost đồng hành cùng bạn trên con đường khẳng định thương hiệu trên bản đồ công nghệ toàn cầu!
CÔNG TY CỔ PHẦN TẬP ĐOÀN TINO
- Trụ sở chính: L17-11, Tầng 17, Tòa nhà Vincom Center, Số 72 Lê Thánh Tôn, Phường Bến Nghé, Quận 1, Thành phố Hồ Chí Minh
Văn phòng đại diện: Tầng 31, Tòa nhà Landmark 2, Vinhomes Central Park, Số 720A Điện Biên Phủ, Phường 22, Quận Bình Thạnh, Thành phố Hồ Chí Minh - Điện thoại: 0364 333 333
Tổng đài miễn phí: 1800 6734 - Email: [email protected]
- Website: www.tinohost.com
