Bug 11584

Summary: Add wysiwyg editor to system preferences dealing with HTML
Product: Koha Reporter: David Cook <dcook>
Component: TemplatesAssignee: David Cook <dcook>
Status: CLOSED FIXED QA Contact: Testopia <testopia>
Severity: enhancement    
Priority: P5 - low CC: indradg, jonathan.druart, nick, tomascohen, xarragon
Version: Main   
Hardware: All   
OS: All   
See Also: http://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=14389
http://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=12806
Change sponsored?: --- Patch complexity: Small patch
Documentation contact: Documentation submission:
Text to go in the release notes:
Version(s) released in:
Attachments: Bug 11584 - Add wysiwyg editor to system preferences dealing with HTML
[SIGNED OFF] Bug 11584 - Add wysiwyg editor to system preferences dealing with HTML
Bug 11584 - Add wysiwyg editor to system preferences dealing with HTML
Bug 11584 - Add wysiwyg editor to system preferences dealing with HTML
Bug 11584 - Add wysiwyg editor to system preferences dealing with HTML (add licence)
Bug 11584 - Add wysiwyg editor to system preferences dealing with HTML (add system preference)
Bug 11584 - Add wysiwyg editor to system preferences dealing with HTML
Bug 11584 - Add wysiwyg editor to system preferences dealing with HTML (add licence)
Patch to work with newly added dropdown
Bug 11584 - Add wysiwyg editor to system preferences dealing with HTML (add licence)
Bug 11584 - Add wysiwyg editor to system preferences dealing with HTML (add licence)
Bug 11584 - Add wysiwyg editor to system preferences dealing with HTML
Bug 11584 - Add wysiwyg editor to system preferences dealing with HTML (add system preference)
Bug 11584 - Add wysiwyg editor to system preferences dealing with HTML
Bug 11584 - Add wysiwyg editor to system preferences dealing with HTML (add licence)
Bug 11584 - Add wysiwyg editor to system preferences dealing with HTML (add system preference)
Bug 11584: Syspref WYSIWYG, dropdown added
Bug 11584: (QA followup) add missing newline at end of YAML file

Description David Cook 2014-01-20 01:19:23 UTC
Currently, library staff have to hand-code system preferences that include HTML in them (e.g. OpacNAV, OpacHeader, etc.).

