MentionMe for 1.8 & MyAlerts 2.0
#32
This method for having an autocomplete box present in the editor, as pictured here: http://community.mybb.com/thread-164576-...pid1127081


This isn't specific to MentionMe and would be pretty easy to work with DVZ Mentions as well. All this does is create a box that autocompletes the names of users on the board.

Step 1:
In codebuttons template, add:

<link rel="stylesheet" href="{$mybb->asset_url}/jscripts/select2/select2.css">
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/select2/select2.min.js"></script>

To the top of the template, with the other JS inclusions.

Then, find the toolbar line:

toolbar: "{$basic1}{$align}{$font}{$size}{$color}

Add "mention" (without quotes) wherever you want the button to appear, like so:

toolbar: "{$basic1}{$align}{$font}{$size}{$color}{$removeformat}mention,{$basic2}image,{$email}{$link}|{$emoticon}|{$list}code,quote|maximize,source",

Save and close the template.

Step 2:
Then in jscripts/bbcodes_sceditor.js, find:

exec: function (caller) {
			$.sceditor.command.get('email')._dropDown(this, caller);
		}
	});

After that add:

/***************************************
	* Mention Me Button *
	***************************************/
	$.sceditor.command.set('mention', {
		_dropDown: function (editor, caller) {
			var $content;

			$content = $(
				'<div>' +
					'<label for="names">' + editor._('Names to Mention:') + '</label> ' +
					'<input type="text" id="names" />' +					
				'</div>' +
				'<div><input type="button" class="button" value="' + editor._('Insert') + '" /></div>'
			);


			$content.find('.button').click(function (e) {
				var	val = $content.find('#names').val();
				var array = val.split(',');

				if(val) {
					// needed for IE to reset the last range
					editor.focus();
						$.each(array, function(index, value ){
							if(value.replace(/\s/g, '') != "")
							{
								var text = value.replace(/,\s?/g, ", "),
									id = value.replace(/,\s?/g, ", ");
								editor.wysiwygEditorInsertHtml('@"' + text + '" ');	
								
							}
						});
					}
				

				editor.closeDropDown(true);
				e.preventDefault();
			});

			editor.createDropDown(caller, 'insertmention', $content);
		},
		exec: function (caller) {
			$.sceditor.command.get('mention')._dropDown(this, caller);
			MyBB.select2();
			$("#names").select2({
				placeholder: "Search for a User",
				minimumInputLength: 3,
				maximumSelectionSize: 25,
				multiple: true,
				ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
					url: "xmlhttp.php?action=get_users",
					dataType: 'json',
					data: function (term, page) {
						return {
							query: term, // search term
						};
					},
					results: function (data, page) { // parse the results into the format expected by Select2.
						// since we are using custom formatting functions we do not need to alter remote JSON data
						return {results: data};
					}
				},
				initSelection: function(element, callback) {
					var query = $(element).val();
					if (query !== "") {
						var newqueries = [];
						exp_queries = query.split(",");
						$.each(exp_queries, function(index, value ){
							if(value.replace(/\s/g, '') != "")
							{
								var newquery = {
									id: value.replace(/,\s?/g, ", "),
									text: value.replace(/,\s?/g, ", ")
								};
								newqueries.push(newquery);
							}
						});
						callback(newqueries);
					}
				}
			});

		},
		txtExec: ['@'],

	});

You can change the various values here to be what you need (eg. change the text, change the symbol, etc.). Save and upload the file.

Step 3:

Then you have to add the button to the CSS. I use a custom theme for my editor that uses font awesome, so this is what mine looks like. You'll have to update it to use your own image.

.sceditor-button-mention div:before { content: "\f1fa"; }
This displays the @ symbol in the editor row.

That's it. All it does it provided the autocomplete box in the editor. It doesn't tag anybody and it doesn't format names.
Reply


Messages In This Thread
MentionMe for 1.8 & MyAlerts 2.0 - by jshort - 2014-12-22, 08:51 PM
RE: MentionMe for 1.8 & MyAlerts 2.0 - by jshort - 2014-12-24, 03:43 PM
RE: MentionMe for 1.8 & MyAlerts 2.0 - by jshort - 2014-12-24, 05:24 PM
RE: MentionMe for 1.8 & MyAlerts 2.0 - by jshort - 2014-12-24, 06:02 PM
RE: MentionMe for 1.8 & MyAlerts 2.0 - by jshort - 2014-12-24, 09:10 PM
RE: MentionMe for 1.8 & MyAlerts 2.0 - by Shade - 2014-12-26, 12:57 PM
RE: MentionMe for 1.8 & MyAlerts 2.0 - by ashkir - 2014-12-28, 11:42 PM
RE: MentionMe for 1.8 & MyAlerts 2.0 - by ashkir - 2014-12-29, 04:57 AM
RE: MentionMe for 1.8 & MyAlerts 2.0 - by Spizy - 2015-01-07, 04:00 PM
RE: MentionMe for 1.8 & MyAlerts 2.0 - by user25 - 2015-01-07, 04:14 PM
RE: MentionMe for 1.8 & MyAlerts 2.0 - by jshort - 2015-01-19, 08:20 PM
RE: MentionMe for 1.8 & MyAlerts 2.0 - by jshort - 2015-01-19, 09:56 PM
RE: MentionMe for 1.8 & MyAlerts 2.0 - by jshort - 2015-01-19, 10:07 PM
RE: MentionMe for 1.8 & MyAlerts 2.0 - by jshort - 2015-01-28, 07:17 PM
RE: MentionMe for 1.8 & MyAlerts 2.0 - by Shade - 2015-01-28, 08:24 PM
RE: MentionMe for 1.8 & MyAlerts 2.0 - by jshort - 2015-02-14, 12:12 AM
RE: MentionMe for 1.8 & MyAlerts 2.0 - by jshort - 2015-02-14, 01:11 AM
RE: MentionMe for 1.8 & MyAlerts 2.0 - by zukro - 2015-06-03, 08:33 AM
RE: MentionMe for 1.8 & MyAlerts 2.0 - by jshort - 2015-06-03, 10:48 AM
RE: MentionMe for 1.8 & MyAlerts 2.0 - by zukro - 2015-06-03, 02:16 PM
RE: MentionMe for 1.8 & MyAlerts 2.0 - by jshort - 2015-06-03, 03:20 PM
RE: MentionMe for 1.8 & MyAlerts 2.0 - by jshort - 2015-06-04, 01:01 AM
RE: MentionMe for 1.8 & MyAlerts 2.0 - by Pril - 2016-04-19, 12:48 PM
RE: MentionMe for 1.8 & MyAlerts 2.0 - by Eska - 2016-05-04, 10:41 AM
RE: MentionMe for 1.8 & MyAlerts 2.0 - by jshort - 2016-05-04, 11:29 AM
RE: MentionMe for 1.8 & MyAlerts 2.0 - by Eska - 2016-05-04, 11:33 AM
RE: MentionMe for 1.8 & MyAlerts 2.0 - by .m. - 2016-05-05, 02:11 AM

Forum Jump:


Users browsing this thread: 1 Guest(s)