CSS Styles in Rich Text Editor are not applied

Ask us anything How do I?
1

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?

2

Hi @pravictor :wave:

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?

image
image1280×720 49.4 KB

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

1 Like
3

@Joyce I appreciate so much this example…

We have a similar thing in the our templates?

:smiling_face_with_tear:

4

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)

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