CSS Styles in Rich Text Editor are not applied

[pravictor]

Hello,

I am trying to use the Rich Text Editor (Input) to allow a user to edit a HTML document with some CSS styles applied. However, I cannot get the CSS styles on the HTML document to show up on the Rich Text Editor and I only get the output without any CSS styling.

I tried to use the “Rich Text” (Basic) element to see the same HTML and it works fine there but not on the Rich Text input element.

How can I get it to work?

Additionally, are there any WYSIWYG type HTML / Markdown editors supported natively by Weweb or in the pipeline?

[Joyce]

Hi @pravictor

I’m not sure I understand, can you show us what you would like to achieve, what you tried so far, and where it’s not working?

In terms of editors supported natively by WeWeb, do you mean something like this for example?

If so, I think you’ll see some arrive with the marketplace in a few weeks time Or did you have something else in mind?

[felipegranado]

@Joyce I appreciate so much this example…

We have a similar thing in the our templates?

[pravictor]

Hi @Joyce

As an example consider this HTML code:

<div id="header" style="height: 40px; width: 100%; background-color: #ffcccc; position: fixed; z-index: 1;"></div>
<div class="left" style="height: 1000px; width: 45px; background-color: #e0eeee; float: left; position: fixed;"></div>
<div class="stuff" style="display: inline-block; margin-top: 6px; margin-left: 55px; width: 75%; height: 1000px; border-radius: 5px;">
  <br><br>
  <h1>Resume</h1>
  <h2>Emily</h2>
  <hr style="border-radius: 5px;">
  <br>
  <p class="head" style="font-size: 20px;">Interests</p>
  <ul>
    <li>Drawing</li>
    <li>Photography</li>
    <li>Design</li>
    <li>Programming</li>
    <li>Computer Science</li>
  </ul>
  <p class="head" style="font-size: 20px;">Skills</p>
  <ul>
    <li>Web Design with HTML & CSS</li>
  </ul>
  <p class="head" style="font-size: 20px;">Education</p>
  <ul>
    <a href="http://www.wiltonhighschool.org/pages/Wilton_High_School" style="color: black; text-decoration: none;">
      <li>Wilton High School</li>
    </a>
    <!--Link-->
    <a href="https://www.silvermineart.org/" style="color: black; text-decoration: none;">
      <li>Silvermine School of Arts</li>
    </a>
    <li>Codeacademy</li>
  </ul>
  <p class="head" style="font-size: 20px;">Experience</p>
  <ul>
    <li>Student Technology Intern for Wilton School District</li>
    <li>Babysitter</li>
  </ul>
  <p class="head" style="font-size: 20px;">Extracurriculars</p>
  <ul>
    <li>Recycling Club</li>
    <li>Gardening Club</li>
    <li>Book Club</li>
  </ul>
</div>
<div class="right" style="height: 1000px; width: 45px; background-color: #e0eeee; float: right; position: inherit;"></div>
<div id="footer" style="height: 50px; width: 100%; background-color: #ffcccc; clear: both; position: relative;">
  <h2 id="name" style="font-family: Sacramento; float: right; margin-top: 10px; margin-right: 4%;">Emily</h2>
</div>

You can copy-paste it into a standard HTML viewer like this: https://html.onlineviewer.net/ to view how it should look. However, on Weweb Rich text editor, it looks like this which is not correct (image attached)

Screenshot 2024-03-22 at 4.57.16 PM.png

By external editors, I mean something like this: Best WYSIWYG Node.js Rich Text Editor | TinyMCE

[Maksanse]

Hello @Joyce !
I have a similar question : For example, I want to change the h1 style in richText (input) so that it has more than 8px for padding-bottom.

How can I do so ?

Thank you for your help

–
To illustrate : Here I copy the same html in weweb vs in Coda. I wish I could have something similar by styling weweb richtext input.

[Joyce]

Hi @Maksanse

Here you go: Rich text h1 editing

[Maksanse]

Thank you really much @Joyce
(As a new user of Weweb, I guess my question was really beginner-level, but I really appreciate your help ! The link you shared is exactly what I was looking for. It’s great !)

Kind regards

[Joyce]

No worries at all! The UX of the rich text input could be improved. It’s hard to find that setting when you don’t know it’s there