Topic: New text editor for person records

Hello,
     We've just switched to using the Redactor editor for editing the main text in person records. It has not yet been turned on for adding new person records, or for other record types, because we want to test it out for a while.

This editor should work across most modern browsers, and offers a simple way to style text with things like bold, italics, headers, links, and so on. The web page fr the component is here: http://imperavi.com/redactor

Some notes:
1. I have not done the work to make Redactor use the exact same style sheets as the rest of the site, so the styling of individual elements in the editing window may differ from the "finished product". This means that font size, the look of links, etc may be a bit different. But the "structural elements" (paragraphs, link breaks, working links, bullet points) should be intact.

2. I tested editing on a couple person records with significant existing text and it was fine. But when you first try it, you should KEEP A COPY of the text just in case something goes wrong.

3. I haven't tested the "insert a table" button, but that should be rarely used anyway.

4. I removed the button to insert images, because I want to control how we link to images on other web sites, and keep it to a minimum. One day I will work on some custom buttons to include images already in The Athenaeum, but we should generally not "hot link" to other sites' images.

Please try out editing on a few people, and let me know if you encounter any problems. Once we feel confident that it's working well, I'll incorporate it across other pages on the site.

Thanks,
Chris

Re: New text editor for person records

Hello Chris,

I tested it and it works very well. Thanks a lot. I hope you will set it for art movement descriptions.

Re: New text editor for person records

It is impossible to do a copy-paste action with redactor. You need to switch back to html to do so.

Re: New text editor for person records

Hello Josselin,
    I think I found the problem. Redactor uses another library of functions called jQuery, and it seems to require a newer version of jQuery than we are using. When you paste, it tries to run a piece of code that's not in our older version, so the paste fails.

We use jQuery in a LOT of places around the site, so let me see if there are any issues to be aware of with the new version before I replace it. But I expect updating it will fix the issue.

Re: New text editor for person records

Ok, I updated the code and it looks like copy/paste works, even keeping links and formatting.

Updating the underlying jQuery may cause some issues. I tested a number of things and already had to fix a couple of small issues. Keep any eye out for any "weird" behavior, especially with parts of pages that are "interactive" - panels opening and closing, tabs, parts of the page that load dynamically. I'll fix issues if we find any more.

- Chris

6 (edited by Josselin 2014-02-10 19:37:52)

Re: New text editor for person records

Hello Chris,
I tried and it works, thanks.
I am writing the description for Rococo (http://www.the-athenaeum.org/mvmt/detail.php?id=12) and I have a suggestion. The text considerably lengthens the page since the 'people' tab is displayed below. So I think you should put the tabs on the top of the page and reorganized them by putting these ones: description, people, art, museums. The 'dates' descriptions should be deleted and moved to the main descriptive text.
I'm not sure of which tab should be displayed on the movements page, either the description, or people, or maybe the first paragraph of the description with the list of artists below.

Moreover, the text would be stronger with images inserted from the Athenaeum and the text fitting around. I already used Wordpress and I know they have a feature to do this action; I don't know if their code is on open-source, but maybe you could do like them.

Josselin

Re: New text editor for person records

Hello Josselin,
     Now we are getting into the more challenging bit - how to make it easy to "style" large amounts of text so that users have freedom, but the end result is consistent and pleasing to the eye. Text editors are famous developer "traps" - at first it seems simple, because it's only text, right? But making a good text editor/design tool is a massive amount of work. Wordpress for example has had many developers working on only that one thing for many years.

Here are my current thoughts:
1. In the near term, I can help with the "very long page" problem by creating a way to automatically show only a portion of the text, with a button to "show all". That was maybe the first two or three paragraphs would be shown by default, but the reader could expand to see the whole article.
2. I could do the same with the list of artists (which is unsually long for Rococo).
3. I'd like to create some different header styles, which will allow you to create sections with headings in longer articles.

4. At some point (I doubt I will get to this for a while), I want to make some custom buttons in Redactor. One of them would allow inserting an image so that it is displayed in a consistent way (certain standard sizes, a couple of choices about putting the image left, right, or center, a standardised caption, etc). Other buttons would allow easier linking to other content on The Athenaeum.

So for now, I can do a couple of small things to help shorten how the page is displayed, and to visually break up the articles wiht headers. But sophisticated text editor/design functions could easily eat up most or all of my development time, so those will probably wait.

PS: I know you were saying that there might be parts of Wordpress (or other open source projects) I can "copy". I'll look into it, but don't be too hopeful - those projects are usually so complex that it's very hard to pull out a piece and re-use it. They may also have intellectual property restrictions we want to avoid, even if they are open source.

8 (edited by Josselin 2014-02-11 11:53:21)

Re: New text editor for person records

Hello Chris,
I have finished to write the description for Rococo, may you - or another native English member - check the text? I usually ask to Graham, but he's away for a couple of weeks.
I wrote the text as a guide to help going through all the names mentioned, and I therefore put as many names as I could. I also wonder if you can find catchy titles, since I've never been very gifted for this.
http://www.the-athenaeum.org/mvmt/detail.php?id=12

I will write Neoclassicism next.

Josselin.

Re: New text editor for person records

Hello Josselin,
     Sorry I hadn't checked Rococo yet. I just looked at it, and I think it's good! As you and others add these kind of articles, our usefulness will start to expand beyond the online catalogue raisonnee. You know I plan to eventually add some tools to make linking and inserting pictures easy, but I think it's great as-is.

Thanks!

Re: New text editor for person records

Chris,
Did you change the code for using images with redactor? I cannot change their dimension anymore.

Re: New text editor for person records

Josselin wrote:

Chris,
Did you change the code for using images with redactor? I cannot change their dimension anymore.

Ok I get it. Now we need to click on the image to change the dimension of the thumbnail when it is inserted in a text.

Re: New text editor for person records

chris_mccormick wrote:

Ok, I updated the code and it looks like copy/paste works, even keeping links and formatting.

Updating the underlying jQuery may cause some issues. I tested a number of things and already had to fix a couple of small issues. Keep any eye out for any "weird" behavior, especially with parts of pages that are "interactive" - panels opening and closing, tabs, parts of the page that load dynamically. I'll fix issues if we find any more.

- Chris

The copy-paste action works, but line breaks are added before and after the pasted text. It would be more useful to have the same copy-paste as Word.

Re: New text editor for person records

chris_mccormick wrote:

4. I removed the button to insert images, because I want to control how we link to images on other web sites, and keep it to a minimum. One day I will work on some custom buttons to include images already in The Athenaeum, but we should generally not "hot link" to other sites' images.

Chris,

Can you add this button? It makes it difficult for me to insert images in movement description. I have only added images already on the website. Example here: http://www.the-athenaeum.org/mvmt/detail.php?id=9

Thanks.