i am using react quill editor and the editor is working fine. but when i display the html content its not in the format shown in editor view. in console i can see that ql-indent class was applied to tag but its not working outside editor. i tried applying quill core.css styles but still no use.
It's difficult to find a guide on displaying quill-editor html content outside the editor.
so please help me in handing ql-xxxx classes outside editor.
i fixed it by adding ql-editor class to the preview div tag.
<div className="ql-editor" dangerouslySetInnerHTML={{__html: htmlContent}} />
Related
I am trying to incorporate editorjs in my react app. I incorporated it with the div element with contentEditable="true". I want to implement the text editor with the textarea element also but it seems it's not working.
Is there anything extra to be done in order to implement the rich-text-editor on textarea tag.
Using the id of the element on the holder element of editorjs is not helping me with textarea tag.
https://laracasts.com/discuss/channels/laravel/editorjs-is-not-working-with-textarea
I referred to the link above and unfortunately, it's not helping me.
I am pretty new to implementing this stuff, Does anyone know the issue?
Thanks
In wagtail, I need to make a Struct/Stream Block
There is a dropdown on the top of the block(Image/Video)
If editor choose Image, VideoChooserBlock should be hidden.
And if editor choose Video, ImageChooserBlock should be hidden.
class MyBlock(StruckBlock):
category = ChoiceBlock(choices=(("image", "image"),("video", "video")))
image = ImageChooserBlock()
video = videoChooserBlock()
Here, editor should be able to choose only image or video depending on category.
Any help is appriciated.
Thanks
You may find it useful to review the code of wagtail-link-block which does something similar.
Main files to focus on:
blocks.py for displaying fields conditionally based on a ChoiceBlock
static/link_block/link_block.js and static/link_block/link_block.css to handle the DOM manipulation and styling with JavaScript and CSS
wagtail_hooks.py to insert JS and CSS
I've been attempting to add custom i tags as blots into a Quill editor. Basically I need a way for a user to specify a FontAwesome icon and the editor handle it.
<i class="fa-thin fa-address-book"></i>
My previous attempt included adding a custom toolbar button that allows you to edit raw html, however when pasting this back to the editor the class (<i class=) is stripped.
I am using the Quill editor (via ngx-quill) to give my user the ability to edit documents. When the documents are displayed I show them like this:
<div [innerHTML]="doc.text"></div>
This works reliably, but the styling of the content of the div tag is quite different from what you see in the Quill editor window. What I want to do is apply the Quill content stylesheet to my div tag, but I haven't been able to find any document to do that. Does anyone here know how to do that?
I know one alternative is to invoke a Quill editor in read-only mode and without a tool-bar. That's my fall-back but I would prefer not to do that.
I was facing the same issue. Some inline styles are displayed, but the styles applied from the Quill.js class are not applied. post-content is class of div containing the content:
let content=document.querySelector('.post-content')
content.innerHTML=content.innerText
I would like to have an input select with a choice of image as an option (would define a custom icon). I can put an image or an icon with Font awesome.
I tried putting
<select>
<option><i class='fas fa-shopping-bag'/></option>
<select>
or replace with an image but nothing work.
Font Awesome font is well imported, I tried with unicode it does not work either
Do you know how to do it ?
Thanks
if you are using reactjs you need to use className instead of class https://reactjs.org/docs/faq-styling.html