JS - How to change dynamically an image in my tinymce - javascript

I try to edit my images in the tinymce editor,
I already have an image into it, i try to edit the path of this image to change it dinamically with :
tinymce.activeEditor.selection.getNode().src = '/my/path/'
and it works, the image is edited but when i get the html content of my editor, the src still is the old image.
is there an other way to change the source of the image?

there's an easy way to do this, here take a look :
Create your custom file browser using file_browser_callback : myFileBrowser, in your tinymce.init.
Then in your callback function
function myFileBrowser(field_name, url, type, win) {
tinyMCE.activeEditor.windowManager.open(
{
file: './test.html',
title: 'My File Browser',
width: 420, // Your dimensions may differ - toy around with them!
height: 400,
resizable: 'yes',
close_previous: 'no',
},
{
window: win,
input: field_name,
},
);
return false;
}
by doing this you tell tiny mce to open a new popup wich is the file 'test.html', and you send to your popup two parameters
window : win, input : field_name.
Then in your test.html you can get those parameters like this :
var args = top.tinymce.activeEditor.windowManager.getParams();
this will give you an object with your parameters and value. you can now use a little jquery or whatever you want to replace the field of your image value with the path of your new image. and then close your popup.
Hope i helped you.

Related

How to automatically set title to be the same as alt for img tag when using ckeditor with image2 plugin?

I want to be able to set the title tag to the final image in ckeditor using image2 plugin. When I use the image2 plugin the title tag disapears.
I have a fully operational ckeditor on my page, but would like to have a title tag that is automatically set when image is inserted to the alt given in the image2 dialog. I searched for hours for a solution but noone seems to have the same problem, so i decided to ask if anyone knows a solution for it.
I have tried using the CKEDITOR.replace method to change it on instanceReady:
CKEDITOR.replace('element_id',{
on: {
instanceReady: function() {
this.dataProcessor.htmlFilter.addRules( {
elements: {
img: function( el ) {
el.attributes.title = el.attributes.alt;
}
}
});
}
}
});
but that didn't work..
tried this answer https://stackoverflow.com/a/34330124
that didn't work either
I have config.extraAllowedContent set to '*(*);*{*}' in config.js for ckeditor that should allow all tags and attributes.
Do as https://stackoverflow.com/a/34330124 and maybe you have to tweak some more in image2
plugin.js but after that you have to clear cahce for the browser beacause otherwise it'll never update.

CKEditor v4 : Dynamic title of dialog in homemade plugin

I'm using CKEditor v4 and I made an homemade plugin (tu upload image and edit informations). 2 tabs (upload and edit informations) work good, but I want to set title of dialog using condition (new image or edit existing image). Is there a way to give a parameter to dialog fuciton when I call CKEDITOR.dialog.add or change the title on the onShow event or other issue ?
Thx a lot for your help and sorry for my frenchy english !
I had the same problem and couldn't find an 'official' way, I was however able to change the title dynamically using following workaround (this is a CKEDITOR.dialog element):
this.getElement().getFirst().find('.cke_dialog_title').getItem(0).setText('[insert new title here]')
Basically, you go via the actual DOM of the dialog element (getElement().getFirst()), retrieve the title DOM element (find('.cke_dialog_title').getItem(0)), and set the text there. This relies solely on the CSS class name of CKEditor, so isn't really stable, but it's a start.
$(dialog.parts.title.$).text(someTitleText)
in short:
CKEDITOR.dialog.add('dynamictitle', function (editor) {
...
...
return {
title: "initial title here",
...
...
// set title onLoad(),or onShow()
onLoad: function () {
var currentTitle = editor.config.dynamictitle;
var dialog = CKEDITOR.dialog.getCurrent();
$(dialog.parts.title.$).text(currentTitle)
}
}
});
...
in your page:
CKEDITOR.replace('<ckeditorelementid>', {
.....
.....
dynamictitle: <title text value>,
.....
.....
});

CKEditor: call a plugin function without toolbar button

