TinyMCE should have a code button

[westi]

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.

[fool4christ]

+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.

[JeremyVisser]

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

[JeremyVisser]

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?

[JeremyVisser]

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.

[DD32]

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

[ad7863]

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

[janeforshort]

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

[dd32]

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

[westi]

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

[thee17]

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

[ocean90]

azaozz, is there something in TinyMCE 4.0?

[saas]

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.?

[ocean90]

I thought this would be easier...

No patch, punting.

[azaozz]

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.

[azaozz]

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.

[iseulde]

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

[azaozz]

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.

[azaozz]

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.

[johnbillion]

See: [27545]

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

[SergeyBiryukov]

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

[miyauchi]

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]

change plugin name and some fix

[miyauchi]

delete duplicated lines ...

[miyauchi]

Add function re-edit source codes and undo.

[azaozz]

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]

fix tinymce old api.

[miyauchi]

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!

[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 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.

[Denis-de-Bernardy]

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

[nacin]

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.

[JeremyVisser]

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]

precode plugin

[Denis-de-Bernardy]

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.

[Denis-de-Bernardy]

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.

[iseulde]

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.

[ericlewis]

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]

@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.

[azaozz]

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