WordPress.org

Make WordPress Core

Opened 13 years ago

Closed 16 months ago

Last modified 16 months ago

#6331 closed enhancement (fixed)

TinyMCE should have a code button

Reported by: westi Owned by:
Milestone: Priority: normal
Severity: normal Version: 2.5
Component: TinyMCE Keywords:
Focuses: javascript Cc:

Description

The html editor has a code button on the quicktags bar but TinyMCE doesn't.

This is the only missing feature from TinyMCE that makes me switch to the HTML view when writing my weekly digest posts.

Attachments (7)

6331.diff (4.0 KB) - added by miyauchi 7 years ago.
6331.2.diff (5.4 KB) - added by miyauchi 7 years ago.
change plugin name and some fix
6331.3.diff (3.6 KB) - added by miyauchi 7 years ago.
delete duplicated lines …
6331.4.diff (4.0 KB) - added by miyauchi 7 years ago.
6331.5.diff (4.1 KB) - added by miyauchi 7 years ago.
fix tinymce old api.
plugin.js (1.5 KB) - added by Denis-de-Bernardy 6 years ago.
precode plugin
6331.6.diff (1.1 KB) - added by ericlewis 5 years ago.

Download all attachments as: .zip

Change History (49)

#1 @fool4christ
12 years ago

+1. With WordPress' long importance to the Open Source community, it seems that sharing code on a WordPress-powered site ought to be trivially easy.

There definitely needs to be a patch for this.

#2 @JeremyVisser
12 years ago

  • Milestone changed from 2.9 to 2.8
  • Owner changed from anonymous to JeremyVisser

