I'm new to CkEditor plugin development and have a simple question.
Following problem: I have a very 'special', non-consumer oriented media asset storage (stored as a tree hierarchy on the file system). The CkEditor user should find these media assets and so I implemented a plugin for this with a find that loads the tree on the left and displays the media assets on the left side. The user can now choose the tree item and choose the media asset on the left side. The plugin works, the code is generated with an img-Tag. When I double click on the new generated code, the 'image'-plugin-dialog gets loaded and not my custom dialog.
Question:
What can I do to tell CkEditor to open my dialog? I suppose, there is an internal mapping from tag -> dialog and the img-Tag loads the img-Dialog. Which possibilities do I have? Do I have to use custom tags for that?
The problem can be solved by using the 'doubleclick'-Hook, e.g.
initDoubleClickHandler: function(editor) {
editor.on( 'doubleclick', function(e) {
var selection = editor.getSelection();
var start = selection.getStartElement();
var attribute = start.getAttribute('data-type');
if ( attribute != undefined && attribute != null && attribute == 'myplugin' ) {
e.data.dialog = 'myPluginDialog';
}
});
}
The supported and easy way is to create your plugin as a widget with a dialog. You can control how CKEditor knows it's your special object and launches your dialog. You can either use an img with a special css style or create your own custom html tag (e.g. ).
Read the widget tutorial here (dialogs are explained in part 2 of this tutorial).
Related
I'm wondering how to disable ctrl-clicking links when in design mode. I believe it must be possible because when the link plugin is disabled, links cannot be ctrl-clicked while in 'design' mode. I would like to enable the link plugin but have the links remain un-clickable while in 'design' mode. They can still be clicked when in 'readonly' mode.
This fiddle shows the functionality when the link plug in is not enabled. Just use the Add Link button to add a link to the editor and notice when you're in design mode how it cannot be ctrl-clicked to navigate.
https://fiddle.tiny.cloud/Q6haab/3
This fiddle has the link plugin enabled to show the difference of ctrl-clicking while in edit mode.
https://fiddle.tiny.cloud/Q6haab/4
Thanks in advance
If you import the link plugin there is currently no way to disable the link opening behavior with configuration.
TinyMCE registers event handlers for click and keydown which check for the click on the link.
Additionally the link plugin registers menu items that are displayed on right click for opening the link.
Ultimately these all call the same method which creates an anchor tag on the body and fires a mouse click event on it.
If you wish to stop clicking from doing anything then you can add an event listener to the body tag for click events and then filter on the event target to look for anchor tags that are directly on the body and have 3 attributes (href, rel and target). Once you find a likely candidate you call preventDefault on the event.
body.addEventListener('click', (evt) => {
const t = evt.target;
if (
t.parentNode === body &&
t.attributes.length === 3 &&
t.hasAttribute('href') &&
target.getAttribute('rel') === 'noreferrer noopener' &&
t.getAttribute('target') === '_blank') {
evt.preventDefault()
}
});
I am designing an HTML editor for Windows Forms. I use Geckofx 60.64 and TinyMCE 5.2.0 for this. When everything runs smoothly, this will be a usercontrol.
Here is the screenshot:
And I don't want anything that pops up as a popup in this usercontrol. However, TinyMCE's code plugin opens as a popup.
As in the TinyMCE editor in Wordpress, I want the contents of the HTML code to be displayed in the editor when you click on the code icon and return it when you click the code icon again. But I have no idea how I can do it.
In order to better explain what I want, I also designed a simple image in Photoshop.
The code view in WordPress is not actually using the TinyMCE code view plugin. Rather it extracts the editor contents, loads it into a textarea, allows you to edit, and then it re-invokes TinyMCE and reloads the updated HTML.
If you want a similar experience to WordPress you will have to create the code view behavior yourself.
If you want to use the code viewer that TinyMCE provides it works as a dialog.
I had a similar request (displaying html source in editor) and achieved a pretty simple and (for me) sufficient solution by modifying the initial (open source) code plugin:
var e = tinymce.util.Tools.resolve("tinymce.PluginManager"),
p = tinymce.util.Tools.resolve("tinymce.dom.DOMUtils"),
o = function (o) {
var e = o.getContent({source_view: !0});
var b = o.getBody();
if (b.getAttribute("code") === "true") {
b.setAttribute("code", "false");
b.style.backgroundColor = "white";
b.style.color = "black";
b.style.fontFamily = "Helvetica";
o.setContent(p.DOM.decode(e));
} else {
b.setAttribute("code", "true");
b.style.backgroundColor = "black";
b.style.color = "white";
b.style.fontFamily = "Monaco";
o.setContent(p.DOM.encode(e));
}
};
Instead of opening a new window, it just changes the css of the editor (background, color, font) and sets a data-attribute (enables toggling between the initial view and the code view). The p.DOM.encode(e) then allows to display the html tags.
I'm not very experienced in javascript, but it works good so far. Anyway, feel free to correct / improve things.
I would like to open a specific tab of the Eclipse CDT project property page from code. For example the screenshot below shows the property page open on the Build Steps tab.
The following code opens the property page succesfully, but always the last accessed tab.
private void openProperties(IProject project) {
String ID = "org.eclipse.cdt.managedbuilder.ui.properties.Page_BuildSettings";
org.eclipse.swt.widgets.Shell shell = org.eclipse.swt.widgets.Display.getCurrent().getActiveShell();
org.eclipse.ui.dialogs.PreferencesUtil.createPropertyDialogOn(
shell, project,
ID, null, null, 0)
.open();
}
The thing I don't quite understand is the Settings page is declared using extension point="org.eclipse.ui.propertyPages" and has an ID. But the tabs are added using extension point="org.eclipse.cdt.ui.cPropertyTab" which does not include an ID. So how are the tabs addressed without an ID?
This is only a partial solution, but hopefully it helps:
Save the return value of createPropertyDialogOn(). It's a PreferenceDialog.
Call getSelectedPage() on it to get the IPreferencePage representing the page.
Most CDT preference pages, including the Build Settings page, extend from org.eclipse.cdt.ui.newui.AbstractPage. AbstractPage uses an SWT TabFolder widget to store the tabs.
Here's the fuzzy part: get a hold of the TabFolder widget for the page. Unfortunately, it's not exposed via any public API, so I think your options are:
Use reflection. The TabFolder is stored as a protected field of the AbstractPage named folder.
Search the SWT widget hierarchy rooted at page.getControl(), where page is the AbstractPage, for a TabFolder.
Once you have the tab control, you can use getItemCount() and getItem(index) on it to enumerate its items, which will be of type TabItem.
On each TabItem, call getData() to retrieve the associated ICPropertyTab.
Examine the ICPropertyTab object to see if it's the one you want to activate. In your case, that might be a check like tab instanceof org.eclipse.cdt.managedbuilder.ui.properties.BuildStepsTab.
Once you've found the right tab, activate it via folder.setSelection(item).
We're using Filepicker.io in our application and it works really well. I need 2 options for this plugin that I can't find in their docs.
1) Disable - We only want a user to upload a single image per interaction. If Filepicker has already processed a file in the current interaction I'd like to disable the plugin until they submit the form, or remove the current image.
2) Destroy - Filepicker provides a way to programmatically convert a standard input field to a Filepicker.io widget: constructWidget. I don't find a destroyWidget function in the docs. Does anyone know if this is an option?
This is the code we're currently using:
<input id="upload-image-input" value="Upload an image." data-fp-
services="COMPUTER,URL,FLICKR,FACEBOOK,INSTAGRAM,DROPBOX,PICASA">
var element = document.getElementById('upload-image-input')
view = this;
// make sure filepicker isn't already displaying
if (element.style.display !== 'none') {
element.type="filepicker-dragdrop";
element.onchange = function(e){
var text = view.set(e.fpfile.url),
};
filepicker.constructWidget(element);
}
I'd also like to know if there's an event which gets triggered when a file is removed using the drag and drop widget's "X" button.
We don't currently have support for these features directly in the SDK, but there are ways to produce this behavior. For instance, you can add a custom class to the element and then use that to add event listeners, remove it from the dom, or disable it.
I have created plugin in TinyMCE to cutomize advimage plugin in it default. I added a browse button at the end of image url textbox in general tab. Here is my code:
tinyMCE.execCommand('mceAdvImgMgr',false,'src');
I can open my plugin. But I don't know how can i pass the value and get it in my plugin?
Because I want to pass ID from advimage(ID of image url image) to my plugin and then after select image from my plugin, it return image url to caller plugin(advimage)?
This is not that difficult, but depends on the point of time or action at which you want to assign the value to a variable.
You may i.e. save the value in the editor object:
tinyMCEPopup.editor.last_selected_value = value;
and get it from there later on
ed.last_selected_value