Formatting of Course Contents in Open edX version 18.1.3

Development
,
1

Hi, I am currently working on an open edx project which uses tutor version 18.1.3. The issue that I am facing is my team members are trying to create course using the visual editor. They need to format the content in a specific way (like Arial font, 16pt font size, etc) for that they first write their content on MS Word, format the content in MS Word and copy that content and paste it in the visual editor. When the paste the content and click save and then publish the content is saved in the correct format, but when they revisit the course after two or three days the contents formatting is gone. The font is changed back to ā€œVerdanaā€ and the font size is also smaller. Is their a way that I can persist the formatting of the contents. Or is their a way that I can change the style of the elements (like paragraphs, list elements, headings, table padding) in the visual editor so that instead of formatting the content in word, my team could directly use the visual editor.

2

Hi @brunodev

Not to imply this is the de facto way to do this, but what Iā€™ve found is that to get reliably reproducible templates I had to write it in HTML/CSS to make sure the template stayed the same, then use the advanced editor to directly paste the HTML data.

Iā€™ve often found that Word in particular isnā€™t all that great at HTML formatting and tends to put a LOT of extra data in the content, which may or may not be influencing your experience to some degreeā€¦

If youā€™d like something simple to use as a starting template that you can modify to your needs, maybe give this a try, it looks something a little like this as is:

image
image463Ɨ737 24.1 KB

You can of course add or remove elements like additional teachers depending on your course, if I have multiple speakers I just duplicate the teacher class for each speaker in the content.

<style>
  body {
    font-family: Arial, sans-serif;
  }

  .about {
    margin-bottom: 2em;
  }

  .course-staff {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
    margin: 0 0 0.5em 0;
  }

  .teacher {
    display: flex;
    align-items: center;
    gap: 1em;
    border-bottom: 1px solid #ccc;
    padding-bottom: 1em;
  }

  .teacher-image img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
  }

  .teacher-info h3 {
    margin: 0;
  }

  .teacher-info p {
    margin: 0.25em 0 0 0;
    color: #555;
  }
</style>

<section class="about">
  <h2><strong>About This Course</strong></h2>
  <p>Course information</p>
  <ul>
    <li>Learning topic 1</li>
    <li>Learning topic 2</li>
    <li>Learning topic 3</li>
    <li>Learning topic 4</li>
    <li>Learning topic 5</li>
    <li>etc...</li>
  </ul>
</section>

<section class="course-staff">
  <h2><strong>Course Staff</strong></h2>

  <article class="teacher">
    <div class="teacher-image">
      <img src="https://uxwing.com/wp-content/themes/uxwing/download/peoples-avatars/user-profile-icon.png" alt="Teacher Name" />
    </div>
    <div class="teacher-info">
      <h3><strong>Teacher Name</strong></h3>
      <p>Teacher designation/qualifications/etc</p>
    </div>
  </article>

  <article class="teacher">
    <div class="teacher-image">
      <img src="https://uxwing.com/wp-content/themes/uxwing/download/peoples-avatars/user-profile-icon.png" alt="Additional Teacher Name" />
    </div>
    <div class="teacher-info">
      <h3><strong>Additional Teacher Name</strong></h3>
      <p>Additional info</p>
    </div>
  </article>

  <article class="teacher">
    <div class="teacher-image">
      <img src="https://uxwing.com/wp-content/themes/uxwing/download/peoples-avatars/user-profile-icon.png" alt="Additional Teacher Name" />
    </div>
    <div class="teacher-info">
      <h3><strong>Additional Teacher Name</strong></h3>
      <p>Additional info</p>
    </div>
  </article>
</section>
3

Thanks for your solution. I was wondering if their is any way to not use html and css in visual editor because my team members canā€™t work with html and css. One more thing is their a way to add custom css to the from backend which overrides the default css so that I donā€™t have to add html and css manually for each course because currently we have about 76 courses.

4

I have not tested this, but this looks to me like it might be a template for the default text shown in the overview, maybe this can be edited to show a new default that your staff can edit from more consistently. Honestly Iā€™ll defer to anyone elseā€™s suggestions here as well, as from my side I almost exclusively use the advanced editor so canā€™t give you much more info hereā€¦

5

I suspect that whatā€™s going on here is that the rich-text paste from Word to the visual editor is adding lots of span tags with inline styles, and those are displaying as intended while the editor is open (due to how contenteditable works), but getting filtered out on save.

To test this theory, Iā€™d recommend that they save the content, exit the editor, and navigate back to it. Is the desired formatting still there, or has it changed?

2 Likes
6

Yes @Tim_McCormack that is the case. Those span tags and inline styling are getting sanitized when I save the content. To fix the issue I have made changes to the CSS file and add style to it. So now when my team creates or edits a course, whether the html gets sanitized or not, the courses formatting persists.