Content
View differences
Updated by Aleix Suau over 5 years ago
Apply OP CSS classes to all the ckEditor elements with semantic value (p, hx, blockquote...) during the edition (editing view). All element types would have always the same custom class (all p would always have .op-paragraph…).
\* With table we might need to be able to target both <table> as well as <tr> and probably even <td>.
Targeted elements: <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <li>, <a>, <img>, <table>, <td> (more important than tr), <tr>, <blockquote>, <code>, <code-block>, <figure>, first child of the figure should have its own class, container (document-editor\_\_editable-container).
###
TODO:
**BackEnd:**
* [ ] <p>
* [ ] <h1>
* [ ] <h2>
* [ ] <h3>
* [ ] <h4>
* [ ] <h5>
* [ ] <h6>
* [ ] <a>
* [ ] <li>
* [ ] <blockquote>
* [ ] <code-block>
* [ ] <code>
* [ ] <img>
* [ ] <table>
* [ ] <ul>
* [ ] <ol>
* [ ] <td>
* [ ] <tr>
* [ ] <figure>
**FrontEnd:**
* [ ] <p>
* [ ] <h1>
* [ ] <h2>
* [ ] <h3>
* [ ] <h4>
* [ ] <h5>
* [ ] <h6>
* [ ] <a>
* [ ] <li>
* [ ] <blockquote>
* [ ] <code-block>
* [ ] <code>
* [ ] <img>
* [ ] <table>
* [ ] <ul>
* [ ] <ol>
* [ ] <td>
* [ ] <tr>
* [ ] <figure>
**NOTES:**
* Should we add custom classes to custom elements (macros, mentions)?
* Build BUilt latest to branch Branch fix/update-wysiwyg-styles
* .op-uc-container
.op-uc-h1
.op-uc-p
.op-uc-blockquote
.op-uc-xxx
.op-uc-figure
.op-uc-figure--content (&.op-uc-table)
.op-uc-figure--description
* https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/conversion/conversion-extending-output.html#adding-a-css-class-to-block-elements
* https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/conversion/conversion-extending-output.html
\* With table we might need to be able to target both <table> as well as <tr> and probably even <td>.
Targeted elements: <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <li>, <a>, <img>, <table>, <td> (more important than tr), <tr>, <blockquote>, <code>, <code-block>, <figure>, first child of the figure should have its own class, container (document-editor\_\_editable-container).
###
**BackEnd:**
* [ ] <p>
* [ ] <h1>
* [ ] <h2>
* [ ] <h3>
* [ ] <h4>
* [ ] <h5>
* [ ] <h6>
* [ ] <a>
* [ ] <li>
* [ ] <blockquote>
* [ ] <code-block>
* [ ] <code>
* [ ] <img>
* [ ] <table>
* [ ] <ul>
* [ ] <ol>
* [ ] <td>
* [ ] <tr>
* [ ] <figure>
* [ ] <p>
* [ ] <h1>
* [ ] <h2>
* [ ] <h3>
* [ ] <h4>
* [ ] <h5>
* [ ] <h6>
* [ ] <a>
* [ ] <li>
* [ ] <blockquote>
* [ ] <code-block>
* [ ] <code>
* [ ] <img>
* [ ] <table>
* [ ] <ul>
* [ ] <ol>
* [ ] <td>
* [ ] <tr>
* [ ] <figure>
* Should we add custom classes to custom elements (macros, mentions)?
* Build
* .op-uc-container
.op-uc-h1
.op-uc-p
.op-uc-blockquote
.op-uc-xxx
.op-uc-figure
.op-uc-figure--content (&.op-uc-table)
.op-uc-figure--description
* https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/conversion/conversion-extending-output.html#adding-a-css-class-to-block-elements
* https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/conversion/conversion-extending-output.html