I want a button in the editor

ahmed salman2 · ahmed salman2 Sat 20 Aug 2016, 12:30

I want a button in the editor (html)

that my css

Code:: .note { background: #ffc url("http://i35.servimg.com/u/f35/19/50/18/33/note_210.png") no-repeat scroll 99% center; border: 1px solid #e6c555; border-radius: 5px; color: #666; direction: rtl; margin: 10px auto; padding: 0 0 2px; width: 60%; } .note p { color: #a90606; font-weight: 700; margin: 12px 29px 9px 12px; padding-right: 18px; text-shadow: 0 0 0 #fff; }

ahmed salman2 · ahmed salman2 Sat 20 Aug 2016, 16:33

Guest · Guest Sat 20 Aug 2016, 17:05

ahmed salman2 wrote:UP

@ahmed salman2: We kindly ask of you to be patient and not to double post pushing your way up to get noticed.

ahmed salman2 · ahmed salman2 Sun 21 Aug 2016, 14:52

؟؟؟

Guest · Guest Sun 21 Aug 2016, 14:55

I warned you about double posting and being impatient. You'll now have wait until @Ange Tuteur gets on the case.

*** Topic locked ***

**Ange Tuteur** · **Ange Tuteur** Mon 22 Aug 2016, 15:25

Unlocked

Hi @ahmed salman2,

Just to clarify ; I am rarely online during the weekends, because I take time off to relax like other humans, so I am less likely to answer you during the weekend. Now that, that is out of the way, let's get down to business, shall we ? Smile

Your query is :

I want a button in the editor (html)

that my css

I'm not sure I comprehend.. Could you explain further ?

1. What do you want this "button" to do ?
2. What is the CSS for ?

Thanks in advance for clarifying. Rose

ahmed salman2 · ahmed salman2 Tue 23 Aug 2016, 13:12

hi

that my i want

**Ange Tuteur** · **Ange Tuteur** Tue 23 Aug 2016, 15:47

@ahmed salman2 thanks. Rose

Go to Admin Panel > Modules > JavaScript codes management > create a new script

Placement : In all the pages

Code:: $(function() { if ($.sceditor && window.toolbar) { $.sceditor.command.set('note', { tooltip : 'Insert a note', exec : function() { this.insert('[table class="note"][tr][td]', '[/td][/tr][/table]'); }, txtExec : function() { this.insertText('[table class="note"][tr][td]', '[/td][/tr][/table]'); } }); toolbar += '|note'; } });

Save and the button will be available in the editor.

NOTE : the button will display as "Youtube" until you set a custom icon with this CSS :

Code:: .sceditor-button-note div { background-image:url(IMAGE_URL) !important; }

Also, make sure add the CSS below to your stylesheet. Wink

Code:: .note { background: #ffc url("http://i35.servimg.com/u/f35/19/50/18/33/note_210.png") no-repeat scroll 99% center; border: 1px solid #e6c555; border-radius: 5px; color: #666; direction: rtl; margin: 10px auto; padding: 0 0 2px; width: 60%; } .note td { color: #a90606; font-weight: 700; margin: 12px 29px 9px 12px; padding-right: 18px; text-shadow: 0 0 0 #fff; }

ahmed salman2 · ahmed salman2 Wed 24 Aug 2016, 06:34

thank but i want when i click button that insert that

Code:: [NOTE][/NOTE]

and when i send post that show html

**Ange Tuteur** · **Ange Tuteur** Wed 24 Aug 2016, 10:43

There's no [NOTE] bbcode, so it wont be formatted. That's why I suggest using the TABLE tags, because they can be styled just the same using CSS.

For example :

HELLO WORLD !

Code:: [table style="min-height:40px;background:#ffc url(http://i35.servimg.com/u/f35/19/50/18/33/note_210.png) no-repeat scroll 99% center;border:1px solid #e6c555;border-radius:5px;color:#666;direction:rtl;margin:10px auto;padding:0 0 2px;width:60%;"][tr][td style="color:#a90606;font-weight:700;margin:12px 29px 9px 12px;padding-right:45px;text-shadow:0 0 0 #fff;"]HELLO WORLD ![/td][/tr][/table]

Except in your case you'll be using this script :

Code:: $(function() { if ($.sceditor && window.toolbar) { $.sceditor.command.set('note', { tooltip : 'Insert a note', exec : function() { this.insert('[table class="note"][tr][td]', '[/td][/tr][/table]'); }, txtExec : function() { this.insertText('[table class="note"][tr][td]', '[/td][/tr][/table]'); } }); toolbar += '|note'; } });

along with this CSS :

Code:: .sceditor-button-note div { background-image:url(IMAGE_URL) !important; } .note { background: #ffc url("http://i35.servimg.com/u/f35/19/50/18/33/note_210.png") no-repeat scroll 99% center; border: 1px solid #e6c555; border-radius: 5px; color: #666; direction: rtl; margin: 10px auto; padding: 0 0 2px; width: 60%; min-height:40px; } .note td { color: #a90606; font-weight: 700; margin: 12px 29px 9px 12px; padding-right: 45px; text-shadow: 0 0 0 #fff; }

Guest · Guest Wed 24 Aug 2016, 10:55

@Ange Tuteur: Another way would be to use the quote /quote tags and change it into some kind of a memo formatted style. Add a bit of CSS to it for the background, make it say 'Memo:' in the 1st phrase, style it with a certain width and voila you made yourself another plug-in for Edge Laughing

**Ange Tuteur** · **Ange Tuteur** Wed 24 Aug 2016, 11:04

@Samantha yep you could do that, too ! I usually suggest the table tags, because they're very versatile, seeing that you can use CSS classes to style them. PLUS you don't need to parse them with JavaScript, which is something that I don't like doing for custom bbcode, because it can conflict with other plugins.

Guest · Guest Wed 24 Aug 2016, 11:06

Ange Tuteur wrote:@Samantha yep you could do that, too ! I usually suggest the table tags, because they're very versatile, seeing that you can use CSS classes to style them. PLUS you don't need to parse them with JavaScript, which is something that I don't like doing for custom bbcode, because it can conflict with other plugins.

Well, anyway, it was just a suggestion for Edge yk. To have memos or sidenotes that integrate with posts and their texts, even have their own font and have their own background, for instance pink with a flower bottom right Razz

**Ange Tuteur** · **Ange Tuteur** Wed 24 Aug 2016, 11:38

Yeah, I could make a plugin like that using the tables and CSS. I might consider making a tutorial about creating custom sceditor commands. Maybe though, I'd have to think of a way to make creating buttons user-friendly... a generator maybe.... Think

**omarpop23** · **omarpop23** Wed 24 Aug 2016, 14:46

i think he is need this code
http://www.ibda3araby.com/11001.js

ahmed salman2 · ahmed salman2 Wed 24 Aug 2016, 19:15

omarpop23 wrote:i think he is need this code
http://www.ibda3araby.com/11001.js

yes that is my i want
that fourm when i click the button note that insert

[note][/note]

when send the post that show HTML
This is something wondrous

**Ange Tuteur** · **Ange Tuteur** Thu 25 Aug 2016, 13:09

omarpop23 wrote:i think he is need this code
http://www.ibda3araby.com/11001.js

Unless you've permission from the owner of this forum, I'm not ripping their code.

ahmed salman2 wrote:yes that is my i want
that fourm when i click the button note that insert

[note][/note]

when send the post that show HTML
This is something wondrous

If that's really what you want, replace your script with this :

Code:: $(function() { if ($.sceditor && window.toolbar) { $.sceditor.command.set('note', { tooltip : 'Insert a note', exec : function() { this.insert('[note]', '[/note]'); }, txtExec : function() { this.insertText('[note]', '[/note]'); } }); toolbar += '|note'; } for (var a = $('.postbody, .post-entry'), i = 0, j = a.length; i < j; i++) { if (/\[note\].*?\[\/note\]/i.test(a[i].innerHTML)) { a[i].innerHTML = a[i].innerHTML.replace(/\[note\](.*?)\[\/note\]/gi, '<div class="note"><p>$1</p></div>'); } } });

and CSS with this :
https://fmdesign.forumotion.com/t956-i-want-a-button-in-the-editor#19354

ahmed salman2 · ahmed salman2 Thu 25 Aug 2016, 16:07

thank
can you make six button
and i have css code but iwant js code
thank you sir

ahmed salman2 · ahmed salman2 Thu 25 Aug 2016, 16:16

and im sorry i want that code work with

Code:: $(function () { $(function () { $('<div class="sceditor-group"><a class="sceditor-button sceditor-button-note" unselectable="on" title="Note"><div unselectable="on" style="cursor: pointer!important;opacity:1!important;background-image:url(http://a7la.honor.es/bbcodes/note.png)">Note</div></a></div>').insertBefore('.sceditor-group:last'); $('.sceditor-button-note').click(function () { $('#text_editor_textarea').sceditor('instance').insertText('[NOTE]', '[/NOTE]') }); $('<a class="sceditor-button sceditor-button-warning" unselectable="on" title="Warning"><div unselectable="on" style="cursor: pointer!important;opacity:1!important;background-image:url(http://a7la.honor.es/bbcodes/warning.png)">Warning</div></a>').insertAfter('.sceditor-button-note').click(function () { $('#text_editor_textarea').sceditor('instance').insertText('[WARNING]', '[/WARNING]') }); $('<a class="sceditor-button sceditor-button-information" unselectable="on" title="Information"><div unselectable="on" style="cursor: pointer!important;opacity:1!important;background-image:url(http://a7la.honor.es/bbcodes/information.png)">Information</div></a>').insertAfter('.sceditor-button-warning').click(function () { $('#text_editor_textarea').sceditor('instance').insertText('[INFO]', '[/INFO]') }); $('<a class="sceditor-button sceditor-button-download" unselectable="on" title="Download"><div unselectable="on" style="cursor: pointer!important;opacity:1!important;background-image:url(http://a7la.honor.es/bbcodes/download.png)">Download</div></a>').insertAfter('.sceditor-button-information').click(function () { $('#text_editor_textarea').sceditor('instance').insertText('[DOWNLOAD]', '[/DOWNLOAD]') }); $('<a class="sceditor-button sceditor-button-new" unselectable="on" title="New"><div unselectable="on" style="cursor: pointer!important;opacity:1!important;background-image:url(http://a7la.honor.es/bbcodes/new.png)">New</div></a>').insertAfter('.sceditor-button-download').click(function () { $('#text_editor_textarea').sceditor('instance').insertText('[NEW]', '[/NEW]') }); $('<a class="sceditor-button sceditor-button-solved" unselectable="on" title="Solved"><div unselectable="on" style="cursor: pointer!important;opacity:1!important;background-image:url(http://a7la.honor.es/bbcodes/solved.png)">Solved</div></a>').insertAfter('.sceditor-button-new').click(function () { $('#text_editor_textarea').sceditor('instance').insertText('[SOLVED]', '[/SOLVED]') }); $('<a class="sceditor-button sceditor-button-hashtag" unselectable="on" title="Hashtag"><div unselectable="on" style="cursor: pointer!important;opacity:1!important;background-image:url(http://a7la.honor.es/bbcodes/hashtag.png)">Hashtag</div></a>').insertAfter('.sceditor-button-solved').click(function () { $('#text_editor_textarea').sceditor('instance').insertText('[HASHTAG]', '[/HASHTAG]') }); $('<a class="sceditor-button sceditor-button-tagfriend" unselectable="on" title="Tag friend"><div unselectable="on" style="cursor: pointer!important;opacity:1!important;background-image:url(http://a7la.honor.es/bbcodes/tag%20friend.png)">Tag friend</div></a>').insertAfter('.sceditor-button-hashtag').click(function () { $('#text_editor_textarea').sceditor('instance').insertText('[TAG]', '[/TAG]') }); $('<a class="sceditor-button sceditor-button-blockquote" unselectable="on" title="Block Quote"><div unselectable="on" style="cursor: pointer!important;opacity:1!important;background-image:url(http://a7la.honor.es/bbcodes/block%20quote.png)">Block Quote</div></a>').insertAfter('.sceditor-button-tagfriend').click(function () { $('#text_editor_textarea').sceditor('instance').insertText('[blockquote]', '[/blockquote]') }) }) });

**Ange Tuteur** · **Ange Tuteur** Thu 25 Aug 2016, 16:44

Hi @ahmed salman2,

To make new buttons, simply replace all instances of "note" in the script below with whatever you want.

Code:: $(function() { if ($.sceditor && window.toolbar) { $.sceditor.command.set('note', { tooltip : 'Insert a note', exec : function() { this.insert('[note]', '[/note]'); }, txtExec : function() { this.insertText('[note]', '[/note]'); } }); toolbar += '|note'; } for (var a = $('.postbody, .post-entry'), i = 0, j = a.length; i < j; i++) { if (/\[note\].*?\[\/note\]/i.test(a[i].innerHTML)) { a[i].innerHTML = a[i].innerHTML.replace(/\[note\](.*?)\[\/note\]/gi, '<div class="note"><p>$1</p></div>'); } } });

You can use this tool to make it easier :
http://tools.zenverse.net/string-replacer/

ahmed salman2 · ahmed salman2 Fri 26 Aug 2016, 06:05

But I want six buttons in a one code Can you merge them ???

**Wolfuryo** · **Wolfuryo** Fri 26 Aug 2016, 07:01

Hi,

Try this code if you want six butttons:

Code:: $(function() { if ($.sceditor && window.toolbar) { /*First button*/ $.sceditor.command.set('note', { tooltip : 'Insert a note', exec : function() { this.insert('[note]', '[/note]'); }, txtExec : function() { this.insertText('[note]', '[/note]'); } }); toolbar += '|note'; } for (var a = $('.postbody, .post-entry'), i = 0, j = a.length; i < j; i++) { if (/\[note\].*?\[\/note\]/i.test(a[i].innerHTML)) { a[i].innerHTML = a[i].innerHTML.replace(/\[note\](.*?)\[\/note\]/gi, '<div class="note"><p>$1</p></div>'); } /*Second button*/ $.sceditor.command.set('note', { tooltip : 'Insert a note', exec : function() { this.insert('[note]', '[/note]'); }, txtExec : function() { this.insertText('[note]', '[/note]'); } }); toolbar += '|note'; } for (var a = $('.postbody, .post-entry'), i = 0, j = a.length; i < j; i++) { if (/\[note\].*?\[\/note\]/i.test(a[i].innerHTML)) { a[i].innerHTML = a[i].innerHTML.replace(/\[note\](.*?)\[\/note\]/gi, '<div class="note"><p>$1</p></div>'); } /*Third button*/ $.sceditor.command.set('note', { tooltip : 'Insert a note', exec : function() { this.insert('[note]', '[/note]'); }, txtExec : function() { this.insertText('[note]', '[/note]'); } }); toolbar += '|note'; } for (var a = $('.postbody, .post-entry'), i = 0, j = a.length; i < j; i++) { if (/\[note\].*?\[\/note\]/i.test(a[i].innerHTML)) { a[i].innerHTML = a[i].innerHTML.replace(/\[note\](.*?)\[\/note\]/gi, '<div class="note"><p>$1</p></div>'); } /*Fourth button*/ $.sceditor.command.set('note', { tooltip : 'Insert a note', exec : function() { this.insert('[note]', '[/note]'); }, txtExec : function() { this.insertText('[note]', '[/note]'); } }); toolbar += '|note'; } for (var a = $('.postbody, .post-entry'), i = 0, j = a.length; i < j; i++) { if (/\[note\].*?\[\/note\]/i.test(a[i].innerHTML)) { a[i].innerHTML = a[i].innerHTML.replace(/\[note\](.*?)\[\/note\]/gi, '<div class="note"><p>$1</p></div>'); } /*Fifth button*/ $.sceditor.command.set('note', { tooltip : 'Insert a note', exec : function() { this.insert('[note]', '[/note]'); }, txtExec : function() { this.insertText('[note]', '[/note]'); } }); toolbar += '|note'; } for (var a = $('.postbody, .post-entry'), i = 0, j = a.length; i < j; i++) { if (/\[note\].*?\[\/note\]/i.test(a[i].innerHTML)) { a[i].innerHTML = a[i].innerHTML.replace(/\[note\](.*?)\[\/note\]/gi, '<div class="note"><p>$1</p></div>'); } /*Sixth button*/ $.sceditor.command.set('note', { tooltip : 'Insert a note', exec : function() { this.insert('[note]', '[/note]'); }, txtExec : function() { this.insertText('[note]', '[/note]'); } }); toolbar += '|note'; } for (var a = $('.postbody, .post-entry'), i = 0, j = a.length; i < j; i++) { if (/\[note\].*?\[\/note\]/i.test(a[i].innerHTML)) { a[i].innerHTML = a[i].innerHTML.replace(/\[note\](.*?)\[\/note\]/gi, '<div class="note"><p>$1</p></div>'); } } });

You have to change note( in $.sceditor.command.set('note', { ) to something different for every button. Also you have to change [note] and [/note] to something different for every button.

ahmed salman2 · ahmed salman2 Fri 26 Aug 2016, 08:09

@Andrei34 thank you
is working

Guest · Guest Fri 26 Aug 2016, 12:23

ahmed salman2 wrote:
But I want six buttons in a one code Can you merge them ???

@ahmed salman2: If this was my site, I'd have banned you waaaaaaay b4.

**Ange Tuteur** · **Ange Tuteur** Fri 26 Aug 2016, 13:20

^ that'd be mean

@ahmed salman2 is this solved ?

Sponsored content · Sponsored content

IMPORTANT

I want a button in the editor

I want a button in the editor

Re: I want a button in the editor

Re: I want a button in the editor

Re: I want a button in the editor

Re: I want a button in the editor

Re: I want a button in the editor

Re: I want a button in the editor

Re: I want a button in the editor

Re: I want a button in the editor

Re: I want a button in the editor

Re: I want a button in the editor

Re: I want a button in the editor

Re: I want a button in the editor

Re: I want a button in the editor

Re: I want a button in the editor

Re: I want a button in the editor

Re: I want a button in the editor

Re: I want a button in the editor

Re: I want a button in the editor

Re: I want a button in the editor

Re: I want a button in the editor

Re: I want a button in the editor

Re: I want a button in the editor

Re: I want a button in the editor

Re: I want a button in the editor

Re: I want a button in the editor

Create an account or log in to leave a reply

Create an account

Log in