TexasDigitalLibrary / Vireo

Vireo is a turnkey Electronic Thesis and Dissertation (ETD) Management System.
https://texasdigitallibrary.atlassian.net/wiki/spaces/VUG/pages/87490642/About
GNU General Public License v2.0
43 stars 33 forks source link

More advanced WYSIWYG editing options for Look & Feel settings #1912

Open jcross2562 opened 3 months ago

jcross2562 commented 3 months ago

Is your feature request related to a problem? Please describe. In Vireo 3, it was possible to use HTML source code in the "Front Page Instructions" (and other instruction sections). Vireo 4 now provides a WYSIWYG editor to facilitate that. However, the editor is very limited; it only allows the ability to apply paragraph, headings, and preformatted text, as well as bold, Italics, and underline formatting. There is no way to include more advanced HTML coding (like text colors, hyperlinks, special CSS styles) to text that is entered into the section.

Describe the solution you'd like Ideally, I would like the option to define -- either by editing the HTML source code directly or using additional editor options -- for selected text, if necessary. This problem came up when I wanted to add a special note to the Front Page about a scheduled system upgrade. In Vireo 3, I could add this kind of note in a box with a specific background color, so it would be nice to replicate that in Vireo 4. I have written up some CSS code that could be used, but there is no way to select that from the WYSIWYG editor.

Describe alternatives you've considered An alternative option would be to include a special section in the Look & Feel that is specific for system alerts, which could be toggled on/off as needed. This section could provide the ability to set the background and text colors, with the placement set by default it if is toggled on.

labuchholz commented 1 month ago

A second to this feature request, especially for html links. We link out to pages for students to submit a extension request and also thesis formatting guidelines, and have had to just put the unlinked URLs there for students to copy/paste. Wish we could put a proper link.

cstarcher commented 3 weeks ago

Possible solution is to add the Link plugin to TinyMCE.

https://www.tiny.cloud/docs/tinymce/latest/link/ https://www.tiny.cloud/docs/tinymce/latest/autolink/

smutniak commented 4 days ago

To clarify this fix only adds the ability to create links but does not add any css capabilities other than the existing heading size (H1,H2, etc) bold, italics, and underline correct?

jcross2562 commented 3 days ago

Since I posted the original comment, I would also like to advocate for the ability to include bulleted lists, numbered lists, and the HTML source code editor.

https://www.tiny.cloud/docs/tinymce/latest/lists/ https://www.tiny.cloud/docs/tinymce/latest/advlist/ https://www.tiny.cloud/docs/tinymce/latest/code/

The source code editor would be especially helpful on the occasions when a special note might be needed (e.g., scheduled downtime). And that is not something that is possible with the current offerings.

cstarcher commented 1 day ago

I have updated PR 1946. This should address all functionality requests from this issue. CSS can be added by using the Custom CSS section in the Look and Feel settings in conjunction with the TinyMCE Code plugin in the editor. To do this, you can simply add a new CSS class into the Custom CSS and add the new class tag to the HTML using the Code plugin in the TinyMCE editor.