Develop Reference

How can I jump to my current location in CKEditor 4 when I go to the Source view?

I'm using CKEditor 4, and when I'm in the middle of some long content and switch from the standard editor view over to the Source view (or vice versa), it jumps me back to the top of the content. However, I want to make it so that it stays where I was in the view I just came from.
How can I do this in CKEditor 4? I've tried Googling the answer, but I can't seem to find any relevant hits for either a setting in CKEditor 4 to do this or a snippet of JS that would accomplish the same thing. Thank you.

There's a plugin for this called "Keep TextSelection". Download it here: https://ckeditor.com/cke4/addon/textselection
Extract and upload the textselection folder to the plugins folder. Next add this to the config.js file:
CKEDITOR.editorConfig = function( config ) {
// along with any other config lines add the following
config.extraPlugins = 'textselection';
}
From the WYSIWYG editor press the Source button. Your cursor will be at the same place in the Source view. If you highlight something that same text will be highlighted in Soure view.
Here's a working example:
http://jsfiddle.net/sirtet/TX5bc/

jodit editor not displayed correctly

I have a problem with the jodit wysiwyg editor (or possibly any other type of plugin editor) working within a Bootstrap tab. If I add an editor to the tab content then when the user selects that tab the content is not displayed correctly (it is only a fraction of the height and is missing a lot of it's toolbar).
I suspect it is being rendered within the hidden tab div which possibly affects the redraw process?
Here is a working fiddle Click on the Editor tab to see the reduced size editor. To see the proper working version, grab the small resizer in the bottom right and drag the area, it should auto resize to the correct display.
To render the editor the only code I've used is
var editor = new Jodit('#editor', {
autofocus: true,
height: "600"
});
I've also tried running the editor.resize() function after it's been created which doesn't work.
The tabs and the content are generated dynamically.
Is there some other editor function that I can call after the content has been applied that will fix the redraw?

It turns out that there is an option called toolbarAdaptive that turns off adaptive mode. This allows the tool to be drawn as expected. Not sure if that is a bug in the Jodit editor itself or desired functionality.
var editor = new Jodit('#editor', {
autofocus: true,
height: "600",
toolbarAdaptive: false
});

Custom self closing tag in Tinymce

Has anyone created custom self-closing non-html tags with attributes in tinymce?
I have tried the same on the lines of tinymce's pagebreak feature.
I went ahead and unminified the plugin.min.js associated with pagebreak.
I started tweaking the code by adding a pop-up to accept attributes for the custom tag.
I'm inserting my custom tag which is displayed to the user on UI as a logo image.
On clicking 'source code'(<>) from toolbar of tinymce, we must see only :
<mycustom attr1='value1' attr2='value2'/>
To the end user its meaning will only be an image, similar to how page break works.In page break, a tag is inserted in tinymce on viewing src, but actually on UI of tinymce editor we see dotted lines image.
----------------------
----------------------
This is achieved using 'Resolvename' function in pagebreak plugin.min.js
I am able to create the desired tag and pass attributes inside it, however when I click 'source code'(<>) plugin,
I see the tag:
<mycustom attr1='value1' attr2='value2'/>
in code view of tinymce, but on clicking 'OK', everything becomes empty!!
I read in many places that configuration in tinymce plugin using:
extended_valid_elements : "mycustom[*]"
&
closed: /^(mycustom)$/
does the magic, but this did not work for me :(
I am not able to put screenshots because of low reputation:(.
Anybody has solution for this?
Thanks in advance.

Using <ahref> tag in google sheet GUI using google script

I am creating a GUI using google sheets and google script. As of recently, that requires serving HTML with the GS code.
I have a google sheet, that, when opened, provides a pop-up for users to view some data. I have a script that within the html file that I would like to link to an external page. For example, consider this line of code in a text
document.getElementById("id1").innerHTML = 'Visit Google!';
In the small GUI window that is provided, if I left click the link, the GUI goes blank (white), and nothing else seems to happen. However, if I right click and open the link in a new page, it works fine.
Here is my question:
Why can I not left click to open the link?
Side question (I can post this separate if it is better etiquette on this site): Is there a way to increase the size of the GUI window provided by my google script? Or perhaps even open up the data in a new page with the html?
update: Stub for serving the html:
function openDialog() {
var html = HtmlService.createHtmlOutputFromFile('TeacherView')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
SpreadsheetApp.getActive().show(html);
}
Thanks,
Jordan

Include the target="_blank" tag in the <a>.
Insteado of using show, use showModalDialog or showModelessDialog.

Paste Image Into TinyMCE Editor

I am looking at ways to Paste an Image into TinyMCE editor, I have been googling it for a while, but couldn't find any related answer.
I can append an <img> with src content to the Editor(when i paste the image on the page other than inside the editor).
I am not able to paste it inside the Editor. I am using Javascript and jquery. Has anyone got an idea, how i could do this.

Enable paste_data_images
Setting paste_data_images to "true" will allow the pasted images,
while setting it to "false" will disallow pasted images.

You can't do that. TinyMCE and any other editor out there are giving you the functionality of creating rich text content. Displaying an image requires an URL and there is no URL to the image on your machine.
You need to upload the image to a server. You need to be able to access that image through a link. That link is what you insert into TinyMCE.