Could somebody check this issue with the Quill.js?
Shortly:
I have a floating quill toolbar and we init the quill when user click on specific element.
I also have a custom embed blot, the goal is qith this custom blot to create a unique/specific text, similar to mentions.
My problem is, when we re-initialize the quill, so click on specific element -> insert a custom blot it's working fine, but when deselect the element the quill is dissapear, when select again the element, the custom embed blot will be formatted and inserted a nested span element.
I try to solve this with custom embed blot, and when we re-initalize the floating quill bar it always inserting a nested span into a child element.
Thanks
Related
I have one div component in react. it is used to display serchable dropdown in react.
if there is extension in the browser it is coming over the component. like you can see icon above the component. when I inspected this component it is coming like below.one image is getting inserted inside the div.
when I am testing in another browser where , there is no extension it is not coming like that. it is proper.
how can I prevent my div tag to insert image automatically?
this icon keeps moving when I type the text.
This is the icon that comes from LastPass extension.
And icon apears on input tag (in your case, react-select has input tag in value container)
If you want to hide from your site for all users, you can add following CSS style
img[id^=__lpform_][id$=_icon]{
display: none;
}
If you want to remove the node from html, you can add following JS snippet.
var lastPassInterval;
lastPassInterval=setInterval(()=>{
document.querySelectorAll("[id^=__lpform_] [id$=_icon]")
.forEach(el=>{ el.remove(); clearInterval(lastPassInterval)})
},500)
Above code snippet will find all these img tags with matching IDs, and remove it from html.
Another way
In react-select on Input Component you need to pass data-lpignore="true", It will prevent LastPass from displaying icons in input. Check below answer for more info.
https://stackoverflow.com/a/53089923/14614051
I'm a UX Designer, with some experience in frontend dev, working in a online editor proof of concept to be tested in a usability study. One of our first finding has been that the users would like to have a button that adds directly the corporate font family and size for body text that is Arial 11px. I know that this can be achieved easily with the inlineStyle.js plugin with a dropdown but I'd like to have the same behaviour like the Bold or Italic button. I've tried to look into the plugin's code but I can't make it work for my case I've also tried the code in this example Froala add custom pre code button but it's too old to work with the latest version of froala.
Thanks.
I guess the way forward could be to actually employ the inlineStyle plugin, then reach into the Froala editor instance and hide the plugin button on the toolbar, whilst adding your own custom button to 'click' the hidden style option in the plugins dropdown.
I don't have the inlineStyles plugin enabled right now but I do have the paragraphStyles plugin which I believe follows the same approach. This picture is a grab from Chromes inspector showing the elements that build the Froala paragraphStyle options dropdown (similar to inlinStyles). The yellow highlight is within the class of an element that 'is' the activating button for my style. The highlighted text is my class name - the class I want applied when that option is clicked. That gives me the chance to target a click trigger via, say, jQuery, so
$('.dzTtlRed').trigger('click'....)
So you would add a custom button to the Froala editor toolbar and set it to trigger the click on your style options in the dropdown.
Regarding hiding the plugin button, this is what I have successfully used to hide the paragraphStyle plugin dropdown button on the Froala toolbar. I expect you could do the same for inlineStyles. Note you need to fire this after the Froala editor finishes building - I have noticed some async behaviour in this which means things don't happen immediately or in any externally predictable sequence, so you may want to use the Froala intialized callback event.
var inputBox = $('#' + eleId); // eleId is the Froala nominate textarea html id attr.
inputBox.closest("div").find("button[data-cmd='paragraphStyle']").hide();
I've been working on a WYSIWYG project that utilizes the document.execCommand() method. Currently our toolbar contains a data-target attribute, but it's not being utilized to link the toolbar to it's respective editor. A while back we received a couple of reports from users asking for help with this because they were adding multiple editors on the page. Because the data-target isn't being utilized in our code, when they use the toolbar on for one editor the styling is being applied on both editors.
I've been looking online for resources to figure this out but every example I've been able to find just shows one editor on the page at a time. Any suggestions as to how I might be able to apply the styling created by the document.execCommand to only that editor specified in the data-target attribute?
Get the tool bar parent DOM id which you click in one editor.
Get the selected text DOM parent Id.
Compare if both are same means allow to apply the action other wise reject it.
My editor is tinymce4+.
It works greatly in most parts.
But no matter what I do, there's something I just can't do.
- switching editor mode instantly. -
I have a page that users can select a data and edit it and view the content. Users click on a button named " viewmode ", the other flipside is " editmode "
I achieved this by putting two DIVs in a same container, making one of them invisible by the start-look-settings users have choosen. One DIV has tinymce editor, the iframe tag, and another one has just a bunch of html values that the editor is holding. But the side effect of this is that the content style could look different, depending on its style attributes.
This web application I'm talking about now is an existing system that has its own CSSs.
It's so complicated that once you get to look at it, you might want to run away from it.
So I would like to avoid this CSS discrepancy by making editor dynamically switchable to both ways.
Loading multiple tinymce objects is the last thing I need here.
I can make editor disable by setting up an attribute - contenteditable = false -
But then the toolbar elements become bad boys here. because they still work. I hide the toolbar itself to complete this mission.
But you know, my client hated it and insisted me that the editor should provide a print button in its viewmode. This is frustrating.
So, if you could just give me an idea of how to manipulate the elements of toolbar, then I think I can manage to solve this issue.
If it's too difficult, attaching the print event listener to an external element could be also the second best option for me. Because from that moment on, I just throw the toolbar away and make a print icon on the top of the editor and attach the event to it.
Sorry for typing all the plain texts. But issue like this requires no codes I think.
Hope some tinymce guru stop by and help me out.
Finally, I made my editor switchable.
First step is to hide all the elements in the toolbar of tinyMCE.
tinyMCE toolbars have a specific class name so they are selectable with jQuery class selector. But selecting with class name alone causes getting unwanted toolbars as well, so you have to be careful with this.
FYI .eq() API might help you.
after hiding all the elements in the toolbar, ( don't hide toolbar by the way. ) do this.
tinymce.ui.Factory.create({
type: 'button',
cmd: 'mcePrint',
icon: 'print',
shortcut: 'Ctrl+P',
class : 'temp'
}).renderTo(appendTarget);
This is going to add a button element into the toolbar.
But somehow it doesn't invoke the command I defined in cmd's value.
So attaching this event to the button manually will be required.
tinymce.activeEditor.execCommand('mcePrint');
So far I created a custom-toolbar for view-mode editor. Now it's time to freeze the edior's actual content field.
It's very easy after getting iframe contents as jQuery object.
.contents() API should help you.
after that, you can select <BODY> element on your side, so the last thing left to do is to give 'contenteditable=false' attribute and value to the body tag.
Then your editor freezes.
Going back to the edit mode is easy too. Just do the backwards.
Invoke these events when you click on your own "switch" button. Then you can toggle your editor from view-mode to edit-mode ( and the oppsite way as well ).
I wanted to highlight text inside iframe if the user clicks the same text outside iframe in the webpage.
I could search for the contents using the below code.
$("#iframe").contents().text().search("text_to_be_searched");
But how to highlight the text?
ASSUMING that your code for finding the text is going to work (and it is going to be a little complicated to get that to work), then all you have to do is this:
$("#iframe").contents().text().search("text_to_be_searched").
wrap("<span class='highlight-me'>");
And then use CSS to highlight anything with a class of 'highlight-me'.
If that doesn't work, we'd have to see how you are finding the text, you need to get into the form of a node that jQuery can work with.