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.
Related
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 am trying to build a text editor for my application using react quill. My requirement is to build a sentence template and in that template, there will be some HTML controls like some free texts and some dropdown options. Is it possible to build an editor like this using Quill. Basically, instead of toolbars, I want that toolbar like options in the text editor area.
Eg:
Template 1 - I have {select option} brothers
Template 2 - My name is {input box}
In the first template, the number is a selectable item, and in the second example, the name is a free text. There are some validations on these items. that need to cover separately.
Is it possible to fulfil this requirement using Quill editor?
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}} />
i want to remove the outline of the button without using a css file. I know it could be done in css file buy having button:focus {outline:0;}, but i don't want to use a css file. I am writing my style as a const style={button:{...}} and link it like this <button style={style.button}></button>. Is it possible to make it like this?
I am trying to use navigation images on left as well right of <super-navbar> but it is stated in the official documentation, that only text is supported in super-navbar buttons. But there must be some way around to do this. Below is my code, where I want to place images instead of text:
<super-navbar>
<super-navbar-button side="left" id="hamburger" onclick="supersonic.ui.drawers.open()">Menu</super-navbar-button>
<super-navbar-title>MyApp</super-navbar-title>
<super-navbar-button side="right">Search</super-navbar-button>
</super-navbar>
Instead of "menu" text I want to have hamburger type icon or png image at least. Same for search text.
Thanks.
This can be accomplished right now by removing the <super-navbar> section and writing your own html header.
If you look in the layout file for your project there is an import statement as you mentioned:
<link rel="import" href="/components/supersonic/components/import.html">
There is a section that states:
* #name super-navbar-button
* When used inside theelement, creates a button that will be displayed on the navigation bar. Only text content is supported for the button title.
Support for icons has been requested. You can subscribe to their github to get notifications of issues. https://github.com/AppGyver/steroids
One work around to be able to keep using <super-navbar> and have icons is to use something like this which will render as ≡
<super-navbar-button ng-click="toggleMenuDrawer()">
≡
</super-navbar-button>
They have a good forum on Muut as well. This issue is most likely related to trying to add icons in the <super-navbar>. I experienced a disappearing navbar after trying to add markup: <i class="icon super-search"></i>
It works in the main content area, but makes the navbar behave differently when nested in a <super> element.