I am using CKEditor4-react and want to add EasyImage plugin but without using cloudservice URL. As an alternate I have a folder hosted on server where it should upload the image. But it doesn't work.
I followed the documentation to use EasyImage plugin -
https://ckeditor.com/docs/ckeditor4/latest/examples/easyimage.html
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-cloudServices_uploadUrl
and as per it "cloudServices_uploadUrl" is mandatory for EasyImage plugin.
Can I provide an alternate URL which is hosted on our server so the images can be saved and fetched from there?
The old version of CKEditor4 was used in one of our legacy apps built in Knockout.js where it is being used in a similar way consuming the ckeditor/plugin/simpleuploads.
But i didn't find any such plugin in the current CKEditor4.12 version
config: {
toolbar: [
{ name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike'] },
{ name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
{ name: 'insert', items: ['Link', 'EasyImageUpload', 'Table'] },
{ name: 'styles', items: ['Styles', 'FontSize', 'Font', 'Format', 'TextColor', 'BGColor'] },
{ name: 'paragraph', items: ['NumberedList', 'BulletedList', 'Blockquote', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] }
],
height: 600,
width: 950,
extraPlugins: 'easyimage',
removePlugins: 'image',
//cloudServices_uploadUrl: 'https://33333.cke-cs.com/easyimage/upload/', //this is a demo ckeditor cloud service URL
cloudServices_uploadUrl: '/app/Data' //this is folder hosted on our server which is accessible as localhost/app/data
},
Easy Image plugin for CKEditor 4 only supports Cloud Services for uploading images at the moment, so cloudServices_uploadUrl is mandatory and should point to CKEditor Cloud Services endpoint as the documentation says.
If you would like to upload and store images on your own server you may use CKFinder, your custom upload adapter or look for any 3rd-party solution which satisfy your needs.
Related
I am trying to include langage locale support from my React components in Storybook using "react-intl", I added the following global types in "preview.js" as list of Languages supported to appear in the Storybook toolbar:
export const globalTypes = {
locale: {
title: 'Locale',
description: 'Internationalization locale',
toolbar: {
icon: 'globe',
items: [
{ value: 'en', right: '🇺🇸', title: 'English' },
{ value: 'de', right: '🇩🇪', title: 'Deutsch' },
],
dynamicTitle: true,
},
},
};
When I switch the langages it does not work always the default langage is showed, I need to know the code that can be used to implement the langage switcher and make it work with the code implemented within our React application in IdwIntlProvider.. I have to implement the functionality without using the react-intl Addon.
I'm currently designing a website with React where the user will work with a text editor. The text editor will already have text in it. The user will make some changes to the text and submit it. I would like to add a button that will show the user the differences between the original text and his new text, like Git but down to individual characters.
I'm currently trying to use Quill for that. I've found a lovely solution to my problem, but it's written in plain JavaScript. I've tried translating it to React by setting the Quill objects in the state:
const [quill_old, set_quill_old] = React.useState(new Quill('#old', {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
placeholder: 'Compose an epic...',
theme: 'snow' // or 'bubble'
}))
const [quill_new, set_quill_new] = React.useState(new Quill('#new', {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
placeholder: 'Compose an epic...',
theme: 'snow' // or 'bubble'
}))
const [quill_diff, set_quill_diff] = React.useState(new Quill('#diff', {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
placeholder: 'Compose an epic...',
theme: 'snow' // or 'bubble'
}))
but when initializing the code it gets stuck on the "findDiff" function, on this line:
var oldContent = quill_old.getContents();
and returns an error:
TypeError: Cannot read property 'length' of undefined
Where "undefined" is "quill_old".
When trying to run the page without the function, the page shows properly, but I get multiple errors in the console like this:
quill Invalid Quill container #old
Does somebody know how to properly implement this solution in React? Or has a suggestion on some other library I can use?
Thank you for your time
I integrated React Froala Editor to my website.
It's a simple project and I want to show paragraph select drop down.
But it doesn't work.
Is it related to version?
this.state = {
model: ``,
tags: [],
config: {
theme: 'foobar',
heightMax: 800,
height: 800,
toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'fontFamily', 'fontSize', '|', 'paragraphStyle', 'paragraphFormat', 'align', 'undo', 'redo', 'html']
}
}
<FroalaEditorComponent
model={this.state.model}
onModelChange={this.onChange}
config={this.state.config}
/>
It seems that plugins are missing. Try to import plugins in your component:
import 'froala-editor/js/plugins.pkgd.min.js';
The issue might be with the froala version you are using.
Please update Froala version using
npm update froala-editor
All the options are available in the trail version too.
The same options worked for me with v3.1.0, check it below.
Froala editor
I'm using cakephp 3.7. I tried to get tinymce working, by 2 differents ways but it doesn't work. First I tried to adapte the former cakephp 2 steps to make it work as shown in the cakephp documentation here "https://bakery.cakephp.org/2012/04/11/Helper-TinyMCE-for-CakePHP-2.html", it worked in a previous project where i used cakephp 2, but here it didn't work. Secondly I followed an other tutorial suggesting toenter code here use tinymce inside cakephp 3.7 's plugin folder just like a plugin, but still not working. Any help about how to install tinymce for cakephp 3.7?
N.B: I got my cakephp 3.7 through composer as well as all the other plugins i used, except tinymce that i can't get with composer.
I'm having this error : Method App\View\Helper\TinymceHelper::domId does not exist [CORE/src/View/Helper.php, line.
Thanks in advance.
I downloaded tinymce and set it up in the webroot/js folder
In the AppController.php I added public $helpers = ['tinymce.tinymce'];
In the view where to display the tinymce editor I added in the relevant text area
<?php echo $this->Tinymce->input('content',
array('label' =>
'Content'),array('language'=>'en'),'bbcode');
?>
This my the head in tinymceHelper.php
use Cake\View\Helper;
use Cake\View\StringTemplateTrait;
class TinymceHelper extends Helper
{
// Take advantage of other helpers
public $helpers = array('Js', 'Html', 'Form');
...}
Or may be you also know another content editor more relevant to cakephp 3.7. Thanks you guys !
I switched from TinyMCE to CKEDITOR. I don't have any kind of helper, just:
load the JS in the layout (echo $this->Html->script('https://cdn.ckeditor.com/4.8.0/full/ckeditor.js');)
put relevant classes (e.g. wysiwyg_simple or wysiwyg_advanced) on inputs as required (echo $this->Form->input('description', ['class' => 'wysiwyg_simple']);)
have an initialization function as below, called from onReady (and also whenever dynamic content that might contain a textarea is loaded into the page)
if (typeof CKEDITOR !== 'undefined') {
for(name in CKEDITOR.instances) {
CKEDITOR.instances[name].destroy(true);
}
CKEDITOR.replaceAll(function (textarea, config) {
if (jQuery(textarea).hasClass('wysiwyg_advanced')) {
config.toolbar = [
{
name: 'clipboard',
items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo']
},
{name: 'editing', items: ['SpellChecker', 'Scayt']},
{name: 'links', items: ['Link', 'Unlink', 'Anchor']},
{name: 'insert', items: ['Image', 'Table', 'HorizontalRule', 'SpecialChar', 'PageBreak']},
'/',
{
name: 'basicstyles',
items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat']
},
{
name: 'paragraph',
items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv',
'-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock']
},
'/',
{name: 'styles', items: ['Format', 'Font', 'FontSize']},
{name: 'colors', items: ['TextColor', 'BGColor']},
{name: 'tools', items: ['Maximize', 'ShowBlocks', '-', 'About']},
{name: 'document', items: ['Source']}
];
} else if (jQuery(textarea).hasClass('wysiwyg_simple')) {
config.toolbar = [
{name: 'clipboard', items: ['Cut', 'Copy', 'PasteText', '-', 'Undo', 'Redo']},
{
name: 'basicstyles',
items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat']
},
{name: 'paragraph', items: ['NumberedList', 'BulletedList']},
{name: 'styles', items: ['Format']}
];
} else {
return false;
}
config.resize_dir = 'both';
});
}
After a certain time of research and with the suggestion of #Greg Schmidt, I got the Ckeditor not as a plugin but inside the js folder.
1- I refered to it in the AppController.php with
public $helpers = ['CkEditor.Ck'];
2- In the media.ctp I called the Ckeditor in the head of the file by "
<?php echo $this->Html->script('ckeditor/ckeditor');?>
(This is very mandatory because without this call cakephp 3.x will only display a
blank textarea).
3- In the relevant form element where to load the ckeditor I used the syntax
enter image description here
<?= echo $this->Ck->input('Media_Content', array('class', 'ckeditor); ?>
4- In the relevant layout I added
Html->script('https://cdn.ckeditor.com/4.8.0/full/ckeditor.js'); ?> just as Greg Schmidt suggested.
And the Ckeditor shows up !!!
Only in production, when i try to insert image in CKEditor i get the Error:
[CKEDITOR.dialog.openDialog] Dialog Image failed when loading definition
and when i try to add tables i get:
[CKEDITOR.dialog.openDialog] Dialog table failed when loading definition.
The other options of editor work correctly and the version in bower.json is: "ckeditor": "#full/4.5.4",
My toolbar configuration is:
$ckEditorProvider.setDefaults({
toolbar: [
{
name: 'editing',
items: ['Find', 'Replace', '-', 'SelectAll', '-', 'Scayt', '-']
},
{
name: 'insert',
items: ['Image','Table']
},
'/',
{
name: 'styles',
items: ['Bold', 'Italic', 'Underline', 'Styles', 'Format', 'Font', 'FontSize']
}
]
});
CKEDITOR.basePath = location.href.substr(0, location.href.indexOf(location.hash)) + 'bower_components/ckeditor/';
CKEDITOR.plugins.basePath = location.href.substr(0, location.href.indexOf(location.hash)) + 'bower_components/ckeditor/plugins';
}
Does anyone have a clue why this happens?