I created a new Symfony4 project and installed EasyAdmin bundle (which works fine).
I tried to integrate CKeditor following the documentation : https://symfony.com/doc/master/bundles/EasyAdminBundle/integration/ivoryckeditorbundle.html
Here is my easyadmin.yaml:
easy_admin:
entities:
TestPage:
class: App\Entity\TestPage
form:
fields:
- { property: 'content', type: 'fos_ckeditor', type_options: { 'config': { 'toolbar': [ { name: 'styles', items: ['Bold', 'Italic', 'BulletedList', 'Link'] } ] } }}
here my fos_ckeditor.yaml :
twig:
form_themes:
- '#FOSCKEditor/Form/ckeditor_widget.html.twig'
fos_ck_editor:
input_sync: true
default_config: base_config
configs:
base_config:
toolbar:
- { name: "styles", items: ['Bold', 'Italic', 'BulletedList', 'Link'] }
The problem is it's still the regular textarea that is showing, not the ckeditor rich text one.
I tried to clear the cache, to add "- '#FOSCKEditor/Form/ckeditor_widget.html.twig'" in twig.yaml but i still can't see the ckeditor toolbar.
Anyone has an idea on what i'm missing ?
Thanks!
vkhramtsov on git has just advised me to add the "#FOSCKEditor/Form/ckeditor_widget.html.twig" form theme to "easyadmin:design: form_theme:list" in "config/packages/easy_admin.yaml" like this:
easy_admin:
design:
form_theme: # Both themes are needed for ckeditor integration
- "#EasyAdmin/form/bootstrap_4.html.twig"
- "#FOSCKEditor/Form/ckeditor_widget.html.twig"
This solved the problem for me. I think the docs need to be updated. The place they suggest to put the form template presently (twig:form_themes) does not work.
Related
I'm using FOS CKEditor in a Symfony 4 project.
In my fos_ck_editor.yml config file, i configured an editor like this :
fos_ck_editor:
input_sync: true
default_config: newsletter_content
configs:
newsletter_content:
title: false
language: fr
toolbar:
- [ 'Bold', 'Italic', 'Underline', 'Link', 'Unlink', 'TextColor' ]
colorButton:
colors: '#DE1F35'
I want to use the configuration variable config.colorButton_colors as described in ck editor documentation but i don't know how to do that in the yaml config file.
Add the following line under "config:"
colorButton_colors: "F49800,B9B9B9,75A75A"
I create custom ckeditor 5 build in https://ckeditor.com/ckeditor-5/online-builder/ (based on "decoupled component" type), at the end i download zip with files. But what I am supposed to do next how to import it in main.js / package.js and finnaly to component ?
All materials I was able to find are https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs-v3.html , got decoupled-document preset build working, but wanted to add image resize, so created custom build and am stuck at that point.
Tnx for any response.
This post is maybe longer but its super easy 5min done.
[2022 updated, still works, just config moved in another file, also people may return there because of higher Vue version ckeditor5 toolbar disappear and update/reinstall is needed]
This example is for full document type of ckeditor 5, decoupled-document is almost everything You need, just it lacks image-resize, to add it go to https://ckeditor.com/ckeditor-5/online-builder/ click it all way and add image-resize or all other fun stuff (You do not need premium Ckfinder, but You probably need CKFinder upload adapter for images uplad which is free), and download zip file, do not forget to pick same type in step 1 as one you will use/install.
Install (like in classic guide - https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs-v3.html)
npm install --save #ckeditor/ckeditor5-vue #ckeditor/ckeditor5-build-decoupled-document
(if here because of re-install, just remove package.json #ckeditor lines and run above install command again)
In main.js
import CKEditor from '#ckeditor/ckeditor5-vue';
createApp(App)
.use(router)
.use(CKEditor)
.mount("#app");
In your component
import DocumentEditor from '#ckeditor/ckeditor5-build-decoupled-document';
Now add config to data, You can find this config generated inside files you got from online-builder generator its copy/paste so do not freak out :) . You can find it in /src/ckeditor.js in defaultConfig, if you do not set it its possible You'll see an warning about missing "toolbar" options. Do not copy what you see below, use your custom generated config, its only for illustration :
data: function () {
return{
editorConfig: {
ckfinder: {
uploadUrl: 'https://page.com/api/uploadckeditor'
},
toolbar: {
items: [
'heading',
'|',
'bold',
'italic',
'link',
'bulletedList',
'numberedList',
'|',
'outdent',
'indent',
'|',
'imageUpload',
'blockQuote',
'insertTable',
'mediaEmbed',
'undo',
'redo',
'alignment',
'codeBlock',
'fontBackgroundColor',
'fontColor',
'fontFamily',
'fontSize',
'highlight',
'horizontalLine',
'htmlEmbed',
'imageInsert',
'pageBreak',
'removeFormat',
'strikethrough',
'underline',
'style'
]
},
language: 'cs',
image: {
toolbar: [
'imageTextAlternative',
'imageStyle:inline',
'imageStyle:block',
'imageStyle:side',
'imageStyle:alignLeft',
'imageStyle:alignRight',
'imageStyle:alignCenter',
'imageStyle:alignBlockLeft',
'imageStyle:alignBlockRight',
'linkImage'
]
},
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells',
'tableCellProperties',
'tableProperties'
]
},
fontFamily: {
options: [
'default',
'indieflowerregular',
'Arial, sans-serif',
'Verdana, sans-serif',
'Trebuchet MS',
'Apple Color Emoji',
'Segoe UI Emoji',
'Segoe UI Symbol',
]
},
licenseKey: ''
}
};
}
Now use it in component html
<ckeditor :editor="editor" #ready="onReady" v-model="editorData" :config="editorConfig"></ckeditor>
Decoupled component ckeditor package need #ready="onReady" othervise it will not initialize (classic do not need this)
here is method :
methods: {
onReady( editor ) {
// Insert the toolbar before the editable area.
editor.ui.getEditableElement().parentElement.insertBefore(
editor.ui.view.toolbar.element,
editor.ui.getEditableElement()
);
},
Ok now You have almost everything done just last magic thing to do .
In files you downloaded go to /build folder and COPY all the files into
"node_modules#ckeditor\ckeditor5-build-decoupled-document\build" and override initial decoupled-document. This is key thing to do, even thought it sounds pretty horrible.
Bonus : I wanted to have also image upload so added to config
**ckfinder: {
uploadUrl: 'http://mypage/api/uploadckeditor'
},**
Here is php side implementation its just basic one wit no error handling
$uploaddir = '../www/adminUpload/';
$uploadfile = $uploaddir . basename($_FILES['upload']['name']);
if (move_uploaded_file($_FILES['upload']['tmp_name'], $uploadfile)) {
//$this->sendJson(array("message"=>"sucess"));
} else {
//$this->sendJson(array("message"=>"failed"));
}
$returnArray = array();
$returnArray["uploaded"] = true;
$returnArray["url"] = "http://www.mypage.com/adminUpload/".$_FILES['upload']['name'];
header('Content-type: application/json');
$this->sendJson($returnArray);
$this->terminate();
For last 2 rows they are Nette php framework specific, just send out $returnArray as json response.
Here is how I integrated CKEDITOR with Vue3.js
Install required packages
npm install --save #ckeditor/ckeditor5-vue #ckeditor/ckeditor5-build-classic
main.ts
import CKEditor from '#ckeditor/ckeditor5-vue'
const app = createApp(App)
app.use( CKEditor ).mount('#app')
Then in your component where you wnat to use ckeditor
<template>
<ckeditor :editor="editor" v-model="data.description"></ckeditor>
</template>
<script>
import {onMounted, reactive, computed} from "vue"
import ClassicEditor from '#ckeditor/ckeditor5-build-classic'
export default{
name:'Add',
setup() {
//....
const data = reactive({
description: '',
})
return {
data,
editor: ClassicEditor
}
}
}
</script>
enter code here
I faced a problem image uploading inside ckeditor5-build-classic,
for image uploading I'm using Node.js server and S3, here is how returned the json response from Node.js server, uploaded flag is more important:
exports.upload_file_ckeditor = async(req, res) => {
let obj = {
"uploaded" : true,
"url" : 'http://example.com/upload/xyz.png'
}
return res.send(obj)
}
I have added
- { name: "Data Test", element: "p", attributes: { 'data-test': "test" } }
to my yaml config. I can select data attribute (and see it correct) in editor code. But after saving content elment TYPO3 is also deleting data-tesst="test" from code.
How can I solve this?
Thanks for help!
Martin
buttons:
link:
relAttribute:
enabled: true
targetSelector:
disabled: false
properties:
class:
allowedClasses: 'button, button_hell'
title:
readOnly: false
imports:
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Processing.yaml" }
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Base.yaml" }
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Plugins.yaml" }
editor:
config:
# css definitions for the editor
contentsCss: "EXT:mw_theme/Resources/Public/Css/rte.css"
# can be "default", but a custom stylesSet can be defined here, which fits TYPO3 best
format_tags: "p;h1;h2;h3;h4;h5;h6;pre;address"
stylesSet:
# custom block level style
- { name: "Button", element: "a", attributes: { 'class': "button" } }
- { name: "Test", element: "p", attributes: { 'data-test': "test" } }
toolbar:
- [ 'Format', 'Styles' ]
- [ 'Bold', 'Italic', 'Underline', 'Blockquote', 'Subscript', 'Superscript']
- [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', 'HorizontalRule' ]
- [ 'NumberedList', 'BulletedList']
- [ 'Link', 'Unlink', 'Anchor', 'Table', 'SpecialChar', 'CodeSnippet', 'Youtube' ]
- [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord' ]
- [ 'Undo', 'Redo', 'RemoveFormat', 'ShowBlocks' ]
- [ 'Source', 'Maximize', 'About']
removePlugins:
- image
extraPlugins:
- justify
justifyClasses:
- text-left
- text-center
- text-right
- text-justify
Allow tags
processing:
allowTags:
- dl
- dt
- dd
page ts:
RTE { default { preset = mw_theme } }`
To allow saving data attributes to db from RTE fields, you need to ensure that:
1) RTE (CKEditor) will not strip the attributes. This is configurable using extraAllowedContent. Below is an example how to allow id attributes additionally to the default rule which allows data attributes and classes.
editor:
config:
extraAllowedContent:
- "*(*)[data-*]"
- "*[id]"
If you only need to add data attributes, you don't need the configuration above and can relay on default configuration (from rte_ckeditor/Configuration/RTE/Editor/Base.yaml), as data attributes are allowed by default there.
To test this configuration part, go to your RTE, click on the "view source" button switch back and switch again and see if the attribute is gone.
If it's still there it means your RTE config allows it.
2) then you need to configure PHP side of things - data transformation which happens before data is saved to db. See manual chapter: https://docs.typo3.org/m/typo3/reference-coreapi/master/en-us/ApiOverview/Rte/Transformations/Process.html#transformations-process
Below is an example (taken from RTE yaml preset) of allowing data-abc attribute in transformation (in addition to attributes which are allowed by default).
processing:
allowAttributes: [class, id, title, dir, lang, xml:lang, itemscope, itemtype, itemprop, data-abc]
So in your case you were missing proper configuration on the transformation part.
This depends on a whole lot of factors and a whole lot of your other configuration, but you seem to be. One quite common way, which could work would be to define extraAllowedContent as an additional config setting in your yaml like:
editor:
config:
extraAllowedContent: '*(*)[data-*]'
Or if i understood the other line right, also allow dt/dd/dl:
editor:
config:
extraAllowedContent:
- '*(*)[data-*]'
- dd
- dl
- dt
If the latter is the case, perhaps EXT:rte_ckeditor_dl might be worth a look, in order to get buttons to create that list.
I found solution:
extraAllowedContent:
p[data-test];
I have some problems with integration CKeditor 4 and CKFinder 3 in My Laravel Vue app.
I just want the functionality when I click on "image button" in my Ckeditor - CKFinder window appears and I'm able to upload all needed images.
What problems I have? (a few, but they must be related with each other):
I have that error in my devtools console: "[CKEDITOR] Error code: cloudservices-no-token-url." (I'm supposing that issue must be resolved when I properly integrate CKeditor with CKFinder)
(as WARN in devtools) - " [CKEDITOR] Error code: editor-plugin-conflict. {plugin: "image", replacedWith: "easyimage"} "
"Image Button" in my CKeditor disappeared (ckeck screenshot below):
You can see my Vue component code with config for ckeditor:
...
export default {
components: { VueCkeditor },
data() {
return {
content: '',
config: {
toolbar: [
{ name: 'styles', items : [ 'Styles','Format', 'FontSize' ] },
{ name: 'clipboard', items : ['Undo','Redo' ] },
{ name: 'editing', items : [ 'Scayt' ] },
{ name: 'insert', items : [ 'Image','Table','HorizontalRule','SpecialChar','Iframe' ] },
{ name: 'tools', items : [ 'Maximize' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Strike','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
],
height: 400,
extraPlugins: 'autogrow,uploadimage',
filebrowserBrowseUrl: '/filemanager_storage?type=Files',
filebrowserUploadUrl: '/filemanager_storage/upload?type=Files&_token='+window.Laravel.csrfToken,
},
};
},
...
Other details which may be useful:
I use CKFinder 3 Package for Laravel 5.5+ (https://github.com/ckfinder/ckfinder-laravel-package)
In my ckfinder.php (configurations for CKFinder) I set temporally that code:
$config['authentication'] = function () {
return true;
};
I'm not sure in that paths (in my config object in vue):
filebrowserBrowseUrl: '/filemanager_storage?type=Files',
filebrowserUploadUrl: '/filemanager_storage/upload?type=Files&_token='+window.Laravel.csrfToken,
},
*I created 'filemanager_storage' directory in my 'public' directory
Thanks guys a lot for any help!
I was facing similar issues regarding a ckeditor4.x integration I did recently in an opencart site with php. While it's not the same environment with vue, maybe this could prove useful to you.
Instead of using the easyimage plugin for managing the image upload , I replaced it with the image2 (enhanced image plugin) . After you've downloaded the image2 plugin and placed it under the ckeditor4/plugins/ directory, make sure to add this in your ckeditor instance:
extraPlugins : 'image2',
removePlugins: 'easyimage,cloudservices'
Regarding the urls in the ckeditor instance, while I'm not using the filebrowserBrowseUrl , I've declared the filebrowserUploadUrl as such :
filebrowserUploadUrl: '/path_where_ckfinder_is_installed/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json
While in my case it made the image upload possible, I'm still getting the warning [CKEDITOR] Error code: editor-plugin-conflict. {plugin: "image", replacedWith: "image2"} " This is something that I haven't been able to solve yet, but at least the image upload works in my case with no fuss.
Also, make sure in the config.php of ckfinder that you've declared the BaseUrl and root path for the user files directory, i.e
$config['backends'][] = array(
'name' => 'default',
'adapter' => 'local',
'baseUrl' => $your_file_path,
'root' => '/your_root_dir/' . $your_file_path, // Can be used to explicitly set the CKFinder user files directory.
'chmodFiles' => 0777,
'chmodFolders' => 0755,
'filesystemEncoding' => 'UTF-8'
);
Let me know if this solution suits your case.
I am using TYPO3 8.7.8 and have to provide a javascript link to deactivate Google Analytics.
The link should look like this:
Deactivate Google Analytics
Unfortunately the link doesn't appear in the frontend, that means it's just a normal text inside a <p> tag. However in the backend everything is fine and it shows up as a link there...
Here is my yaml-configuration for the CKeditor:
# Load default processing options
imports:
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Processing.yaml" }
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Base.yaml" }
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Plugins.yaml" }
# Configuration for the editor
# For complete documentation see http://docs.ckeditor.com/#!/api/CKEDITOR.config
editor:
config:
allowedContent: true
linkJavaScriptLinksAllowed: true
contentsCss: ["EXT:rte_ckeditor/Resources/Public/Css/contents.css", "EXT:my_extension/Resources/Public/Stylesheets/styles.css", "EXT:my_extension/Resources/Public/Stylesheets/fonts.css"]
resize_enabled: true
stylesSet:
# block level styles
- { name: "Button Default", element: "a", attributes: { 'class': 'btn btn-default', 'role': 'button', 'aria-pressed': 'true'}}
format_tags: "p;h1;h2;h3;h4;h5;pre"
toolbarGroups:
- { name: styles, groups: [ styles, format ] }
- { name: basicstyles, groups: [ basicstyles ] }
- { name: paragraph, groups: [ list, indent, blocks, align ] }
- { name: links, groups: [ links ] }
- { name: clipboard, groups: [ clipboard, cleanup, undo ] }
- { name: editing, groups: [ spellchecker ] }
- { name: insert, groups: [ insert ] }
- { name: tools, groups: [ table, specialchar ] }
- { name: document, groups: [ mode ] }
justifyClasses:
- text-left
- text-center
- text-right
- text-justify
extraPlugins:
- justify
removePlugins:
- image
removeButtons:
- Anchor
- Underline
- Strike
buttons.:
link.:
queryParametersSelector.:
enabled: true
What am I missing here?
we just run into the same problem - we wrote a small linkhandler for typo3 allowing only the javascript:gaOptOut(); link.
Get it here:
https://www.infoworxx.de/download/ifx_linkhandler_googleAnalytics.zip
Sebastian
That is not a problem of ckeditor but is prohibited by TYPO3 itself to avoid security issues - XSS.
A solution I use is something like this TYPO3 force internal links to cross domain pages to use https in news so that an editor e.g. links to http://ga-output.tld and this will be replaced by the JS link.
You can add a class to your link in ckeditor using the source button (<>).
<a class="gaOptout" href="#">your linked text</a>
and now you just rewrite your function to an onclick event like this:
$('.gaOptout').on('click', function(){
your function
});
This still seems to be an issue in T3 9.5, especially with this Google OptOut Script.
Easy workaround without coding: we cut out the paragraph containing the javascript and put it in a separated html-element. Just cut it out from CKEs Source-view an paste it in a new element. To keep the article in sequence, just cut out the rest of the text an paste it in a new text-element.