easy way to change default ACF TinyMCE settings

• mediawerk

• March 25, 2015 at 12:02 am

The Problem is:
because ACF use his own mceInit.setup function, that is why not all settings could be set by tiny_mce_before_init filter.
for example to disable shortcuts. (filter that works with core-wysiwyg-editor!)
look a my post here

i found out, that if i use acf-input.js instead of acf-input.js.min and add the

ed.on('init', function () {
         // Note these lists may not be complete & that other tinymce plugins can add their own shortcuts anyway.
                var ctrls = [ 'u', '1', '2', '3', '4', '5', '6', '7', '8', '9', 's', 'k', 'Alt+F', 'P' ];
                var modKeys = [ 'c', 'r', 'l', 'j', 'q', 'u', 'o', 'n', 's', 'm', 'z', 't', 'd', 'h', 'o', 'x', 'a', 'w' ];
                // Overwrite shortcuts with no-op function. Key sequences will still be captured.
                for (var i = 0; i < ctrls.length; i++ ) {
                    this.addShortcut('ctrl+' + ctrls[i], '', function () {});
                }
                for (var i = 0; i < modKeys.length; i++ ) {
                    this.addShortcut('alt+shift+' + modKeys[i], '', function () {});
                }
    });

insidemceInit.setup = function( ed ){ arround line 7360 then it works.
but i dont like to edit corefiles.

best would be if it is an action that load mceInit.setup of ACF and i can remove_action / add_action to replace that init with my own, or if there is a setting field at backend that contains the content/value of mceInit.setup (than i can easy change or add my own function, for example my funtion to remove shortcut)

i would also like when i can set other settings (inclusive toolbar at a single place)
all settings that came normally from tiny_mce_before_init filter.

maybe disable/replace/extend ACF toolbar settings:
and let us set other things too like block_formats, paste_word_valid_elements, paste_strip_class_attributes, toolbar1, ...

or at least document what filter we can/had to use to hook into ACF-tiny_mce init setup and if for example a toolbar1 is set dont use ACF-default-toolbar hook/setting, or add a 3 option for toolbar: “custom, set by init-file”

for example i would like to use a filter like that.

function my_acf_editor( $mceInit, $editor_id ) {
	$mceInit['setup'] = 'editShortcut_tiny_mce_init';
	// What goes into the 'formatselect' list
	$mceInit['block_formats'] = 'Header 3=h3;Header 4=h4;Header 5=h5;Header 6=h6;Paragraph=p;Code=code';
	$mceInit['paste_word_valid_elements'] = '-strong/b,-em/i,-p,-ol,-ul,-li,-h3,-h4,-h5,-h6,-p,-table[width],-tr,-td[colspan|rowspan|width],-th,-thead,-tfoot,-tbody,-a[href|name],br,del';
		
	$mceInit['paste_strip_class_attributes'] = 'all';
	$mceInit['toolbar1'] = 'bold,italic,formatselect,bullist,numlist,blockquote,link,unlink,undo,redo';

	return $mceInit;
}
add_filter('tiny_mce_before_init', 'my_acf_editor')

my aim is:
to have a very simple wysiwyg that only allow things defined by me.
and only edit toolbar is not enough, because the user can avoid these restrictions with shortkeys and/or copy&paste from word.

• deydod

• April 2, 2015 at 3:25 am

I completely agree +1

• Thomas

• April 15, 2015 at 11:24 pm

You can modify the toolbars with the acf/fields/wysiwyg/toolbars filter like this

function my_toolbars( $toolbars ) {
	$toolbars['Full'] = array();
	$toolbars['Full'][1] = array('bold', 'italic', 'underline', 'bullist', 'numlist', 'alignleft', 'aligncenter', 'alignright', 'alignjustify', 'link', 'unlink', 'hr', 'spellchecker', 'wp_more', 'wp_adv' );
	$toolbars['Full'][2] = array('styleselect', 'formatselect', 'fontselect', 'fontsizeselect', 'forecolor', 'pastetext', 'removeformat', 'charmap', 'outdent', 'indent', 'undo', 'redo', 'wp_help' );

	// remove the 'Basic' toolbar completely (if you want)
	unset( $toolbars['Basic' ] );

	// return $toolbars - IMPORTANT!
	return $toolbars;
}
add_filter('acf/fields/wysiwyg/toolbars' , 'my_toolbars');

Hope this helps

• mediawerk

• May 7, 2015 at 10:37 pm

@tmconnect like i say at opening post: modify only the toolbar is not enough for me. thats why your post dont help. and if you read carefully you will see that problem is made by ACF, thats why i also cant use tiny_mce_before_init filter. that work for/with default wysiwyg.

@elliot any toughts, comment or help for this problem?

or is someone else able to help me, without to modify corefiles?

• Elliot

• June 2, 2015 at 9:36 am

Hi @mediawerk

It is possible to modify all tinymce settings through the JS filter:
‘wysiwyg_tinymce_settings’

You can see how to use this filter here: http://www.advancedcustomfields.com/resources/adding-custom-javascript-fields/

Thanks
E

• mediawerk

• June 2, 2015 at 4:47 pm

Thanks @elliot this lead me to the solution.

i can share now this code:

function my_acf_input_admin_footer() {
?>
<script type="text/javascript">
acf.add_filter('wysiwyg_tinymce_settings', function( mceInit, id ){
	
	// do something to mceInit
	mceInit.setup = function( ed ){
	ed.on('init', function () {
         // Note these lists may not be complete & that other tinymce plugins can add their own shortcuts anyway.
                var ctrls = [ 'u', '1', '2', '3', '4', '5', '6', '7', '8', '9', 's', 'k', 'Alt+F', 'P' ];
                var modKeys = [ 'c', 'r', 'l', 'j', 'q', 'u', 'o', 'n', 's', 'm', 'z', 't', 'd', 'h', 'o', 'x', 'a', 'w', '1', '2', '3', '4', '5', '6', '7', '8', '9' ];
                // Overwrite shortcuts with no-op function. Key sequences will still be captured.
                for (var i = 0; i < ctrls.length; i++ ) {
                    //this.addShortcut('ctrl+' + ctrls[i], '', function () {}); //use if tinyMCE <=4.1.7
                    this.addShortcut('Meta+' + ctrls[i], '', function () {});
                }
                for (var i = 0; i < modKeys.length; i++ ) {
                    //this.addShortcut('alt+shift+' + modKeys[i], '', function () {});//use if tinyMCE <=4.1.7
                    this.addShortcut('access+' + modKeys[i], '', function () {});
                }
    });
	};
	// return
	return mceInit;
			
});
</script>
<?php
}

add_action('acf/input/admin_footer', 'my_acf_input_admin_footer');

can be inserted into function.php or a own plugin and should work. and provide the disable of tinymce shortcuts. (at my example it removes: headings, underline, and more. bold and italic shortcuts would still work)

I will update this post with the other options that wish to use. as soon i tested it

EDIT:
TinyMCE <= 4.1.7, and >= 4.1.8 use different code