+1. This should be trivial to add. (I'll see how I go today.)

#3 @JeremyVisser
12 years ago

Okay, I am about to have a nervous breakdown from TinyMCE hacking. Getting absolutely nowhere, and now my right eyelid is twitching. Anybody else want to have a stab at this?

#4 @JeremyVisser
12 years ago

I'm getting somewhere. I've got a working button to wrap <code> tags around selected text. No icon yet, and if you click the button a second time, it does not remove the code tag.

I think it is because I am using execCommand('mceReplaceContent'), where something that is aware of nodes would be more appropriate.

#5 @DD32
12 years ago

Hm.. Are you sure TinyMCE doesn't already have a plugin to add the Code button Jeremy?

#6 @ryan
12 years ago

  • Type changed from defect (bug) to enhancement

#7 @ad7863
12 years ago

Totally, at the moment I'm just putting code in my posts in italic.

#8 @janeforshort
11 years ago

  • Milestone changed from 2.8 to Future Release

Punting to be evaluated in next development cycle due to time constraints.

#9 @Denis-de-Bernardy
11 years ago

  • Milestone changed from Future Release to 2.8.1
  • Owner changed from JeremyVisser to Denis-de-Bernardy
  • Status changed from new to accepted

#10 @dd32
11 years ago

  • Milestone changed from 2.8.1 to 2.9

Enhancements, no matter how seemingly trivial, should not be in a point release

#11 @Denis-de-Bernardy
11 years ago

  • Owner Denis-de-Bernardy deleted
  • Status changed from accepted to assigned

#12 @westi
11 years ago

  • Milestone changed from 2.9 to Future Release

Moving to Future Release until we have a patch for this.

#13 @thee17
7 years ago

There is a WordPress plugin that installs a TinyMCE plugin for this:
http://wordpress.org/plugins/tinymce-code-element/

#14 @ocean90
7 years ago

  • Milestone changed from Future Release to 3.9

azaozz, is there something in TinyMCE 4.0?

This ticket was mentioned in IRC in #wordpress-dev by cs_shadow. View the logs.


7 years ago

This ticket was mentioned in IRC in #wordpress-dev by cs_shadow. View the logs.


7 years ago

This ticket was mentioned in IRC in #wordpress-dev by rclations. View the logs.


7 years ago

#18 @saas
7 years ago

I reviewed this ticket and was surprised to see its there so long :(, anyway, I also reviewed above mentioned plugin http://wordpress.org/plugins/tinymce-code-element/

installed it and used it, it works fine (so far), did a peak on plugin code and found that its small amount of code, so if it can be made to work with external code, then I think it will be tad bit easier to be coded as core plugin part.

Why not involve the plugin coder to send you a pull request with working code to be able to merge in core.?

This ticket was mentioned in IRC in #wordpress-dev by DH-Shredder. View the logs.


7 years ago

#20 @ocean90
7 years ago

  • Milestone changed from 3.9 to Future Release

I thought this would be easier...

No patch, punting.

#21 @azaozz
7 years ago

In [27545]:

TinyMCE: add internal command and shortcut (Alt+Shift+X) for toggling <code>. Define a button that can be added to any toolbar as wp_code.

#22 @azaozz
7 years ago

Turns out there is a nice way in TinyMCE 4.0 to toggle a <code> tag around a selection. If the caret is in the middle of a word, the tag is added around the word. Can also add a "Code" button, perhaps on the bottom row.

#23 @iseulde
7 years ago

Awesome! :) A button in the bottom bar would be nice (though this is probably not useful for the average writer).

#24 @azaozz
7 years ago

Yeah, that's why I didn't add it above. It is really really easy to add from a plugin, just add wp_code with either mce_buttons or mce_buttons_2 filter.

#25 @azaozz
7 years ago

This can also be improved: can insert both <pre><code> at the same time. Or perhaps can have another TinyMCE command and shortcut for that.

A bit of a downside is that if the user selects multiple paragraphs, all will be converted to <pre><code>...</code></pre>. Of course that can be undone or toggled back easily.

#26 follow-up: @johnbillion
7 years ago

See: [27545]

Also, should we add the wp_code button into the kitchen sink view?

#27 @SergeyBiryukov
7 years ago

  • Milestone changed from Future Release to 3.9

Moving back to 3.9, as a commit was made here.

@miyauchi
7 years ago

#28 @miyauchi
7 years ago

  • Keywords has-patch added; needs-patch removed

I created a patch.

Text is selected in the editor:
Insert <code>selected text</code>

Text is not selected:
Popup window open and insert <pre>text in the popup</pre>

@miyauchi
7 years ago

change plugin name and some fix

@miyauchi
7 years ago

delete duplicated lines ...

@miyauchi
7 years ago

#29 follow-up: @miyauchi
7 years ago

Add function re-edit source codes and undo.

#30 in reply to: ↑ 29 ; follow-up: @azaozz
7 years ago

Replying to miyauchi:

6331.4.diff would make a nice WordPress plugin (that adds the TinyMCE plugin) but not sure we want to have another modal just to enter code in the default TinyMCE configuration.

Also it looks like you've been looking at some old/outdated TinyMCE code as editor.onNodeChange.add() is the 3.x way to add event handlers. In TinyMCE 4.0 that has changed to editor.on( 'NodeChange', function( event ) { ....

@miyauchi
7 years ago

fix tinymce old api.

#31 in reply to: ↑ 30 @miyauchi
7 years ago

Replying to azaozz:

6331.4.diff would make a nice WordPress plugin (that adds the TinyMCE plugin) but not sure we want to have another modal just to enter code in the default TinyMCE configuration.

I want to support <code /> and <pre /> in one button.

This button inserts the <code /> when text is selected.
And when no text is selected, open modal window and inserts <pre />.

Of course user can remove <code />, and modify the text in <pre />.

Do you think about?

Also it looks like you've been looking at some old/outdated TinyMCE code as editor.onNodeChange.add() is the 3.x way to add event handlers. In TinyMCE 4.0 that has changed to editor.on( 'NodeChange', function( event ) { ....

fixed.

Thanks!

#32 in reply to: ↑ 26 ; follow-up: @nacin
7 years ago

Replying to johnbillion:

Also, should we add the wp_code button into the kitchen sink view?

The only reason why I'd want a code button for the visual editor is inline code references (like a function name or something). Part of the problem with adding a button is block-level handling. If you can select a block of text and click the code button, it can't just wrap <code> as that's invalid. So you'd need to wrap it in a pre. But you'd probably only want that if what's inside the selection is pure unadulterated plain text. Otherwise the pre could do some formatting damage.

If you mean to select just inline text but end up selecting the entire line (and thus the block), you might end up with a pre accidentally. I have quirky problems like this all the time when trying to manipulate list items in the visual editor.

I don't think we need another dialog or anything like that. But we do need some simple behavior that follows the principle of least astonishment. I'd be OK with just doing <code> and ignoring <pre> but that might not be what everyone would expect. I mean, would they see a code button and expect we support source code? Probably. Maybe we hold off on anything else for 3.9. At least there is now a hidden keyboard shortcut.

#33 in reply to: ↑ 32 @Denis-de-Bernardy
7 years ago

Replying to nacin:

Replying to johnbillion:

Also, should we add the wp_code button into the kitchen sink view?

The only reason why I'd want a code button for the visual editor is inline code references (like a function name or something). Part of the problem with adding a button is block-level handling. If you can select a block of text and click the code button, it can't just wrap <code> as that's invalid. So you'd need to wrap it in a pre. But you'd probably only want that if what's inside the selection is pure unadulterated plain text. Otherwise the pre could do some formatting damage.

If a patch that handles both cases creep in, would you be open to have it make it into 3.9?

As in, when a block is selected, and/remove pre/code, else add/remove code.

D

#34 follow-up: @nacin
7 years ago

  • Milestone changed from 3.9 to Future Release

If a patch handles this elegantly, I'm happy to add it. But I did have one other concern: that adding a code button in the visual editor would imply that we support source code. As in syntax highlighting. I would be curious to know how other systems deal with this.

#35 in reply to: ↑ 34 @JeremyVisser
7 years ago

Replying to nacin:

adding a code button in the visual editor would imply that we support source code

How is that any different to the already existing code button in the text editor?

Non-issue in my opinion.

@Denis-de-Bernardy
6 years ago

precode plugin

#36 @Denis-de-Bernardy
6 years ago

In case someone wants to pick it up from where I left it (which is good enough for my own use), I've attached a TinyMCE4 plugin that toggles pre or code depending on the context.

#37 @Denis-de-Bernardy
6 years ago

Looks like I forgot to delete the two unneeded settings-related lines at the very top of the plugin. For information the only issue I ran into was when you:

  1. Hit the pre/code button
  2. Type code to your heart's content
  3. Press enter when your done as if to start a new paragraph
  4. Hit the pre/code button to disable the pre area

Further trial and error revealed that step 3 in the above actually needs Shift + Enter to break out of the PRE -- in which case step 4 is unneeded and the issue goes away by itself. It's not super intuitive to discover though.

#38 follow-up: @iseulde
6 years ago

  • Focuses javascript added
  • Keywords needs-patch added; has-patch removed

If we want syntax highlighting, then I think this is plugin territory. If not, and just make sure code and pre work correctly, then I think this is doable for core. A plugin that does just that could also be a a good plugin to add to TinyMCE itself.

#39 in reply to: ↑ 38 @ericlewis
5 years ago

Replying to iseulde:

just make sure code and pre work correctly, then I think this is doable for core. A plugin that does just that could also be a a good plugin to add to TinyMCE itself.

Yes, I think this is the path forward.

@ericlewis
5 years ago

#40 @ericlewis
5 years ago

@iseulde and I worked together on attachment:6331.6.diff, a work-in-progress. Feedback welcome :)

A first step here is to add functionality to the existing WP_Code TinyMCE command. This command wraps the current selection with a <code> element.

In attachment:6331.6.diff, we add logic to detect whether a single full paragraph block is selected, or if the selection spans multiple block elements. If so, we wrap it in a <pre> tag.

#41 @azaozz
16 months ago

  • Keywords needs-patch removed
  • Resolution set to fixed
  • Status changed from assigned to closed

There is a Code button in the RichText toolbar in the block editor. Considering this ticket "fixed" :)

#42 @pento
16 months ago

  • Milestone Future Release deleted
Note: See TracTickets for help on using tickets.