How can I call a plugin function without a toolbar button?
I have an external floating toolbar integrated in my cms. I insert images, videos and other pieces of static code with the InsertHTML() API of CKEditor.
Now I need to insert also video from URL, and there is the fantastic oembed plugin. How can I fire that plugin using a button in my cms without the toolbar button?
I load the plugin in my config, and I try to create this function:
function oembed() {
// Get the editor instance that we want to interact with.
var editor = CKEDITOR.instances.editor1;
var url = 'http://www.youtube.com/watch?v=AQmbsmT12SE'
var wrapperHtml = jQuery('<div />').append(editor.config.oembed_WrapperClass != null ? '<div class="' + editor.config.oembed_WrapperClass + '" />' : '<div />');
// Check the active editing mode.
if ( editor.mode == 'wysiwyg' )
{
// Insert HTML code.
// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertHtml
editor.embedCode(url, editor, false, wrapperHtml, 650, 400, false);
}
else
alert( 'You must be in WYSIWYG mode!' );
}
The result is this:
Uncaught TypeError: Object [object Object] has no method 'embedCode'
Is there any way to create a new API like "InsertHTML" to call plugin functions without toolsbar buttons?
EDIT
Maybe I can use the createFakeElement API.
http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-createFakeElement
I add the class fakegallery to my doc.
I use this code but nothing happens:
function Fake()
{
var editor = CKEDITOR.instances.editor1;
var element = CKEDITOR.dom.element.createFromHtml( '<div class="bold"><b>Example</b></div>' );
alert( element.getOuterHtml() );
editor.createFakeElement( element, 'fakegallery', 'div', false );
}
I found this post looking for the answer...
Checked out the link provided in the answers here [ http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-fire ], scrolled down to execCommand
This worked for me and only requires that you know the name of your plugin, so it'll always work. Obviously, you may need to change "editable" to your editor instance.
CKEDITOR.instances['editable'].execCommand('YOUR_PLUGIN_NAME_HERE');
If above fails, HACK:
This would work (first line of code below), but requires you to look at the source to find the correct #. If you have 1 custom plugin, no big deal. But if you have a dozen or more, like me, this is annoying, and could change as more plugins are added.
CKEDITOR.tools.callFunction(145,this);
Hope this helps!
Read this:
http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-fire
editor.fire( 'MediaEmbed', data);
I think that this is the structure that your data needs to have:
var data = {title : 'Embed Media',
minWidth : 550,
minHeight : 200,
contents :
[
{
id : 'iframe',
expand : true,
elements :[{
id : 'embedArea',
type : 'textarea',
label : 'Paste Embed Code Here',
'autofocus':'autofocus',
setup: function(element){
},
commit: function(element){
}
}]
}
]}
I'm not secure but this will help you on the way.
Look at the Source code of the plugin to find the available commands.
The command name that i specified above is the only one that your plugin haves.
EDIT - Manual inserting
var div = editor.document.createElement('div');
div.setHtml("<embed src=" + url +" width=" + width +" height=" + height + ">");
editor.insertElement(div);
You can add every attribute you like, Type?? maby? Autofocus??

Modify CKEditor link dialog to add custom attribute to links