This enhancement will add a wysiwyg editor for system preferences that are marked as "Htmlarea". Built-in system preferences (like those mentioned above) will need to have their .pref files changed (and I suppose the database even though the Type recorded there doesn't appear to be used by Koha itself). While a new type of "Htmlarea" will be available for Local System Preferences.

People using Koha as a CMS (http://wiki.koha-community.org/wiki/Koha_as_a_CMS) might find this useful.

Or anyone that has added local system preferences for injecting HTML into their templates.
Comment 1 David Cook 2015-06-23 07:44:46 UTC
This bug doesn't depend on 14389 per se... rather pushing 14389 will cause this bug to need an update most likely to change a manual event trigger from "change()" to "keyup()" or the like.
Comment 2 David Cook 2015-06-23 07:58:03 UTC Comment hidden (obsolete)
Comment 3 Nick Clemens 2015-06-26 19:44:57 UTC Comment hidden (obsolete)
Comment 4 Nick Clemens 2015-06-26 19:46:22 UTC
The one minor thing I noted was that using the WYSIWYG Save button (diskette icon) the full page reloads as opposed to the nice message and quick save with the Koha button.

Excellent feature!
Comment 5 David Cook 2015-06-29 01:55:44 UTC
(In reply to Nick Clemens from comment #4)
> The one minor thing I noted was that using the WYSIWYG Save button (diskette
> icon) the full page reloads as opposed to the nice message and quick save
> with the Koha button.
> 
> Excellent feature!

Hmm, that's a good point. I wonder if I could intercept the WYSIWYG's save command and use Koha's save instead... I might take a look at that if I find some time!
Comment 6 Jonathan Druart 2015-07-09 13:33:44 UTC
Hi David,

Could you please add tinyMCE to the about page?

Idea: why don't you add a pref to enable/disable the wysiwyg editor to all textarea pref?

Please rebase, there is a conflict:
CONFLICT (content): Merge conflict in koha-tmpl/intranet-tmpl/prog/en/modules/admin/systempreferences.tt
Comment 7 David Cook 2015-07-13 00:54:32 UTC
(In reply to Jonathan Druart from comment #6)
> Hi David,
> 
> Could you please add tinyMCE to the about page?
> 

Do you mean add it to the Licences section?

> Idea: why don't you add a pref to enable/disable the wysiwyg editor to all
> textarea pref?
> 

I don't think the WYSIWYG would be appropriate or functional for a lot of textarea prefs (e.g. MARCAuthorityControlField008, UNIMARCAuthorityField100, ISBD, SpineLabelFormat, OPACUserCSS, opacuserjs, etc.). 

But I like the idea of using a system preference to disable/enable the WYSIWYG... I could add that as a second patch to this bug...

> Please rebase, there is a conflict:
> CONFLICT (content): Merge conflict in
> koha-tmpl/intranet-tmpl/prog/en/modules/admin/systempreferences.tt

Sure thing :)
Comment 8 David Cook 2015-07-13 07:03:14 UTC Comment hidden (obsolete)
Comment 9 David Cook 2015-07-13 07:05:45 UTC
(In reply to Jonathan Druart from comment #6)
> Could you please add tinyMCE to the about page?
> 
> Idea: why don't you add a pref to enable/disable the wysiwyg editor to all
> textarea pref?
>

I'll look at doing this tomorrow, as I'm done for the day now.
Comment 10 David Cook 2015-07-14 07:02:42 UTC
I'm working on changing the system preferences and wrapping the WYSIWYG editor with a a system preference...

I don't think WYSIWYG editors necessarily make sense everywhere you can use HTML though. If the HTML is going into a <div>, then it's probably OK. However, if the HTML is a fragment going into an element like a <ul>, we should be careful.

For instance, the HTML from "IntranetNav" should probably just be a <li> element, which TinyMCE can't do... as it'll "fix it" by wrapping it in a <ul>... even if you edit it by hand using the HTML button. 

By contrast, you can put pretty much anything in "IntranetmainUserblock" and it'll be all right.

--

Yes: 
IntranetmainUserblock
SelfCheckHelpMessage
NoLoginInstructions
opaccredits
opacheader
OpacMainUserBlock
OPACMySummaryHTML
OpacNav
OpacNavBottom
OpacNavRight
OPACNoResultsFound
OPACResultsSidebar
PatronSelfRegistrationAdditionalInstructions



No:
IntranetNav (HTML needs to be <li> elements)
OpacCustomSearch (would require hand-coding of the form and input elements...)
OPACSearchForTitleIn (HTML needs to be <li> elements)
Comment 11 David Cook 2015-07-14 07:16:40 UTC Comment hidden (obsolete)
Comment 12 David Cook 2015-07-14 07:16:47 UTC Comment hidden (obsolete)
Comment 13 David Cook 2015-07-14 07:16:53 UTC Comment hidden (obsolete)
Comment 14 Martin Persson 2015-08-16 22:10:13 UTC Comment hidden (obsolete)
Comment 15 Martin Persson 2015-08-16 22:26:12 UTC Comment hidden (obsolete)
Comment 16 Martin Persson 2015-08-16 22:32:53 UTC Comment hidden (obsolete)
Comment 17 Martin Persson 2015-08-16 22:34:52 UTC Comment hidden (obsolete)
Comment 18 Martin Persson 2015-08-16 22:37:27 UTC Comment hidden (obsolete)
Comment 19 Martin Persson 2015-08-16 22:38:29 UTC Comment hidden (obsolete)
Comment 20 Martin Persson 2015-08-16 22:40:30 UTC Comment hidden (obsolete)
Comment 21 Martin Persson 2015-08-16 22:44:44 UTC
Okay I tried to clear this up.. But the order of the patches are different now. They do however seem to apply and work when I test them.

Sorry for the mess, I was trying to use relative names instead of sha1:s and it did not work out well since I didn't pay enough attention to the manual.
Comment 22 Jonathan Druart 2015-08-19 14:15:05 UTC
Created attachment 41671 [details] [review]
Bug 11584 - Add wysiwyg editor to system preferences dealing with HTML

This patch adds the ability to use a WYSIWYG editor for system preferences.

The key files that I touch are:

1) admin/systempreferences.pl
2) koha-tmpl/intranet-tmpl/prog/en/modules/admin/preferences.tt
3) koha-tmpl/intranet-tmpl/prog/en/modules/admin/systempreferences.tt

I also add:

4) koha-tmpl/intranet-tmpl/prog/en/includes/wysiwyg-systempreferences.inc

