Uploaded image for project: 'DSpace'
  1. DSpace
  2. DS-2741

Allow WYSIWYG editor for item metadata during Submission

    XMLWordPrintable

    Details

    • Attachments:
      3
    • Comments:
      11
    • Documentation Status:
      Needed

      Description

      In order to allow HTML in item metadata, we propose the inclusion of a WYSIWYG editor during DescribeStep. This addition would allow a user to enter rich text as metadata value. Here are some case scenarios:

      • Allow the usage of lists in field dcterms.tableOfContents
      • Allow abstracts with some visual styles like bold, italic, etc in dcterms.abstract
      • allow free HTML in dc.description
      • also, it would allow the use of additional plugins like Latex formulas.

      In this ticket we (SEDICI) will attach a fully functional PR for your consideration. Basically, we added the js library CKEDITOR and a parameter "editorToolbar" to Wing's TextArea element and updated the rest of dspace to handle this modification.
      This PR includes several minor changes in dspace-xmlui:

      • DescribeStep: to read configuration
      • wing (TextArea and Params): to handle an extra parameter
      • themes: dri-alt and Mirage: to generate the editor in submission and to correctly show an HTML metadata field.

      To configure an editor, you should indicate its corresponding toolbar in dspace.cfg for each metadata the WYSIWYG editor applies. You can either use one of the toolbars prebuilt or create a new one according to your needs. i.e.
      input-forms.dc_description.editorToolbar=${editorToolbar.fullHTML} '#prebuilt example'
      input-forms.dc_description.editorToolbar=['Link', 'Unlink'],['Undo','Redo'],['Bold', 'Italic', 'Underline'],['Undo','Redo','RemoveFormat'] '#new toolbar example'

      We found a few good editors, such as tinymce, Summernote, Redactor and Mercury Editor but we have chosen CKEditor because:

      • default plugins provide a lot of arguments and are simple to use.
      • keep the input source markup accurately. Tinymce respects HTML but is not so friendly to CSS.
      • generates dialogs usign only JS and avoid the useage of Popups.

        Attachments

        1. CKEditorDescribeStep.png
          CKEditorDescribeStep.png
          99 kB
        2. CKEditorItemView.png
          CKEditorItemView.png
          116 kB
        3. LatexPlugin.png
          LatexPlugin.png
          146 kB

          Issue Links

            Activity

              People

              Assignee:
              Unassigned
              Reporter:
              nicolasschwab Nicolas Schwab (SEDICI)
              Votes:
              0 Vote for this issue
              Watchers:
              8 Start watching this issue

                Dates

                Created:
                Updated: