Updated website text editor

I have just updated the CKeditor test editor that we use on openenergymonitor.org. The motivation for this was the desire to write responses to forum posts and website content in markdown. 

However, the new editor can be used to edit and write posts in the normal way. It seems to work well. I particularly like the full screen view (try hitting the top LH button). I tried to streamline the interface getting rid of buttons we don't really need and to make the whole thing fit on one line. 

The markdown editing seems to work OK but not quite as well as I hoped. The whole post / page needs to have been written in markdown for it to work well. I think it works best pasting in pre written markdown from github or an external md editor. This seems to work well. Switching between normal editing and markdown editing does not seem to work too well.  

I welcome any feedback on the changes. 

Robert Wall's picture

Re: Updated website text editor

Ω,  μ,  °,  ± would be useful. The old editor used Ω on the button to access the symbols, but which symbol wasn't available? Ω of course!  I know the HTML entities, so it's not hard to hit "Source", type 'Ω' and hit "Source" again, but it's a bit of a faff, and a lot of people won't know them.

glyn.hudson's picture

Re: Updated website text editor

Agree, the symbol button had its uses although I never used it myself. The question is, is it worth another row of buttons?! There isn't room to squeeze another button in. I think it's just as easy to open new take and fire up html character reference and then either copy and paste or edit source

 https://dev.w3.org/html5/html-author/charref 

New editor also works much better on mobile. I'm writing this on my android tablet 

 

Bill Thomson's picture

Re: Updated website text editor

Full screen is a nice addition, but as RW said, the Ω,  μ,  °,  and ± symbols would be useful. I've used Omega a few times, (only after finding out about Ω from Robert) and would've used the others had they been available.

I think it's just as easy to open new take and fire up html character reference and then either copy and paste or edit source

Doing that reminds me of something my brother used to say. "Make the machine work for you, not the other way around."

glyn.hudson's picture

Re: Updated website text editor

How about I replace the 'horizontal line' button with the insert symbol button? Would this be more useful? 

Robert Wall's picture

Re: Updated website text editor

I've never used <hr> here (I do sometimes in 'ordinary' emails) so, yes it would - to me.

Bill Thomson's picture

Re: Updated website text editor

seconded

Jon's picture

Re: Updated website text editor

I like the new editor!  Much cleaner design!  +1 for symbols.

Just curious if recent changes will update email notifications?  I see items that I think are related to HTML formating but show up as plain text like "<p>&nbsp;</p>"

<p>Hello Jon, glyn.hudson has commented on:  (ALPHA): LATEST emonSD12Feb16 -
emonPi / emonBase (Raspberry Pi + RFM69Pi) Emoncms v9 pre-built SD card
image.</p>


glyn.hudson's picture

Re: Updated website text editor

Ok sure, I'll restore symbol button today. Just had a go at improving email notifications. They shouldn't contain html characters anymore 

glyn.hudson's picture

Re: Updated website text editor

Special character has been restored :-) 

Robert Wall's picture

Re: Updated website text editor

And as I expected, the Ω is on the button, not in the list!

pb66's picture

Re: Updated website text editor

Is it because the omega symbol is on the button that it's missing from the table? if there a choice of button symbol could we use an easily accessible from the keyboard symbol like the "@", or "?" that wouldn't be missed from the table (since it's on the keyboard).

Are you using html or markdown to get the smileys up?

Paul

glyn.hudson's picture

Re: Updated website text editor

Yeah seems strange there is no omaga. Sorry, don't think there is a way to easily change or add characters. Drupal is great most of the time but frustrating sometimes. 

pb66's picture

Re: Updated website text editor

 have just had some trouble trying to show code blocks, in markdown (on github etc) triple back ticks will do the job, but not here it seems eg

```

Some code goes here to be shown in a shaded box without showing the backticks

```

So can you confirm which markdown flavour you are using? 

I then tried using a different format from the dropdown box and when I clicked the `normal` button it wouldn't drop down until I went full screen at which point I could drop it down and select a different format, but it seems the new format is applied to the whole comment not just selected text, and when exiting fullscreen it fails to drop down again

Am I doing something wrong ??

Paul

PS - the " `normal` " is within back ticks too so that should be an inline code block.

pb66's picture

Re: Updated website text editor

have just had some trouble trying to show code blocks, in markdown (on github etc) triple back ticks will do the job, but not here it seems eg


Some code goes here to be shown in a shaded box without showing the backticks

So can you confirm which markdown flavour you are using?

I then tried using a different format from the dropdown box and when I clicked the normal button it wouldn't drop down until I went full screen at which point I could drop it down and select a different format, but it seems the new format is applied to the whole comment not just selected text, and when exiting fullscreen it fails to drop down again

Am I doing something wrong ??

Paul

PS - the " normal " is within back ticks too so that should be an inline code block.

italic

bold

Bold and italic

Robert Wall's picture

Re: Updated website text editor

That smiley was a GIF image from an external site. The  Ω  doesn't happen when you hit the button, that opens a drop-down table, and  Ω  isn't in it! And I don't have it on the keyboard. For the symbols, I just hit [Source], type the HTML and (quite often) carry on typing HTML, because the editor (possibly Opera browser) insists on enlarging the line spacing for some reason that I've yet to figure out.

pb66's picture

Re: Updated website text editor

No the line spacing error isn't only opera, it does it in chrome too, it has been doing that for quite a while, it would previously also add some code, only seen in the source window that would attach the current line to the last word of the previous line, having the effect of a premature fixed line break. The increased line space doesn't withstand a cut and paste, til now I have just corrected any line break increases buy selecting the whole line and using CTRL-X CTRL-V would fix it but on long posts it was annoying.

My comments were not suggesting the button should give a omega, but asked if the button being an omega made omega unavailable in the table (or is that just a coincidence??) if so use something else on the button. My keyboard doesn't have the omega either.

I cannot for the life of me get the source and the markdown buttons to work in any way that makes sense, my previous repeated post is markdown the second time but I cannot seem to get to grips with why or how that worked. I don't know html well enough to use it by default and really welcomed the markdown as the standard editor was proving difficult to use.

Paul

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.