and

5) koha-tmpl/intranet-tmpl/lib/tiny_mce/plugins/advimage

This plugin is part of the TinyMCE distribution. It used to be in Koha, but
then someone removed it. It's useful for preferences like "opacheader" though.

*If you're using anything except IE, this should work super well. If
you're using IE, it'll probably only work for keyboard input and dragging
text within the editor box but not from outside of it. IE has worse
security, so you can probably paste using the context menu paste.

*While I think a WYSIWYG editor can be useful, there might be times
where the content is displayed differently than it is in the editor
because of higher level CSS and Javascript.

Signed-off-by: Martin Persson <xarragon@gmail.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 23 Jonathan Druart 2015-08-19 14:15:11 UTC
Created attachment 41672 [details] [review]
Bug 11584 - Add wysiwyg editor to system preferences dealing with HTML (add licence)

This patch adds the TinyMCE license info to about.pl

Signed-off-by: Martin Persson <xarragon@gmail.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 24 Jonathan Druart 2015-08-19 14:15:15 UTC
Created attachment 41673 [details] [review]
Bug 11584 - Add wysiwyg editor to system preferences dealing with HTML (add system preference)

This patch adds a system preference "UseWYSIWYGinSystemPreferences" to the Staff Client tab.

By default, it is off, which means that the TinyMCE WYSIWYG editor won't be shown for system
preferences with a type of "htmlarea".

However, when it's on, it will show the editor for "Local Use" preferences with a "htmlarea"
type, and for other system preferences in the "Opac", "Circulation", and "Staff Client" tabs,
which I have re-assigned. (Basically, I grepped for HTML and changed the type for all
the system preferences I found except for "IntranetNav", "OpacCustomSearch", and "OPACSearchForTitleIn",
as a WYSIWYG editor would potentially break the output for these system preferences or
add no value to them...)

_TEST PLAN_

0) Run `perl installer/data/mysql/updatedatabase.pl` after setting your environmental variables
1) Check the Opac tab to make sure that the WYSIWYG is nowhere to be seen
2) Change the "UseWYSIWYGinSystemPreferences" preference in "Staff Client" to "Show"
3) Refresh the Opac tab and notice that many system preferences now have a WYSIWYG editor

4) Try typing some text into these fields
5) Note that it gets marked as "modified"
6) Save the preference, and refresh the page
7) Note that the content has been saved
8) Take a look at how it's rendered on the actual webpage!

Signed-off-by: Martin Persson <xarragon@gmail.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 25 Jonathan Druart 2015-08-19 14:15:19 UTC
Created attachment 41674 [details] [review]
Bug 11584: Syspref WYSIWYG, dropdown added

This patch adds the 'Htmlarea' type to the dropdown box
introduced by bug 14268, commit 6e3bcc38.

Sponsored-By: Halmstad County Library

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 26 Jonathan Druart 2015-08-20 13:16:18 UTC
So, passed QA.
Comment 27 Tomás Cohen Arazi 2015-08-28 13:43:52 UTC
Enhancement pushed to master.

Nice one David!
Comment 28 Tomás Cohen Arazi 2015-08-31 15:23:19 UTC
Created attachment 42124 [details] [review]
Bug 11584: (QA followup) add missing newline at end of YAML file

Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>