You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
182 lines
5.4 KiB
182 lines
5.4 KiB
( function( $, wp, window, rwmb ) {
|
|
'use strict';
|
|
|
|
/**
|
|
* Transform textarea into wysiwyg editor.
|
|
*/
|
|
function transform() {
|
|
var $this = $( this ),
|
|
$wrapper = $this.closest( '.wp-editor-wrap' ),
|
|
id = $this.attr( 'id' ),
|
|
isInBlock = $this.closest( '.wp-block, .components-panel' ).length > 0;
|
|
|
|
// Update the ID attribute if the editor is in a new block.
|
|
if ( isInBlock ) {
|
|
id = id + '_' + rwmb.uniqid();
|
|
$this.attr( 'id', id );
|
|
}
|
|
|
|
// Get current editor mode before updating the DOM.
|
|
var mode = $wrapper.hasClass( 'tmce-active' ) ? 'tmce' : 'html';
|
|
|
|
// Update the DOM
|
|
$this.show();
|
|
updateDom( $wrapper, id );
|
|
|
|
// Get id of the original editor to get its tinyMCE and quick tags settings
|
|
var originalId = getOriginalId( this ),
|
|
settings = getEditorSettings( originalId ),
|
|
customSettings = $this.closest( '.rwmb-input' ).find( '.rwmb-wysiwyg-id' ).data( 'options' );
|
|
|
|
// TinyMCE
|
|
if ( window.tinymce ) {
|
|
settings.tinymce.selector = '#' + id;
|
|
settings.tinymce.setup = function( editor ) {
|
|
editor.on( 'keyup change', function() {
|
|
editor.save(); // Required for live validation.
|
|
$this.trigger( 'change' );
|
|
} );
|
|
};
|
|
|
|
// Set editor mode after initializing.
|
|
settings.tinymce.init_instance_callback = function() {
|
|
switchEditors.go( id, mode );
|
|
};
|
|
|
|
tinymce.remove( '#' + id );
|
|
tinymce.init( $.extend( settings.tinymce, customSettings.tinymce ) );
|
|
}
|
|
|
|
// Quick tags
|
|
if ( window.quicktags ) {
|
|
settings.quicktags.id = id;
|
|
quicktags( $.extend( settings.quicktags, customSettings.quicktags ) );
|
|
QTags._buttonsInit();
|
|
}
|
|
}
|
|
|
|
function getEditorSettings( id ) {
|
|
var settings = getDefaultEditorSettings();
|
|
|
|
if ( id && tinyMCEPreInit.mceInit.hasOwnProperty( id ) ) {
|
|
settings.tinymce = tinyMCEPreInit.mceInit[ id ];
|
|
}
|
|
if ( id && window.quicktags && tinyMCEPreInit.qtInit.hasOwnProperty( id ) ) {
|
|
settings.quicktags = tinyMCEPreInit.qtInit[ id ];
|
|
}
|
|
|
|
return settings;
|
|
}
|
|
|
|
function getDefaultEditorSettings() {
|
|
var settings = wp.editor.getDefaultSettings();
|
|
|
|
settings.tinymce.toolbar1 = 'formatselect,bold,italic,bullist,numlist,blockquote,alignleft,aligncenter,alignright,link,unlink,wp_more,spellchecker,fullscreen,wp_adv';
|
|
settings.tinymce.toolbar2 = 'strikethrough,hr,forecolor,pastetext,removeformat,charmap,outdent,indent,undo,redo,wp_help';
|
|
|
|
settings.quicktags.buttons = 'strong,em,link,block,del,ins,img,ul,ol,li,code,more,close';
|
|
|
|
return settings;
|
|
}
|
|
|
|
/**
|
|
* Get original ID of the textarea
|
|
* The ID will be used to reference to tinyMCE and quick tags settings
|
|
* @param el Current cloned textarea
|
|
*/
|
|
function getOriginalId( el ) {
|
|
return el.closest( '.rwmb-input' ).querySelector( '.rwmb-wysiwyg-id' ).dataset.id;
|
|
}
|
|
|
|
/**
|
|
* Update id, class, [data-] attributes, ... of the cloned editor.
|
|
* @param $wrapper Editor wrapper element
|
|
* @param id Editor ID
|
|
*/
|
|
function updateDom( $wrapper, id ) {
|
|
// Wrapper div and media buttons
|
|
$wrapper.attr( 'id', 'wp-' + id + '-wrap' )
|
|
.find( '.mce-container' ).remove().end() // Remove rendered tinyMCE editor
|
|
.find( '.wp-editor-tools' ).attr( 'id', 'wp-' + id + '-editor-tools' )
|
|
.find( '.wp-media-buttons' ).attr( 'id', 'wp-' + id + '-media-buttons' )
|
|
.find( 'button' ).data( 'editor', id ).attr( 'data-editor', id );
|
|
|
|
// Set default active mode.
|
|
$wrapper.removeClass( 'html-active tmce-active' );
|
|
$wrapper.addClass( window.tinymce ? 'tmce-active' : 'html-active' );
|
|
|
|
// Editor tabs
|
|
$wrapper.find( '.switch-tmce' )
|
|
.attr( 'id', id + 'tmce' )
|
|
.data( 'wp-editor-id', id ).attr( 'data-wp-editor-id', id ).end()
|
|
.find( '.switch-html' )
|
|
.attr( 'id', id + 'html' )
|
|
.data( 'wp-editor-id', id ).attr( 'data-wp-editor-id', id );
|
|
|
|
// Quick tags
|
|
$wrapper.find( '.wp-editor-container' ).attr( 'id', 'wp-' + id + '-editor-container' )
|
|
.find( '.quicktags-toolbar' ).attr( 'id', 'qt_' + id + '_toolbar' ).html( '' );
|
|
}
|
|
|
|
function init( e ) {
|
|
$( e.target ).find( '.rwmb-wysiwyg' ).each( transform );
|
|
}
|
|
|
|
/**
|
|
* Add required attribute for validation.
|
|
*
|
|
* this = textarea element.
|
|
*/
|
|
function addRequiredAttribute() {
|
|
if ( this.classList.contains( 'rwmb-wysiwyg-required' ) ) {
|
|
this.setAttribute( 'required', true );
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Setup events for the classic editor to make live validation work.
|
|
*
|
|
* When change:
|
|
* - Save content to textarea for live validation.
|
|
* - Trigger change event for compatibility.
|
|
*
|
|
* this = textarea element.
|
|
*/
|
|
function setupEvents() {
|
|
if ( !window.tinymce ) {
|
|
return;
|
|
}
|
|
var editor = tinymce.get( this.id );
|
|
if ( !editor ) {
|
|
return;
|
|
}
|
|
var $this = $( this );
|
|
editor.on( 'keyup change', function() {
|
|
editor.save(); // Required for live validation.
|
|
$this.trigger( 'change' );
|
|
} );
|
|
}
|
|
|
|
$( function() {
|
|
var $editors = $( '.rwmb-wysiwyg' );
|
|
$editors.each( addRequiredAttribute );
|
|
$editors.each( setupEvents );
|
|
|
|
// Force re-render editors in Gutenberg. Use setTimeOut to run after all other code. Bug occurs in WP 5.6.
|
|
if ( rwmb.isGutenberg ) {
|
|
setTimeout( () => $editors.each( transform ), 200 );
|
|
}
|
|
} );
|
|
|
|
rwmb.$document
|
|
.on( 'mb_blocks_edit', init )
|
|
.on( 'mb_init_editors', init )
|
|
.on( 'clone', '.rwmb-wysiwyg', function() {
|
|
/*
|
|
* Transform a textarea to an editor is a heavy task.
|
|
* Moving it to the end of task queue with setTimeout makes cloning faster.
|
|
*/
|
|
setTimeout( transform.bind( this ), 200 );
|
|
} );
|
|
} )( jQuery, wp, window, rwmb );
|