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?
Related
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 prevent toolbar buttons in a Quill editor from having a tabindex. How can I do this?
Quill offers two ways to get a toolbar at the two ends of the customization spectrum. One is you pass in an array of formats that you want and Quill builds the toolbar for you (in this case with a tabindex). The other is you give Quill whatever container you want (with or without a tabindex) and Quill attaches the appropriate handlers. If the former is not to your liking then the latter is the alternative.
Following is the CkEditor I am trying to automate on my website:
CKEditor
I have automated clicking through the Bold, Italics, Subscript and Superscript buttons. However, the dropdown menu for Font color or Text style show up blank on the DOM as follows:
DOM for CKEditor
As you can notice, the span underneath the combo box element is empty. Thus any of the text color options available in the combo box do not show up on the DOM. How to automate clicking through various different text colors?
The issue is that at least this dropdown is inside an iframe. You have to switch context into that iframe before you can select something in the dropdown. The code below is working for me.
driver.findElement(By.cssSelector("a[title='Formatting Styles']")).click();
driver.switchTo().frame("cke_72_frame");
driver.findElement(By.cssSelector("a[title='Borderless Table']")).click();
Is it possible in ExtJS 4.0 to set a column header as a image, or custom rendered HTML?
The API for column text says:
text : String
The header text to be used as innerHTML (html tags are
accepted) to display in the Grid.
Which means you can pass in something like <span class="mySpan"></span> and define a css class that has a background image.
EDIT:
Here is an example:
http://jsfiddle.net/HSVj8/102/