Javascript-форум - При нажатии имитировать клик на области

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - При нажатии имитировать клик на области (https://javascript.ru/forum/jquery/53856-pri-nazhatii-imitirovat-klik-na-oblasti.html)

При нажатии имитировать клик на области

Уважаемы ГУРУ прошли сутки почти без сна, в одной причине.
Есть редактор текста (как например тут) и в него мне надо вставить новую кнопочку и что бы по нажатии на нее происходили каки ето действия...
Сутки бьюсь но реально не могу *( Если у кого то есть 1 минутка глянуть подсказать был бы очень благодарен - так как немного далек я от этого, только учусь. Пытался сам но все безуспешно:help: :help: :help:

Код панельки

var ls = ls || {};

/**
* Различные настройки
*/
ls.settings = (function ($) {

	this.getMarkitup = function() {
		return {
			
			
	{separator:'---------------' },			
		{name: ls.lang.get('panel_images'), className:'editor-pictures', key:'W', beforeInsert:function(l) {			

	  ('#z-1').click();

		}

},	

{separator:'---------------' },	

				{name: ls.lang.get('panel_image'), className:'editor-picture', key:'P', beforeInsert: function(h) { jQuery('#window_upload_img').jqmShow(); } },
				{name: ls.lang.get('panel_video'), className:'editor-video', replaceWith:'<video>[!['+ls.lang.get('panel_video_promt')+':!:http://]!]</video>' },
				{name: ls.lang.get('panel_url'), className:'editor-link', key:'L', openWith:'<a href="[!['+ls.lang.get('panel_url_promt')+':!:http://]!]"(!( title="[![Title]!]")!)>', closeWith:'</a>', placeHolder:'Your text to link...' },
				{name: ls.lang.get('panel_user'), className:'editor-user', replaceWith:'<ls user="[!['+ls.lang.get('panel_user_promt')+']!]" />' },
				


				{separator:'---------------' },
				{name: ls.lang.get('panel_clear_tags'), className:'editor-clean', replaceWith: function(markitup) { return markitup.selection.replace(/<(.*?)>/g, "") } },
				{name: 'cпойлер', className:'editor-spoiler', openWith:'<spoiler title="Заглянуть под спойлер">', closeWith:'</spoiler>' },
				{name: ls.lang.get('panel_cut'), className:'editor-cut', replaceWith: function(markitup) { if (markitup.selection) return '<cut name="'+markitup.selection+'">'; else return '<cut>' }}

Я по аналогии прописал новую кнопочку ( добавил там в CSS и в картинки - она есть, но обработьа ее нажатие :blink:

Моя кнопочка

{name: ls.lang.get('panel_images'), className:'editor-pictures', key:'W', beforeInsert:function(l) {			

	  ('#z-1').click();

		}

В загружаемом отдельно html файле в котором подгружается этот редактор есть такое место

<ul>

   <li class="upload-link"><a href="javascript:ls.image.showForm()" id="image-start-upload"><span  id="z-1">Загрузить</span></a></li>
</ul>

По факту это флеш объект который открывает новое окно загрузки изображений.

КАК мне их соединить, что бы при нажатии на кнопочку в редакторе срабатывало типа я нажал на эту ссылку.

ПОМОГИТЕ люди добрые :help: :help:

То-есть строка в меню редактора должна быть

{name: ls.lang.get('panel_images'), className:'editor-pictures', key:'W', beforeInsert:function foo() {
$("ls.image.showForm()
").click();
}
},

? - в этом я четсно ТУП как пробка - только осваиваю (

не сработало ((

Попробовал вот так - просто ошибка и форма вообще не выводится.

{name: ls.lang.get('panel_images'), className:'editor-pictures', key:'W', beforeInsert:function ls.image.showForm()},

Цитата:

Сообщение от Delfiniys

я четсно ТУП как пробка

Теперь вижу...

beforeInsert: function() { ls.image.showForm() }

{name: ls.lang.get('panel_images'), className:'editor-pictures', key:'W', beforeInsert: function() { ls.image.showForm() } },

:cray: :cray: Не срабатывает *((

Открой консоль (F12), проверь нет ли ошибок. Запусти из консоли:

Код:

ls.image.showForm()

Должна отобразиться форма. Если не отображается, значит чет ты напутал и это не окно загрузки, а чета другое.

ls.image.showForm()
undefined

Все полуичлось но немного не так форма вылазит, НО она для не такая для одного файла так сказать *((

Вот в коде сраницы: сюда надо жать

<ul>

   <li class="upload-link"><a href="javascript:ls.image.showForm()" id="image-start-upload">Загрузить</li>
</ul>

Моет это потому, что там форма как бы флеш?

в меню редактора я вставил вот так

{name: ls.lang.get('panel_images'), className:'editor-pictures', key:'W', beforeInsert: function() { ls.image.showForm() } },

Просто если нажать на кнопку ЗАГРУЗКА то открывается окно для мультиаплоада, а если через ту констркуцию выше то появляется окошечко в котром надо еще нажать на "выбор" ( только 1 ого файла) и загрузить!" Может быть не передается ИД там, или что то еще (((

Нашел ошибку почему форму ВЫВОДИЛО в 1 файл - был не закрыт тег А. Когда закрыл опять все по новой просто не выводит (((

ls.image.showForm()
undefined

в консоле тоже ошибок нет (((

и поправил тег А
в исходном коде появилось такое

<ul>

   <li class="upload-link"><object id="SWFUpload_0" type="application/x-shockwave-flash" data="http://ukrshopper.info/engine/lib/external/swfupload/swfupload.swf?preventswfcaching=1424527736780" width="122" height="30" class="swfupload"><param name="wmode" value="transparent"><param name="movie" value="http://ukrshopper.info/engine/lib/external/swfupload/swfupload.swf?preventswfcaching=1424527736780"><param name="quality" value="high"><param name="menu" value="false"><param name="allowScriptAccess" value="always"><param name="flashvars" value="movieName=SWFUpload_0&amp;uploadURL=http%3A%2F%2Fukrshopper.info%2Fimage%2Fupload&amp;useQueryString=false&amp;requeueOnError=f
alse&amp;httpSuccess=&amp;assumeSuccessTimeout=0&amp;params=SSID%3D6e81213d0a2c597b4476505bcb771834%26amp%3Bsecurity_ls_key%3D1649a56498ee96551cb75db697c19c00%26amp%3Btopic_id%3D%26amp*
size%3A%2014px%3B%20%7D&amp;buttonAction=-110&amp;buttonDisabled=false&amp;buttonCursor=-2"></object></li>
</ul>

Попробовал все обернуть в

<div id="z-2">

и вывел кнопку

{name: ls.lang.get('panel_images1'), className:'editor-pictures1', key:'2', beforeInsert:

function foo() {
$("#z-2").click();
}

 },

все равно не срабатывает!!!

Блин ну что мне за не фарт, только нашел и встроил нужный мне как воздух скрипт, на 1ой кнопке уже 3 сутки мучаюсь ((((

На флэшку программно не нажмешь. Нужно подкладывать такую же флешку под твою кнопку в тулбаре. Или забить на пользователей старых браузеров и юзать атрибут mutliple - он без всяких плясок с флешками предоставляет мультивыбор файлов.

Не канает mutliple

Хорошо, мне впринципе по барабану как и где выводить. Если программно не нажмешь - КАК вот в этом коде выводить

var ls = ls || {};

/**
* Различные настройки
*/
ls.settings = (function ($) {

	this.getMarkitup = function() {
		return {
			onShiftEnter:  	{keepDefault:false, replaceWith:'<br />\n'},
			onCtrlEnter:  	{keepDefault:false, openWith:'\n<p>', closeWith:'</p>'},
			onTab:    		{keepDefault:false, replaceWith:'    '},
			markupSet:  [
				{name:'H4', className:'editor-h4', openWith:'<h4>', closeWith:'</h4>' },
				{name:'H5', className:'editor-h5', openWith:'<h5>', closeWith:'</h5>' },
				{name:'H6', className:'editor-h6', openWith:'<h6>', closeWith:'</h6>' },
				{separator:'---------------' },
				{name: ls.lang.get('panel_b'), className:'editor-bold', key:'B', openWith:'(!(<strong>|!|<b>)!)', closeWith:'(!(</strong>|!|</b>)!)' },
				{name: ls.lang.get('panel_i'), className:'editor-italic', key:'I', openWith:'(!(<em>|!|<i>)!)', closeWith:'(!(</em>|!|</i>)!)'  },
				{name: ls.lang.get('panel_s'), className:'editor-stroke', key:'S', openWith:'<s>', closeWith:'</s>' },
				{name: ls.lang.get('panel_u'), className:'editor-underline', key:'U', openWith:'<u>', closeWith:'</u>' },
				{name: ls.lang.get('panel_quote'), className:'editor-quote', key:'Q', replaceWith: function(m) { if (m.selectionOuter) return '<blockquote>'+m.selectionOuter+'</blockquote>'; else if (m.selection) return '<blockquote>'+m.selection+'</blockquote>'; else return '<blockquote></blockquote>' } },
							},
				{name: ls.lang.get('panel_list'), className:'editor-ul', openWith:'    <li>', closeWith:'</li>', multiline: true, openBlockWith:'<ul>\n', closeBlockWith:'\n</ul>' },
				{name: ls.lang.get('panel_list'), className:'editor-ol', openWith:'    <li>', closeWith:'</li>', multiline: true, openBlockWith:'<ol>\n', closeBlockWith:'\n</ol>' },
		{name: ls.lang.get('panel_list_li'), className:'editor-li', openWith:'<li>', closeWith:'</li>' },
			
	{separator:'---------------' },			
		{name: ls.lang.get('panel_images'), className:'editor-pictures', key:'1', beforeInsert: function() { ls.image.showForm() } },	


				{name: ls.lang.get('panel_image'), className:'editor-picture', key:'P', beforeInsert: function(h) { jQuery('#window_upload_img').jqmShow(); } },
				{name: ls.lang.get('panel_video'), className:'editor-video', replaceWith:'<video>[!['+ls.lang.get('panel_video_promt')+':!:http://]!]</video>' },
				{name: ls.lang.get('panel_url'), className:'editor-link', key:'L', openWith:'<a href="[!['+ls.lang.get('panel_url_promt')+':!:http://]!]"(!( title="[![Title]!]")!)>', closeWith:'</a>', placeHolder:'Your text to link...' },
				{name: ls.lang.get('panel_user'), className:'editor-user', replaceWith:'<ls user="[!['+ls.lang.get('panel_user_promt')+']!]" />' },
				


				{separator:'---------------' },
				{name: ls.lang.get('panel_clear_tags'), className:'editor-clean', replaceWith: function(markitup) { return markitup.selection.replace(/<(.*?)>/g, "") } },
				{name: 'cпойлер', className:'editor-spoiler', openWith:'<spoiler title="Заглянуть под спойлер">', closeWith:'</spoiler>' },
				{name: ls.lang.get('panel_cut'), className:'editor-cut', replaceWith: function(markitup) { if (markitup.selection) return '<cut name="'+markitup.selection+'">'; else return '<cut>' }}
				

				

			]
		}
	};

	

	return this;
}).call(ls.settings || {},jQuery);

выводить ту часть - которая отвечает за вывод я так понимаю этой флешки ( по крайней мере именно это я вставляю в шаблоне и все работает)

<ul>

   <li class="upload-link"><a href="javascript:ls.image.showForm()" id="image-start-upload">Загрузить</a></li>
</ul>

По фатку за вывод этого флеша отвечает

<a href="javascript:ls.image.showForm()" id="image-start-upload">Загрузить</a>

Вот мне бы это вставить в меню ((

Думаю тебе придется сначала сгенерировать тулбар, затем добавить флешку в нужную кнопку. Ищи по коду где используется image-start-upload. Если там document.getElementById, то замени на document.querySelector('.editor-picture'). Если там селектор #image-start-upload, то просто измени селектор.

В подключаемом скрипте для мультизагрузки

this.showForm = function () {
        var $select = $('#image-start-upload');
        if ($select.length) {
            var pos = $select.offset();
            w = $select.outerWidth();
            h = $select.outerHeight();
            t = pos.top + h - 30 + 'px';
            l = pos.left - 15 + 'px';
            $('#image-upload-form').css({
                'top':t,
                'left':l
            });
        }
        $('#image-upload-form').show();
    }

А на что и где изменить этот селектор ?

Простите за тупость (

Вот еще в самом начале есть

this.initSwfUpload = function (opt) {

        var opt = opt || {};
        //alert(opt.post_params);
        opt.button_placeholder_id = 'image-start-upload';

        if ($.cookie('ls_image_target_tmp')) {
            opt.post_params.ls_image_target_tmp = $.cookie('ls_image_target_tmp');
        } else {
            opt.post_params.ls_image_target_tmp = 0;
        }
        $(ls.swfupload).bind('load', function () {
            this.swfu = ls.swfupload.init(opt);

            $(this.swfu).bind('eUploadProgress', this.swfHandlerUploadProgress);
            $(this.swfu).bind('eFileDialogComplete', this.swfHandlerFileDialogComplete);
            $(this.swfu).bind('eUploadSuccess', this.swfHandlerUploadSuccess);
            $(this.swfu).bind('eUploadComplete', this.swfHandlerUploadComplete);
        }.bind(this));

        ls.swfupload.loadSwf();
    }

Помогите пожалуйста нубу (

Походу скрипт флешки ждет именно id. Тогда назначь этот id кнопке. В markupSet может можно указать id, аналогично className? Попробуй добавить id: 'image-start-upload' и посмотреть в инспекторе на кнопку - назначился ли id. Если не назначился, то после генерации тулбара добавь id так:

$('.editor-picture').prop('id', 'image-start-upload');

Только ссылку Загрузить не забудь удалить.

Сделал так

{name: ls.lang.get('panel_images'), className:'editor-pictures', id:'image-start-upload', key:'1' },

ссылку в шаблоне убрал -но воз и ныне там (

НЕмного не понял как смотреть в консоли где передался или нет ID

+ куда это добавить
$('.editor-picture').prop('id', 'image-start-upload');

Цитата:

Сообщение от Delfiniys

+ куда это добавить

После инициализации маркитапа. Возможно он инициализируется по событию загрузки документа.

Пошел по другому пути, просто в DIV инициализации верхнего вемню всунул тот html код. Вроде все ОК! Но возник вопрос как добавить красивую кнопочку рядом с текстом загрузка..

SWFUpload.prototype.getFlashHTML = function () {
	// Flash Satay object syntax: [url]http://www.alistapart.com/articles/flashsatay[/url]
	return ['<object id="', this.movieName, '" type="application/x-shockwave-flash" data="', this.settings.flash_url, '" width="', this.settings.button_width, '" height="', this.settings.button_height, '" class="swfupload">',
				'<param name="wmode" value="', this.settings.button_window_mode, '" />',
				'<param name="movie" value="', this.settings.flash_url, '" />',
				'<param name="quality" value="high" />',
				'<param name="menu" value="false" />',
				'<param name="allowScriptAccess" value="always" />',
				'<param name="flashvars" value="' + this.getFlashVars() + '" />',

				'</object>'].join("");
};

return ['<img src="/images/images.png" />,<object id="',

- пробовал вот так но тогда появляется рисунок, а флеш объект не грузится ((