Develop Reference

Dynamically instantiate QuillJS editor

(I'm going to preface this with the fact that I'm a new javascript developer, and I'm sure I have gaps in my knowledge about how javascript/angular/quill all work together on the page.)
I'm wanting to know if this is possible. Instead of instantiating the editor in the script tag on the page, I want to instantiate the editor for the div when it gets clicked. I'm using an Angular controller for my page, and inside the on click event I set up for the div, I tried a few things:
editor = new Quill(myDiv, {
modules: { toolbar: '#toolbar' },
theme: 'snow'
});
But that didn't work, so I thought maybe I had to explicitly pass the id of the div:
editor = new Quill('#editor', {
modules: { toolbar: '#toolbar' },
theme: 'snow'
});
This didn't work, and didn't focus inside the div and allow me to edit. So I thought maybe the problem was that I was hijacking the click event with angular, and maybe I need to switch the focus to the div after instantiating the editor. So I created a focus directive (just copy/pasted from another SO article) which worked fine when I tested on an input.
app.directive('focusOn', function () {
return function (scope, elem, attr) {
scope.$on(attr.focusOn, function (e) {
elem[0].focus();
});
};
then in the on click function in the angular controller:
$scope.$broadcast('focussec123');
if (editor == null) {
editor = new Quill('#editor', {
modules: { toolbar: '#toolbar' },
theme: 'snow'
});
}
That worked to select the text inside the div, but it didn't show the toolbar and so I suspected it didn't really work. I'm sure I'm misunderstanding some interactions and I'm fully aware I lack a lot of necessary knowledge about JS. My bottom line is I want to know:
Is it possible to dynamically instantiate the editor only for the current section, and to instantiate the editor again for another section when it gets clicked, etc.
If so, how?
Thanks in advance.

yes you can create Quill instances dynamically by clicking on a <div>.
It's exactly what we do.
That's how (roughly):
export class TextbocComponent ... {
private quill: Quill;
private target: HTMLElement;
private Quill = require("quill/dist/quill");
private onParagraphClicked(event: MouseEvent): void {
const options = {
theme: "bubble"
};
if (!this.quill) {
this.target = <HTMLElement>event.currentTarget;
this.quill = new this.Quill($(target).get(0), options);
$(target).children(".ql-editor").on("click", function(e) {
e.preventDefault();
});
}
this.quill.focus();
event.stopPropagation();
event.preventDefault();
}
}

For those who aren't using Angular:
$(document).on('click', '#editor', function() {
if (!$(this).hasClass('ql-container')) {
var quill = new Quill($('#editor').get(0), {
theme: 'snow'
});
quill.focus()
}
});

Its much easier:
var quills = [];
counter = 0;
$( ".init_quill_class" ).each(function() { // add this class to desired div
quills[counter] = new Quill($(".init_quill_class")[counter], {});
//quills[counter].enable(false); // if u only want to show elems
counter++;
});

TinyMCE: How do I select a node by a current selector?

Here is how I init TinyMCE:
tinymce.init({
selector: '.editable',
inline: true,
contextmenu: false,
setup: function (editor) {
editor.on('blur', function (e) {
var content = editor.getContent();
if ( !content )
selector.text('Enter text here...');
});
}
});
What I basically want is to use some placeholder in case a user has removed everything inside the current .editable element. The code above won't work, because selector is not defined. How do I select a current node a different way?

If you want to place content in the editor instance when its "empty" you can just do this:
tinymce.init({
selector: '.editable',
inline: true,
contextmenu: false,
setup: function (editor) {
editor.on('blur', function (e) {
var content = editor.getContent();
if ( !content )
editor.setContent('<p>Enter text here...'</p>);
});
}
});
You would then need to do something in reverse when the focus returns.
There is a 3rd party plugin that does what you appear to want:
https://github.com/mohan/tinymce-placeholder
I cannot vouch for how good the code is but perhaps that plugin will solve this issue for you in its entirety.

how to disable typeahead:active when focusing a filled-in text field in a remote typeahead.js

I'm using typeahead.js and it's great but here's my use case: I have a text field that is already filled in with a string on the server side when the page is loaded, so I don't want the suggestions menu to be shown when the user focuses the text field.
typeahead.js seems to always show the menu when focusing the text field. This makes sense since minLength is 2 and the text field value is something like "Tony" (or whatever). But I've tried using hint: false and calling $('.typeahead').typeahead('close') inside a callback for the typeahead:active event, and neither seem to stop the menu from being shown.
Here's the init code I'm using:
$('#locationInput').typeahead({
hint: false,
highlight: false,
minLength: 2
},
{
name: 'locations',
display: 'name',
source: typeaheadLocations, // a simple Bloodhound instance
templates: {
suggestion: function(locationObj) {
return $('<div>' + locationObj.name + '</div>');
}
}
});
There is a slight delay between when I focus the text field and the menu is actually shown, because the remote GET has to be run. So I'm guessing I would need to prevent that somehow, after it's focused.

Looks like closing the menu in the typeahead:open event does the trick, but this seems pretty hack-ish to me. :(
$('#locationInput').typeahead({
hint: true,
highlight: true,
minLength: 2
},
{
name: 'locations',
display: 'name',
source: typeaheadLocations,
templates: {
suggestion: function suggestion(locationObj) {
return $('<div>' + locationObj.name + '</div>');
}
}
}).on('typeahead:open', function(e) {
var $input = $(e.currentTarget);
if (!$input.data('wasFocusedOnce')) {
$input.data('wasFocusedOnce', true);
$input.typeahead('close');
}
}).on('typeahead:close', function(e) {
$(e.currentTarget).removeData('wasFocusedOnce');
}).on('keydown', function(e) {
$(e.currentTarget).data('wasFocusedOnce', true);
});
If anyone knows of a better way to do this, I'm all ears!

wp_editor: How to load wp_editor on demand using jQuery?

I am trying to load wp_editor on demand using jquery/javascript.
Somehow I got success using following code but it does not save changed data in the element.
tinyMCE.execCommand('mceAddEditor', false, textarea_id);
I'll really appreicate any contribution.

When we use wp_editor() it loads WordPress default visual editor.
You must load:
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
Working example : http://jsfiddle.net/rupomkhondaker/j7brgyL2/
<textarea id="test">Easy features.</textarea>
And the code is
$(document).ready(function() {
tinyMCE.init({
mode : "none"
});
tinyMCE.execCommand('mceAddEditor', false, 'test');
});
Simply use
tinymce.execCommand('mceAddEditor', false, 'textarea_id');
Here is another example example:
<textarea name="sectionContent_1" id="sectionContent_1"></textarea>
script:
var textAreaID = 'sectionContent_' + sectionID;
$(this).parent()
.find('.sectionOptions')
.html(ctHolder).ready(
function() {
tinyMCE.execCommand('mceAddEditor', false, textAreaID);
}
);
and the most simple way is
tinyMCE.execCommand("mceAddEditor", false, id);
tinyMCE.execCommand('mceAddControl', false, id);

ProgressBar MVC3

I have a upload function in my app. this function uploads an excel file and the parses it and copies the data the database. The actual upload doesn't tale that long but the parsing does. I would like to have a progress bar so i could give the user some fees back.
I am not quite sure how to go about doing this. The stuff I have found online hasn't been that helpful.
This What I have so far ..
My View:
<div>
#using (Html.BeginForm("Upload", "Administrator", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
#Html.ValidationSummary(true, "File upload was unsuccessful. Please correct the errors and try again.")
<input type="file" name="FileUpload1" />
<input type="submit" name="Submit" id="Submit" value="Upload" onclick=" return startUpload();"/>
}
</div>
<input type="button" value="test" onclick=" return startUpload();"/>
<div id="loadingScreen" title="Loading...">
<div id="progressbar"></div>
</div>
My Scripts:
<script type="text/javascript">
$(document).ready(function() {
// create the loading window and set autoOpen to false
$("#loadingScreen").dialog({
autoOpen: false, // set this to false so we can manually open it
dialogClass: "loadingScreenWindow",
closeOnEscape: false,
draggable: false,
minWidth: 30,
minHeight: 30,
modal: true,
buttons: {},
resizable: false,
open: function(event, ui) {
$(".ui-dialog-titlebar-close").hide();
},
}); // end of dialog
});
$(function () {
//Progressbar initialization
$("#progressbar").progressbar({ value: 0 });
});
function startUpload() {
if (confirm("Doing this will override any previous data. Are you sure you want to proceed?")) {
$("#loadingScreen").dialog('open');
startProgressBar();
return true;
} else {
return false;
}
}
function startProgressBar() {
//Making sure that progress indicate 0
$("#progressbar").progressbar('value', 0);
//Setting the timer
setTimeout("updateProgressbar()", 500)
};
function updateProgressbar() {
$.get('#Url.Action("UploadProgress")', function (data) {
alert(data);
//Updating progress
$("#progressbar").progressbar('value', data);
setTimeout("updateProgressbar()", 500)
});
};
</script>
What this does is it brings up the modal dialog box with the the progressbar but the bar doesnt get updated.
however if I have the following button
<input type="button" value="test" onclick=" return startUpload();"/>
this brings up the modal box and updates the bar as well.
What I can understand from this is that since the upload button is doing a post I cant to a get till is finishes ...???
I am not that comfortable with JavaScript so if I am doing something really horrible please let me know ...

This may be overkill but you can use SignalR. This is a library specifically for real-time communication between the server and client.
You would upload the file using a regular action, then render a SignalR-page showing the parsing progress (the server sends the client regular updates as it parses).
See this article for a walk-through specifically about a progress bar.

There's nice and easy progress bar, it's just HTML+CSS+JavaScript. You have to call a JavaScript function to refresh the slider. Find description here: progress bar

May this will help you..
Simply call the fadeIn() method on your submit click.
$('Submit').click(function () {<br />
$("#loadingScreen").fadeIn();<br />
});