I am using CKEditor on a website and I need to be able to put a special data attributes on some of the links created through the editor. The user would indicate that they need the special attribute put on the link by checking a checkbox in the link dialog. I have managed to add a checkbox to the link dialog with the following code:
CKEDITOR.on('dialogDefinition', function(ev) {
if (ev.data.name == "link") {
var info = dialog.getContents("info");
info.elements.push({
type: "vbox",
id: "urlOptions",
children: [{
type: "hbox",
children: [{
id: "button",
type: "checkbox",
label: "Button",
commit: function(data) {
data.button = this.getValue()
console.log("commit", data.button, data);
},
setup: function(data) {
this.setValue(data.button);
console.log("setup", data.button, data);
}
}]
}]
});
}
});
Now I have two problems. The first one is that despite me adding the code in the commit and setup functions that should save the state of the checkbox, it's not working. It's as if the data can't hold any other parameters but the ones there by default.
The second problem is that I don't know how to add / remove the data attribute on my links. It seems to me that I should be doing that in my onOk callback on the dialog, however, the link dialog already has an onOk callback, so I'm not sure how I should be proceeding. I, of course, do not want to modify any of CKEditor's files directly.
How can I accomplish these things?
You best option is to modify the plugin. So you need to open the source code and find the file links.js in c:\ckeditor_3.6.5\ckeditor\_source\plugins\link\dialogs\
The source code is quite big (40k) but here you can modify the dialog however you want. When you finish just copy it to your plugins folder, and compress it: http://jscompress.com/
I have done what you need myself. The whole uncompressed file is here: https://gist.github.com/3940239
What you need to do:
First add this line just before the dialog "browse" button is appended. Approx. in line: 547:
{
id: "button",
type: "checkbox",
label: "Button",
setup: function (data) {
this.allowOnChange = false;
if (data.button)
this.setValue(data.button);
this.allowOnChange = true;
},
commit: function (data) {
data.button = this.getValue()
this.allowOnChange = false;
}
},
This part is actually your code. I just copied and pasted it.
Then, go to the onOk function, approx. in line 1211: and after commitContent add this code:
this.commitContent( data );
//My custom attribute
if (data.button)
attributes["custom-attribute"] = "button";
else
attributes["custom-attribute"] = "";
This will modify your link adding the attribute to the element such as text
That's it. Although, you may also like to load the current status of the checkbox. Then, go to the function parseLink . Approx. line 179 to load the attributes:
...
if ( element )
{
retval.button = element.getAttribute('custom-attribute');
var target = element.getAttribute( 'target' );
...
I am exploring the same thing now. What I have decided to do at this point is to:
Get a base ckeditor install without the link plugin
create my own fork of the link plugin, and add my changes to it, then activate and use this plugin within the group that link normally shows up in.
...working with it as a custom plugin (albeit a copy of the original) should alleviate the problem of upgrading. You just simply do not use the original link plugin at all. Copy and rename it, and use your custom copy instead.

colorbox integration problem

I'm building some website with image gallery.
There is a normal colorbox start up script
$('.colorbox').colorbox({rel:'colorbox', opacity:'0.5',
current: '$s_photo[$lid]: {current}, $s_total[$lid]: {total}'});
It starts when I press on hyperlink covering img tag.
But I also have some img tags, without hyperlinks fitting them. And in that way default power up script is not working.
But I have different one which works partially .
$('.colorbox').click(function() {
$(this).colorbox({rel:'colorbox', opacity:'0.5',
current: '$s_photo[$lid]: {current},
$s_total[$lid]: {total}', maxWidth: 960,
maxHeight: 640, scalePhotos: true,
href: $(this).attr('src')});
});
This one powers up both img tags inside hyperlinks and img tags without hyperlinks.
And now the problem. In this way there are no arrows and info about prev, next image, and number of total images.
Is there any way out of my problem ?
Again I repeat, I have 2 types of pictures in my database.
img tags put into hyperlinks ( default colorbox way )
img tags without hyperlinks but with a colorbox class ( strange way )
Any way to combine these 2 types under one powering up normal working script ?
You should be able to do this:
$('.colorbox').colorbox({rel:'colorbox', opacity:'0.5',
current: '$s_photo[$lid]: {current}, $s_total[$lid]: {total}'});
$('img.colorbox').colorbox({href:function(){return $(this).src; }});
You could also do this:
$('.colorbox').colorbox({rel:'colorbox', opacity:'0.5', current: '$s_photo[$lid]: {current}, $s_total[$lid]: {total}', href:
function(){
return this.src || this.href;
}});
... how about this:
1 - group ALL images by some class selector
2 - use the onLoad callback to check for and set the href value for images that are not wrapped by a hyperlink

Categories

Resources