Froala Editor get Current instance - javascript

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~');
}

Related

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

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.

Notepadd++ or any editor - custom autocomplete

I need to trigger a custom auto-complete when user enters a certain XML tag or XML attribute. I would prefer Notepad++.
I know in plugins/API directory there are list of files which contains keywords for auto complete.But it will not be very useful as i need to trigger autocomplete based on certain keyworkds.
The list is very vast so is there any other way to do it ? Currently I use a HTML JavaScript page to render the list. But its not that fruitful.
I want the list to be presented when someone is actually editing the XML page.
Any workarounds ?
In SynWrite app: try option (Auto-Complete tab of options): "Auto show list after typing N chars". It works not only for xml.

Is there an in-built function defined to save the data in codemirror (other than the key map function)?

I am basically searching for a function that can be invoked on onClick event of a button. Also when saving the content it should be clear that which text area's content need to be saved if multiple text editors are present on the same page.
It depends how you have implemented the multiple text editors using CodeMirror.
The following code returns the content of the editor instance.
editor.getValue();
Use this to save the content of a particular CodeMirror instance.

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

Is there a textarea/rich text editor that allows the user to follow links that render in them while entering?

I am looking for something like like FCKEditor that allows users to follow links by left clicking them.
For example, the markdown editor in StackOverflow does not allow you to click the links you add as you are entering data into the editor. I would like to render a text area pre-populated with some links to lab results that the user can choose to review while making their comments.
both tinyMCE and fck editor will highlight the links with blue color and if you ctrl+click on them, will open in a new tab/window (depends of you browser configuration)
Most HTML richtext don't do anything to the link (with the exception that you can place the cursor in them with a single left click, in order to edit their text) that would prevent you from, for instance, right-clicking to open the link, copy it, or whatever your browser allows.
TinyMCE allows you to preview within the same page and then click on any links with the click of a button/icon. I'm thinking there must be a way of triggering this outside of the TinyMCE and possibly having it populate another field/area. (You probably could also grab the value of the textarea and put that somewhere else on the page.)
Not sure if this is what you are looking for.
Or you could try a preview mode, just like StackOverflow. See How can I enable live preview for FCKeditor in an ASP.Net site?

Categories

Resources