U4-2604 - [Feature Request], 6.1.4, Use Code Mirror for editing TinyMCE source code view

Created by Jeremy Pyne 07 Aug 2013, 19:26:58 Updated by Jeremy Pyne 20 Nov 2015, 23:47:04

Relates to: U4-5740

Relates to: U4-5741

Subtask of: U4-5832

https://github.com/umbraco/Umbraco-CMS/pull/30

2 Attachments

Comments

Jeremy Pyne 05 Sep 2013, 16:12:03

Recreated as pull https://github.com/umbraco/Umbraco-CMS/pull/107

This would be a nice fix to ge into the core as it's adding very little code/complexity but really cleanus up the editing process.


Jeremy Pyne 04 Sep 2014, 16:58:48

I will note that this approve no longer works in v7. I was looking but I can't figure out where the source code dialog is generated now. The code should still work if added to the proper place but it doesn't look to call source_editor.htm anymore.


Asbjørn Riis-Knudsen 04 Sep 2014, 20:16:50

Or at the very least make the source code window use a monospace font. But yes, CodeMirror would be much nicer :)

Btw., I think the source code window is now generated from a plugin in TinyMCE 4 (Umbraco 7): Umbraco.Web.UI.Client\lib\tinymce\plugins\code


Jeremy Pyne 04 Sep 2014, 20:54:46

Ah, i'll look into that and see if i can make a pull to enable it there. Unfortinatly my pull for v6 has been sitting out there for a year now.


Jeremy Pyne 04 Sep 2014, 20:56:36

Heres a ss from our production site using the patch.


Jeremy Pyne 05 Sep 2014, 14:51:29

Ah, I see it. I found a tinymce4-codemirror plugin that I'm going to test.


Jeremy Pyne 05 Sep 2014, 19:40:05

I created a different patch for v7. This one is a lot cleaner and uses a plugin to do the work. It also now suppress macro previews so you don't end up with editors changing macro contents only to have their work ignored.

https://github.com/umbraco/Umbraco-CMS/pull/474


Asbjørn Riis-Knudsen 05 Sep 2014, 19:54:26

Thanks for working on this :) I was going to make a pull request for using a monospace font, but your solution is much, much better. I hope it makes 7.2.


Jeremy Pyne 05 Sep 2014, 22:46:54

Yah, we use it All the time, i always forget it not a default feature. A most have so up vote :p


Shannon Deminick 16 Oct 2014, 06:40:05

I updated a few things in rev: 26059ebad0e56d43390a31894ab84132053e0bed, it all works great!


Shannon Deminick 16 Oct 2014, 06:40:40

Of course if people are upgrading they will need to upgrade their config's manually if they want codemirror support, otherwise it will just use the default editor. All new installs will use codemirror.


PC-PDX . 22 Nov 2014, 04:07:21

I like the direction on this - it feels and looks so much cleaner and the dialog specific search+/replace are awesome.
That being said - i'm running into issue editing source in

  • Chrome(version 39.0.2171.65 m) (win8.1 x64)
  • Umbraco version 7.2.0-beta2 assembly: 1.0.5427.24655

My kid mashed the keyboard and thus ruined my opening figcaption tag. In trying to fix it - it feels like there is something fighting me. I'm unable to position the cursor, by either keyboard or mouse, inside any of the "</fi" chars right after the self closing img tag. I'm not able to delete or otherwise edit out these specific four chars and as result, the whole block is a jumble and non-editable.

We are all one family
{code}

I eventually just cut the whole chunk out and edited it in Sublime (text editor) and pasted it back in. It resolved my problem , but it totally kills the whole concept of the edit source functionality. There seems to be some sort of as-you-go validation happening as some of the tags were red during the process. Once i edited in Sublime and pasted in - all my tags are green. This suggests some (airquote emphasis) "validation functionality" from codemirror is the cause instead of an implementation bug on the umbraco side (?) - but i'm not sure and wanted to raise the flag. I'd honestly prefer to have an editor that doesn't fight my editing. It's rare occasion that i need to use it so perhaps this is a one off fluke.


