Статьи

Добавление нового редактора Action for Orion

Январь 28, 2019

Если вы еще этого не слышали,  Orion — это новая веб-среда разработки от Eclipse. В записи блога, представляющей Ориона , я сказал, что эта будет выделяться из толпы и будет править миром. Почему другие веб-IDE не могут это сделать? Потому что Орион также будет идти по пути Eclipse, предоставляя возможность настраивать и расширять. Теперь с Orion 0.2 M5 вы можете расширить редактор и предоставить свой собственный редактор Action. Это первая и единственная доступная «точка расширения», но наверняка последуют другие.

Для этого совета мы добавим в редактор действие поиска по словарю. Действие откроет Google Dictionary во всплывающем окне для выбранного текста в редакторе. Да, всплывающие окна такие уродливые, и div будет намного лучше, я сделаю украшение позже, так что пока отключите ваши блокировщики всплывающих окон.

 

Расширение представляет собой простой файл HTML. Прелесть этого расширения в том, что вам не нужно ничего «развертывать» на сервере, чтобы это произошло. Все может быть сделано со стороны клиента. Загрузите и запустите образец сервера Orion. Открыть страницу просмотра реестра . В текстовом поле в правом верхнем углу введите  http://eclipse-tips.com/orion/dictionary.html и нажмите Установить. Теперь, если вы откроете редактор, вы увидите значок Eclipse Tips:

 

Если вы выделите текст в редакторе и нажмете значок (или нажмете сочетание клавиш Alt + Shift + D), вы увидите новое всплывающее окно Словаря Google.

всплывающий словарь

В Orion большая часть предоставляемого API — это Сервисы. Посмотрите в документации список доступных услуг. Чтобы расширить editorAction, вам нужно создать PluginProvider и зарегистрировать функцию обратного вызова для вашего действия. Вы также должны предоставить другие данные, такие как имя, значок и сочетание клавиш. Ваша функция будет вызываться с текущим выделением в редакторе вместе со всем содержимым редактора и с тем, где именно выбран ваш текст. Для этого плагина мы будем использовать только текущий выбор и использовать его, чтобы открыть всплывающее окно. Метод запуска действия — одна строка:

window.open('http://www.google.com/dictionary?langpair=en|en&hl=en&
aq=f&q='+selectedText+ '&dict=L', 'google_dictionary', 'width=600,height=400,resizable=yes,scrollbars=yes')

 

Метод вместе с информацией о нем передается провайдеру:

provider.registerServiceProvider("editorAction", {
    info : function() {
		return {
			name : "Dictionary",
			img : "http://eclipse-tips.com/favicon.ico",
			key : [ "d", false, true, true ]
		};
	},
	run : function(selectedText, text, selection) {
		window.open('http://www.google.com/dictionary?langpair=en|en&hl=en&aq=f&q='+selectedText+ '&dict=L', 
                'google_dictionary', 
                'width=600,height=400,resizable=yes,scrollbars=yes');
	}
});

И тогда этот код вызывается при загрузке страницы. Итак, все содержимое HTML:

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<script type="text/javascript" src="/orion-plugin.js"></script> 
<script> 
window.onload = function() {
	var provider = new eclipse.PluginProvider();
	provider.registerServiceProvider("editorAction", {
    	info : function() {
			return {
				name : "Dictionary",
				img : "http://eclipse-tips.com/favicon.ico",
				key : [ "d", false, true, true ]
			};
		},
		run : function(selectedText, text, selection) {
			window.open('http://www.google.com/dictionary?langpair=en|en&hl=en&aq=f&q='+selectedText+ '&dict=L', 
            	    'google_dictionary', 
                	'width=600,height=400,resizable=yes,scrollbars=yes');
		}
	});
	provider.connect();
};
</script> 
</head> 
<body>This is a dictionary extension for Orion</body> 
</html>

Поскольку файл orion-plugin.js загружается вместе с вашим HTML, вы можете указать относительный путь к нему. Но изображение загружается в редактор с тегом img, поэтому оно должно быть абсолютным путем. Я определил комбинацию клавиш Alt-Shift-d. Вы можете выбрать модификаторы, передав соответствующие значения true / false. Смотрите документацию по связыванию ключей для деталей. Содержимое тела не имеет значения, так как оно используется только в качестве информации, когда кто-то видит HTML в браузере.

 

С http://eclipse-tips.com/tips/38-adding-a-new-editoraction-for-orion

34
Share: