When I am trying to copy and paste the data from excel to ckeditor it is getting pasted twice as plain text and base64image. I need to paste it as base64image only. Screen shot is attached for reference.
I have resolved the problem using following solution
var editor = CKEDITOR.replace( 'editor1', {
extraPlugins : 'pastebase64'
});
editor.on( 'pluginsLoaded', function( event ){
var excelRegex = RegExp( '(schemas-microsoft-com\:office\:excel)', 'ig' );
// How to change image, dropped from local folder into CKEditor, from image file to base64 string with the help of CKEditor objects.
editor.on( 'paste', function( evt ) {
var testHtml = evt.data.dataTransfer.getData( 'text/html' , true);
if ( testHtml.search( excelRegex ) >= 0 )
evt.cancel();
});
});
Copy and paste duplicates images. I did the following:
I changed the file pastebase64 -> plugin.js..
I changed the following snippet:
line 34:
return Array.prototype.forEach.call(clipboardData.types, function (type, i) {
if (found) {
return;
}
if (type.match(imageType) ){ // || clipboardData.items[i].type.match(imageType)) {
readImageAsBase64(clipboardData.items[i], editor);
return found = true;
}
});
it worked for me....
Related
I'm trying to add a plugin to set a default URL when adding a link.
I followed the instructions here:
https://apostrophecms.org/docs/tutorials/howtos/ckeditor.html
And I ended up with:
// lib/modules/apostrophe-areas/public/js/user.js
apos.define('apostrophe-areas', {
construct: function(self, options) {
var superEnableCkeditor = self.enableCkeditor;
self.enableCkeditor = function() {
superEnableCkeditor();
CKEDITOR.plugins.addExternal('defaulturl', '/modules/my-apostrophe-areas/js/ckeditorPlugins/defaulturl/', 'plugin.js');
};
}
});
and this is my apostrophe-areas/public/js/ckeditorPlugins/defaulturl/plugin.js
CKEDITOR.on( 'dialogDefinition', function( ev ) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if ( dialogName == 'link' ) {
var infoTab = dialogDefinition.getContents( 'info' );
var urlField = infoTab.get( 'url' );
urlField[ 'default' ] = 'www.example.com';
}
});
However, this is not working for me, I tried to do what is suggested here:
Ckeditor plugin configuration not working
But it doesn't worked.
What I've tried and worked was to append the plugin.js file at the end of the plugin.js of the split plugin at the apostrophe-area folder, but I think this is not the correct way to go
Thanks!
I think you can solve the issue two ways:
1. If you want to keep the external plugin file:
Wrap your code according to the API, see e.g. https://sdk.ckeditor.com/samples/timestamp.html and the plugin it references https://sdk.ckeditor.com/samples/assets/plugins/timestamp/plugin.js for an example. You need to use CKEDITOR.plugins.add( 'defaulturl', { init: ... }) in your plugin.js. Not sure if there is anything special to do otherwise as you want to modify the behavior of a CKEDITOR core plugin. That's why it would go with the next option...
2. If you don't need the extra plugin.js:
You can also replace the CKEDITOR.plugins.addExternal() call with the contents of your plugin.js file. I did this to modify the default link target to be _blank:
// /lib/modules/apostrophe-areas/public/js/user.js
'use strict';
// See https://apostrophecms.org/docs/tutorials/howtos/ckeditor.html and
apos.define('apostrophe-areas', {
construct: function(self, options) {
var superEnableCkeditor = self.enableCkeditor;
self.enableCkeditor = function enableCkeditor() {
superEnableCkeditor();
// https://docs.ckeditor.com/ckeditor4/latest/guide/dev_howtos_dialog_windows.html
CKEDITOR.on('dialogDefinition', function redefineDialog(ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName === 'link') {
var targetTab = dialogDefinition.getContents('target');
var targetField = targetTab.get('linkTargetType');
targetField.default = '_blank';
}
});
};
}
});
Good luck!
Recently wpapi updated and ther is no option to send posts or images via post api but maybe some errors in code. Here is half workable code for uploading images and post data to wordpress.
#!/usr/bin/env node
var moveFrom = __dirname+"/gallery/galleryfolder/year/";
var fs = require( 'fs' );
var path = require( 'path' );
// In newer Node.js versions where process is already global this isn't necessary.
var process = require( "process" );
// Loop through all the files in the temp directory
fs.readdir( moveFrom, function( err, files ) {
var moveFrom = __dirname+"/gallery/galleryfolder/year/";//setting up directory for file upload
if( err ) {
console.error( "Could not list the directory.", err );
process.exit( 1 );
}
files.forEach( function( file, index ) {
// Make one pass and make the file complete
var fromPath = path.join( moveFrom, file );
// var toPath = path.join( moveTo, file );
//starting getting filenames
fs.stat( fromPath, function( error, stat ) {
if( error ) {
console.error( "Error stating file.", error );
return;
}
if( stat.isFile() ){
console.log( "'%s' is a file.",moveFrom+file );
var fullpath=moveFrom+file;
var filename=file.replace('.jpg', '');//specifying the fullpath to the images on node server or in file system.
var WPAPI = require("wpapi");
var wp= new WPAPI({
endpoint: 'http://localhost/wordpress/wp-json/',
username: 'admibn',
password: '1234567890'
});
// let category=moveFrom.match('/[^/]*$/');
wp.posts().create({
title: filename,
content: '',
if ( err ) {
// handle err
}
}).then(function( post ) {
// Create the media record & upload your image file
var filePath = fullpath;
return wp.media().file( filePath ).create({
title: filename,
post: post.id
}).then(function( media ) {
// Set the new media record as the post's featured media
return wp.posts().id( post.id ).update({
featured_media: media.id
});
});
});
}
} );
} );
} );
The code is uploading images and posts text to the wordpress site.The first part of the code (node fs library)is working fine but the second i cannot even manage to debug or output the errors to console. I am a littele bit new to node.js. Please advice.
Solved. Thnx for the attention. Recently WPapi requires 2 plugins to be installed: JSON Basic Authentication and http://v2.wp-api.org/ wpapi plugin. I have edited code if someone else will be in search of batch wp uploading solution from pc(texts and images ). Also the post switcher plugin saves time that needed for custom post gateway.
I am trying to embed into the editor an uploaded image. My filebrowserUploadUrl is /api/m/image and it seems to be working fine. After I clicked the Send it to the Server button, there is a script error as follows:
image.js?t=H4PG:19 Uncaught TypeError: Cannot read property 'setCustomData'
of undefined
at textInput.onChange (image.js?t=H4PG:19)
at textInput.n (ckeditor.js:10)
at textInput.CKEDITOR.event.CKEDITOR.event.fire (ckeditor.js:12)
at textInput.setValue (ckeditor.js:619)
at textInput.setValue (ckeditor.js:545)
at a.q (ckeditor.js:841)
at ckeditor.js:31
at Object.callFunction (ckeditor.js:31)
at image?CKEditor=editor&CKEditorFuncNum=1&langCode=en:1
The last line in the above is the call to filebrowserUploadUrl and the response from that is:
window.parent.CKEDITOR.tools.callFunction(1, '/images/bulletins.jpg', 'Uploaded successfully');
The Uploaded successfully message is shown in an alert. The Preview box under Image Info tab is not updated. But if I clicked OK to close the dialog, the image (bulletins.jpg) is embedded in the editor alright.
What could be causing the error and how do I fix it?
I found what was causing it. I wanted to set the default tab when the insert image dialog is launched to the Upload tab. I use the following code:
CKEDITOR.on("dialogDefinition", function(ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName === "image") {
dialogDefinition.onShow = function() {
this.selectPage("Upload");
}
}
});
When the above code is used, that error happens when a file is uploaded.
I was having same issue, and after using proposed solution from vikram, editor was generating error while pasting image link into the text. Better approach here, not to completely override default onShow method, but add more to it in the following way:
CKEDITOR.on('dialogDefinition', function (ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName == 'image') {
var oldOnShow = dialogDefinition.onShow;
var newOnShow = function () {
this.selectPage('Upload');
this.hidePage('Link');
// change tabs order
$('a[title=Upload].cke_dialog_tab').css('float', 'left');
};
dialogDefinition.onShow = function () {
oldOnShow.call(this, arguments);
newOnShow.call(this, arguments);
};
}
});
After debugging a lot I found a solution on this.
If you will see onChange method of txtUrl textBox in image.js
See line number 507 and 513
you will understand cause of this error.
at line 513 setCustomData is called.
original.setCustomData( 'isReady', 'false' );
CKEDITOR.on("dialogDefinition", function(ev) {
var dialogName = ev.data.name;
//current editor
var editor = ev.editor;
var dialogDefinition = ev.data.definition;
if (dialogName === "image") {
dialogDefinition.dialog.on('show', function(e){
var dialogBox = e.sender;
//This line is the answer of your question
//this line will get rid of the error setCustomData
dialogBox.originalElement = editor.getSelection().getStartElement();
this.selectPage("Upload");
});
}
});
I'm using OBJ format, but OBJ is too heavy to download it, for that reason, I would like to upload the OBJ files in Zip, then, the viewer unzip it and call the function OBJLoader.
Do you know what's the best way to do it?
Thanks,
Rafa
Problem solved by :
1) add jszip script to your page
2) Goto OBJMTLLoader.js (about line 33) and place these 10 lines to uncompress the zip (assuming that the file.zip contains only the file.obj) inside the loader.load function
loader.load( url, function ( text ) {
if (url.split('/').pop().split('.')[1] == 'zip'){
//- Uncompress url e.g. http:// .... / PTERO.zip -> PTERO.obj -
// zip should contain only one file !
// uncompression object
var new_zip = new JSZip();
// uncompress
new_zip.load(text);
// the single file name convention
filename = url.split('/').pop().split('.')[0] + ".obj";
// get the file content as text
text = new_zip.file(filename).asText();
}
//--------------------------------------------
var object = scope.parse( text );
3) Add these 2 lines in the XHRLoader in Three.js so that it loads binary when extension is zip:
THREE.XHRLoader.prototype = {
constructor: THREE.XHRLoader,
load: function ( url, onLoad, onProgress, onError ) {
var scope = this;
var cached = scope.cache.get( url );
if ( cached !== undefined ) {
if ( onLoad ) onLoad( cached );
return;
}
var request = new XMLHttpRequest();
request.open( 'GET', url, true );
// ---------- for zipped obj ------------
if ( url.split('.').pop() == 'zip')
request.responseType = "arraybuffer";
//--------------------------------------
request.addEventListener( 'load', function ( event ) {
scope.cache.add( url, this.response );
...
Beyond what is the best solution, it's really senseless that you can't pass a buffer to the loader instead of a URL. I needed that too, so I used #jimver's answer but changing the JSZip methods because they were deprecated. Use this instead (in my case I made the changes on file STLLoader.js because I was working with STL files, but this applies to any loader):
THREE.STLLoader.prototype = {
constructor: THREE.STLLoader,
load: function ( url, onLoad, onProgress, onError ) {
var scope = this;
var loader = new THREE.XHRLoader( scope.manager );
loader.setResponseType( 'arraybuffer' );
loader.load( url, function ( text ) {
if (url.split('/').pop().split('.')[1] == 'zip') {
JSZip.loadAsync(text)
.then(function (zip) {
return zip.file(Object.keys(zip.files)[0]).async("arrayBuffer");
})
.then(function success(text) {
onLoad( scope.parse( text ) );
}, function error(e) {
console.log(e);
});
}
else {
onLoad( scope.parse( text ) );
}
}, onProgress, onError );
},
// rest of the code
I would try using jszip
JSZipUtils.getBinaryContent('path/to/objzipped.zip', function(err, data) {
if(err) {
throw err; // or handle err
}
var zip = new JSZip(data);
var objData = zip.file("objfile.obj").asText();
var object3D = new OBJLoader().parse(objData); // ...
});
In case you really want to use zip in the browser,
I think you could go with unzip a downloaded file with zip.js and parse the result with OLBJLoader.parse.
Decoding gzip is built into the browsers. You dont need any client side code at all. All you need to do is make sure the server is setting the right MIME type.
See: What 'Content-Type' header to use when serving gzipped files?
I was following the steps written in this topic: CKEditor, AJAX Save
I tried to fire a custom 'saved.ckeditor' event if anybody press the AjaxSave button. But I did not succeeded.
ckeditor/plugins/ajaxsave/plugin.js:
(function(){
var saveCmd =
{
modes : { wysiwyg:1, source:1 },
exec : function( editor )
{
editor.fire('saved.ckeditor');
$(editor).trigger('saved.ckeditor', editor.getData());
alert(editor.getData());
}
}
var pluginName = 'ajaxsave';
CKEDITOR.plugins.add( pluginName,
{
init : function( editor )
{
var command = editor.addCommand( pluginName, saveCmd );
command.modes = { wysiwyg : !!( editor.element.$.form ) };
editor.ui.addButton( 'AjaxSave',
{
label : editor.lang.save,
command : pluginName,
className : 'cke_button_save'
});
}
});
})();
If I get or set the editor data in the function, the get and set events will automatically be fired. But I could not even fire a 'getData.ckeditor' event manually.
Any tips?
An other thing: how can I disable the button if the editor's content haven't changed since the last save (it is not dirty)?
I have a workaround.
Outside I can listen to the set event:
window.onload = function()
{
var ckparams={width: 500, height: 400, resize_enabled:false, extraPlugins: 'ajaxsave',toolbar:[['AjaxSave','Source','-','Bold','Italic','Underline','-','Undo','Redo','-','Find','Replace','-','SelectAll','-','SpellChecker','Scayt','-','About']]};
//CKEDITOR.replace('editor', ckparams);
var editor = $('textarea.editor').ckeditor(ckparams);
$(editor).bind('setData.ckeditor', function() {
//do what I want
});
};
...and when the button is pressed, set the data with its current value:
var saveCmd =
{
modes : { wysiwyg:1, source:1 },
exec : function( editor )
{
editor.setData(editor.getData());
}
}
This way at least an event is fired...
But I shold be careful when I manually set the content from outside...
try this, you need to finish the exec() function
(function() {
var saveCmd = {
modes:{wysiwyg:1,source:1 },
readOnly: 1,
exec: function( editor ) {
var data = editor.getData();
console.info(data);
}
};
var pluginName = 'ajaxSave';
// Register a plugin named "save".
CKEDITOR.plugins.add( pluginName, {
lang: 'af,ar,bg,bn,bs,ca,cs,cy,da,de,el,en-au,en-ca,en-gb,en,eo,es,et,eu,fa,fi,fo,fr-ca,fr,gl,gu,he,hi,hr,hu,is,it,ja,ka,km,ko,ku,lt,lv,mk,mn,ms,nb,nl,no,pl,pt-br,pt,ro,ru,sk,sl,sq,sr-latn,sr,sv,th,tr,ug,uk,vi,zh-cn,zh', // %REMOVE_LINE_CORE%
icons: 'save', // %REMOVE_LINE_CORE%
init: function( editor ) {
// Save plugin is for replace mode only.
if ( editor.elementMode != CKEDITOR.ELEMENT_MODE_REPLACE ) return;
editor.ui.addButton && editor.ui.addButton( 'Save', {
label: editor.lang.save.toolbar,
command: pluginName,
toolbar: 'document,10'
});
}
});
})();
and don't forget to enable the plugin in config.js
config.extraPlugins = 'ajaxSave';
You can edit the functionality of the regular save button to do what you want:
html:
<textarea id="CKEditor1"></textarea>
javascript:
<script>
// Need to wait for the ckeditor instance to finish initialization
// because CKEDITOR.instances.editor.commands is an empty object
// if you try to use it immediately after CKEDITOR.replace('editor');
CKEDITOR.on('instanceReady', function (ev) {
// Create a new command with the desired exec function
var overridecmd = new CKEDITOR.command(editor, {
exec: function(editor){
// Replace this with your desired save button code
alert(editor.document.getBody().getHtml());
}
});
// Replace the old save's exec function with the new one
ev.editor.commands.save.exec = overridecmd.exec;
});
CKEDITOR.replace('CKEditor1');
</script>