PC-PDX . 24 Nov 2014, 18:24:50

What's the preference here - QA +/-comments on original ticket (as follows) + change state from 'fixed' - or another, separate ticket linked to this one? [edited] found dupe -> U4-5740


Jeremy Pyne 24 Nov 2014, 18:37:38

PC-PDX I know there are some glitches with TinyMCE when recalling with very long lines. You can insert carriage returns as they won't affect the actual html layout generated and that will resolve those issues. This is a TinyMCE issue tough and not related to this implemntation. I'v seen it happen on other systems too when you insert long lines of nested html tags. I'v guessing from what you describe that thats whats happening.


Shannon Deminick 24 Nov 2014, 22:17:58

I've re-opened this issue and assigned to 7.3. There are a couple issues with the current implementation now (i.e. doesn't work nicely with IE, and the issues you've mentioned). By default in 7.2, this feature will be available but not enabled by default. We'll try to get it working 100% for 7.3 which might mean upgrading the tinymce, codemirror libs.


Jim Gettrup 01 Dec 2014, 15:05:58

I was loving CodeMirror in 7.2 beta, and I'm sorry to see it missing from RC. Please bring it back as soon as possible. Could you post some instructions on how to enable it in 7.2 RC? Thanks.


Asbjørn Riis-Knudsen 01 Dec 2014, 15:51:45

To enable it, simply change "code" to "codemirror" in this line in tinyMce.config:

code

Please note, however, that it is not usable in all browsers, hence it being disabled for 7.2.


Shannon Deminick 02 Dec 2014, 05:11:02

You'll need to tweak a couple settings actually because i made the plugin called codemirror instead of code so you can actually use both if you want to. To add the codemirror editor, in tinymce.config put this:

 <command>
  <umbracoAlias>codemirror</umbracoAlias>
  <icon>images/editor/code.gif</icon>
  <tinyMceCommand value="" userInterface="false" frontendCommand="codemirror">codemirror</tinyMceCommand>
  <priority>1</priority>
</command>

underneath the normal 'code' one, then make sure you have this:

<plugin loadOnFrontend="true">codemirror</plugin>

underneath the normal 'code' one, then make sure you have this inside of the customConfig node at the bottom:

 <config key="codemirror">
  {
  "indentOnInit": false,
  "path": "../../../../../umbraco_client/CodeMirror/Js",
  "config": {
  },
  "jsFiles": [
  ],
  "cssFiles": [
  ]
  }
</config>


Shannon Deminick 02 Dec 2014, 05:11:31

Then you'll need to enable codemirror button the rte data type pre-values


Jeremy Pyne 02 Dec 2014, 14:32:40

Hrm, another option might just be to use the codemirror and leave it enabled on all but inside the plugin itself have it toggle off and use the simple textbox if a incompatible browser is detected. Is this just an IE8/9 issue, or does it have problems in current IE's as well?


Brad Wickett 20 Nov 2015, 19:17:48

@Jeremy.Pyne how did you get the tinyMCE editor to show the button to toggle a full screen view in Umbraco? I have the editor working, but I'm not sure how to get a full screen toggle working.

Thanks,

Brad


Jeremy Pyne 20 Nov 2015, 23:47:04

I don't recall having to do anything special. I honestly never use the button, though manual resizing works from what I recall. Just looking at our code it seams to sort of work on v6, and on v7 we don't even have the maximize button there anymore.


Priority: Normal

Type: Feature (request)

State: Open

Assignee: Shannon Deminick

Difficulty: Very Easy

Category: Editor

Backwards Compatible: True

Fix Submitted: Pull request

Affected versions: 7.0.0, 7.1.0, 6.2.0, 6.1.4, 7.0.1, 7.0.2, 7.0.3, 7.0.4, 7.1.1, 7.2.0, 7.1.2, 7.1.3, 7.1.4, 7.1.5, 7.1.6

Due in version:

Sprint:

Story Points:

Cycle: