How to force document.execCommand to apply to specific element? - javascript

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.

Related

Froala Add Inline Style Custom Button

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();

Froala Editor get Current instance

I am using Froala Editor on my website and I am stuck at the point of finding the correct way to get the current editor instance.
Froala
My page has multiple editors which I have initialized using the class of the text area. Here is a sample page http://1minutewebsites.com/froala.php
On this page we can see two editors and when we see the page source we can see how I have initialized them.
In the toolbars I have added a custom drop down which we can see at the last, using custom dropdown.
Since there are two editors on the sample page, I want to click on the first editor and from the custom drop down select any one value. It inserts a short code in both the editors.
I want insert the short code only in the editor for which we are clicking on the drop down to insert the short code.
I have also added the script which can be viewed on the page itself.
How can I insert the short code in the current editor instance ?
You can iterate over all editors individually and initialize them. I also realized that your custom functions are set to insert to all of the editors.
You can initialize all of your editors by doing the following:
var editorConfig = {};
$('textarea.editor_here').each(function (){
$(this).editable(editorConfig)
});
Also inside your current config, your custom dropdowns should be
'~vil~': function(element){
this.insertHTML('~vil~');
}

Tinymce view mode switches after init

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 ).

Get GoogleDocs Selection from DIV and replace it (JAVASCRIPT, XUL)

I want to develop a Firefox extension that gets the selected text from a google word doc and replaces it with another text (any text).
If i inspect the selection with Firefox's InspectElement i find that the selection is a DIV with the class name = "kix-selection-overlay kix-overlay kix-unprintable kix-overlay-under-text" .
How do i get the text from the DIV and then modify it ? All the methods that worked in a normal webmail, even in a excel spreadsheet(google docs) failed to work in a google doc word document.
For now i just managed to obtain the element with :
var focusedElement = document.commandDispatcher.focusedElement;
Thank you a lot !
Alex!
The problem is that Google Docs has its own selection system, instead of using the Javascript range document it creates divs for every line that is selected behind the text. It does this so that collaborative users can have different colors for their selections and because the range object has annoyances with the way that it handles nested elements and offsets.
Google Docs would have an internal selection object as well as copy and paste functionality. You simply need to look through the code and find what methods are called by the oncopy and onpaste event handlers.
Ryan

Custom dropdown box using javascript and css

Is it possible to create a custom dropdown box using javascriit and css.
for which i need to place a background-image for dropdown box using javascript
If yes or no ? if yes . give any suggestion ?
without using JQuery
You can check out jQTransform
Here is a good tutorial on creating custom drop-down.
JQTransform (as suggested by Olafur) is sufficient for me. But if you need more control such as adding icons, it's worth looking at the tutorial.
This might be overkill; but SproutCore gives you input elements composed from images instead of from native HTML elements. There are probably other frameworks that do similar things.
The basic idea is to create a div or something, as CrazyJugglerDrummer suggests, and put click handlers on it. The handlers set up animation to mimic a select element. And when one of your pseudo-select items is selected, you use JavaScript to send that value to an actual select or input element that is hidden.

Categories

Resources