Блог

Установка размера шрифта редактора Ace в MODX

  • Евгений Ц.
  • Нет комментариев

Давно хотел это сделать, и вот, наконец, добрался. То ли от долгого сидения за ПК, а может уже и возраст сказывается, вобщем, от стандартного размера шрифта в 13px в Ace редакторе глаза как-то стали уставать. Отсюда и возникла мысль самому устанавливать размер шрифта в редакторе.

Плагин выводит над редактором кнопки "+" и "-" которые соответственно увеличивают или уменьшают шрифт на 1px

Код плагина

<?php
$eventName = $modx->event->name;
$top="-50px";
switch($eventName) {
    case 'OnDocFormPrerender':
        $el="x-form-el-ta";
        $top="-70px";
    break;
    case 'OnChunkFormPrerender':
        $el="x-form-el-modx-chunk-snippet";
    break;
    case 'OnSnipFormPrerender':
        $el="x-form-el-modx-snippet-snippet";
    break;
    case 'OnPluginFormPrerender':
        $el="x-form-el-modx-plugin-plugincode";
    break; 
    case 'OnTempFormPrerender':
        $el="x-form-el-modx-template-content";
    break;    
}
    if($el){
       $modx->regClientStartupHTMLBlock("
        <style>
        #".$el." {position:relative;}
        </style>
        <script type='text/javascript'>
    	Ext.onReady(function () {
    		if (document.getElementsByClassName('ace_editor').length) {
    			if (!localStorage.getItem('aceFontSize')) {
    				localStorage.setItem('aceFontSize', '13');
    			} else {
    				setFontSize(0);
    			}
    			new Ext.Panel({
    				style: 'position:absolute; top:".$top.";right:55px;',
    				items: [{
    					buttons: [{
    						text: '+',
    						width: '15px',
    						handler: function () {
    							setFontSize(1);
    						}
    					   },{
    						text: '-',
    						width: '15px',
    						handler: function () {
    							setFontSize(-1);
    						}
    					}]
    				}],
    				renderTo: '".$el."'
    			});
    		}
    	});
    	function setFontSize(d) {
    		var editor_ace = document.getElementsByClassName('ace_editor');
    		var fontSize = localStorage.getItem('aceFontSize');
    		fontSize = parseInt(fontSize) + d;
    		[].forEach.call(editor_ace, el => {
                el.style.fontSize = fontSize + 'px';
            });
    		localStorage.setItem('aceFontSize', fontSize);
    	}
    	</script>");        
    }

Как можно понять из кода, плагин вешается на события OnDocFormPrerender, OnChunkFormPrerender, OnSnipFormPrerender, OnPluginFormPrerender и OnTempFormPrerender.

Желаю всем хорошего зрения!

Комментарии ()

    Оставить комментарий

    *Ваш email адрес не будет опубликован.

    Введите сумму 1 + 2 =