When I add html content to CKEditor (source-code mode) and then save the html content, some tags are removed - for example <strong> or <h4>.
I am using the default YAML Konfiguration and add my own one:
# EXT:my_ext/Configuration/RTE/Default.yaml
imports:
# Import default RTE config (for example)
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Processing.yaml" }
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Base.yaml" }
- { resource: "EXT:rte_ckeditor/Configuration/RTE/Full.yaml" }
# Import the image plugin configuration
- { resource: "EXT:rte_ckeditor_image/Configuration/RTE/Plugin.yaml" }
editor:
config:
# RTE default config removes image plugin - restore it:
removePlugins: null
removeButtons:
- Anchor
extraAllowedContent: 'a[onclick]'
toolbarGroups:
- { name: basicstyles, groups: [ basicstyles, align, cleanup ] }
- { name: styles }
stylesSet:
- { name: "Rote Schrift", element: "span", attributes: { class: "highlighted red"} }
- { name: "Button", element: "a", attributes: { class: "btn"} }
- { name: "Checkliste", element: "ul", attributes: { class: "check-list"} }
toolbarGroups:
- { name: links, groups: ['MenuLink', 'Unlink', 'Anchor'] }
externalPlugins:
typo3image: { allowedExtensions: "jpg,jpeg,png,gif,svg" }
typo3link: { resource: "EXT:rte_ckeditor/Resources/Public/JavaScript/Plugins/typo3link.js", route: "rteckeditor_wizard_browse_links" }
processing:
HTMLparser_db:
denyTags: null
Furthermore I have the following TS page config (not sure if this is used by TYPO3 - it's a setup of the old RTE editor):
RTE.default.enableWordClean.HTMLparser {
allowTags = a,b,blockquote,br,div,em,h2,h3,h4,h5,h6,hr,i,img,li,ol,p,span,strike,strong, ...
I finally found the solution, by comparing my Custom.yaml with typo3\sysext\rte_ckeditor\Configuration\RTE\Full.yaml
To allow more tags I had to add the new tags in the following sections of my Yaml file:
editor:
config:
allowTags:
- link
- strong
- h4
processing:
allowTags:
- link
- strong
- h4
Related
Consider I have an Azure Function App with some app settings and some functions created via the following YAML task:
- task: AzureResourceManagerTemplateDeployment#3
displayName: 'deploy resources'
inputs:
azureResourceManagerConnection: azureResourceManagerConnection
subscriptionId:subscriptionId
resourceGroupName: rg
location:location
csmFile: template.bicep
csmParametersFile:parameters.json
deploymentMode: 'Incremental'
Let’s say I modified app settings.
If I run the above YAML task in Incremental deployment mode, does that recreate the Azure Function App with the modified app settings and functions or does it just update the app settings - Function app and existing functions stay the same?
Here is how my template.bicep looks like:
var appSettings = [
{
name: 'WEBSITE_ADD_SITENAME_BINDINGS_IN_APPHOST_CONFIG'
value: 1
}
{
name: 'WEBSITE_ENABLE_SYNC_UPDATE_SITE'
value: 1
}
{
name: 'SCM_TOUCH_WEBCONFIG_AFTER_DEPLOYMENT'
value: 0
}
{
name: 'APPINSIGHTS_INSTRUMENTATIONKEY'
value: reference(resourceId(appInsightsResourceGroup, 'microsoft.insights/components/', appInsightsName), '2015-05-01').InstrumentationKey
}
{
name: 'AzureWebJobsStorage'
value: 'DefaultEndpointsProtocol=https;AccountName=${storageAccountName};AccountKey=${listKeys(resourceId(storageAccountResourceGroup, 'Microsoft.Storage/storageAccounts', storageAccountName), providers('Microsoft.Storage', 'storageAccounts').apiVersions[0]).keys[0].value}'
}
{
name: 'WEBSITE_CONTENTAZUREFILECONNECTIONSTRING'
value: 'DefaultEndpointsProtocol=https;AccountName=${storageAccountName};AccountKey=${listKeys(resourceId(storageAccountResourceGroup, 'Microsoft.Storage/storageAccounts', storageAccountName), providers('Microsoft.Storage', 'storageAccounts').apiVersions[0]).keys[0].value}'
}
{
name: 'FUNCTIONS_WORKER_RUNTIME'
value: 'dotnet'
}
{
name: 'FUNCTIONS_EXTENSION_VERSION'
value: '~4'
}
{
name: 'WEBSITE_MAX_DYNAMIC_APPLICATION_SCALE_OUT'
value: maximumElasticWorkerCount
}
{
name: 'appConfigurationEndpoint'
value: appConfigurationEndpoint
}
{
name: 'membershipStorageAccountName'
value: '#Microsoft.KeyVault(SecretUri=${reference(membershipStorageAccountName, '2019-09-01').secretUriWithVersion})'
}
{
name: 'membershipContainerName'
value: '#Microsoft.KeyVault(SecretUri=${reference(membershipContainerName, '2019-09-01').secretUriWithVersion})'
}
]
var stagingSettings = [
{
name: 'WEBSITE_CONTENTSHARE'
value: toLower('functionApp-staging')
}
{
name: 'AzureFunctionsJobHost__extensions__durableTask__hubName'
value: '${solutionAbbreviation}compute${environmentAbbreviationStaging}'
}
{
name: 'AzureWebJobs.StarterFunction.Disabled'
value: 1
}
]
var productionSettings = [
{
name: 'WEBSITE_CONTENTSHARE'
value: toLower('functionApp')
}
{
name: 'AzureFunctionsJobHost__extensions__durableTask__hubName'
value: '${solutionAbbreviation}compute${environmentAbbreviation}'
}
{
name: 'AzureWebJobs.StarterFunction.Disabled'
value: 0
}
]
module functionAppTemplate 'functionApp.bicep' = {
name: 'functionAppTemplater'
params: {
name: '${functionAppName}'
kind: functionAppKind
location: location
servicePlanName: servicePlanName
dataKeyVaultName: dataKeyVaultName
dataKeyVaultResourceGroup: dataKeyVaultResourceGroup
secretSettings: union(appSettings, productionSettings)
}
dependsOn: [
servicePlanTemplate
]
}
module functionAppSlotTemplate 'functionAppSlot.bicep' = {
name: 'functionAppSlotTemplate'
params: {
name: '${functionAppName}/staging'
kind: functionAppKind
location: location
servicePlanName: servicePlanName
dataKeyVaultName: dataKeyVaultName
dataKeyVaultResourceGroup: dataKeyVaultResourceGroup
secretSettings: union(appSettings, stagingSettings)
}
dependsOn: [
functionAppTemplate
]
}
functionapp.bicep
resource functionApp 'Microsoft.Web/sites#2018-02-01' = {
name: name
location: location
kind: kind
properties: {
serverFarmId: resourceId('Microsoft.Web/serverfarms', servicePlanName)
clientAffinityEnabled: false
httpsOnly: true
siteConfig: {
use32BitWorkerProcess : false
appSettings: secretSettings
}
}
identity: {
type: 'SystemAssigned'
}
}
functionAppSlot.bicep
resource functionAppSlot 'Microsoft.Web/sites/slots#2018-11-01' = {
name: name
kind: kind
location: location
properties: {
clientAffinityEnabled: true
enabled: true
httpsOnly: true
serverFarmId: resourceId('Microsoft.Web/serverfarms', servicePlanName)
siteConfig: {
use32BitWorkerProcess : false
appSettings: secretSettings
}
}
identity: {
type: 'SystemAssigned'
}
}
Your Function App will not be recreated. Only the state or values which does not match the desired state are changed.
This means, if you change a setting e.g. FUNCTIONS_EXTENSION_VERSION in the bicep file, it will be changed in the Function App settings.
https://learn.microsoft.com/en-us/azure/azure-resource-manager/templates/overview
Repeatable results: Repeatedly deploy your infrastructure throughout the development lifecycle and have confidence your resources are deployed in a consistent manner. Templates are idempotent, which means you can deploy the same template many times and get the same resource types in the same state. You can develop one template that represents the desired state, rather than developing lots of separate templates to represent updates.
I use Strapi with Nuxt and i18n to produce a static site in English and Danish.
The site should be able to produce URLs like these:
mysite.com/
mysite.com/da
mysite.com/news/a-story
mysite.com/da/nyheder/en-historie
mysite.com/cases/a-case
mysite.com/da/case/en-case
I have a pages folder structure like this
_cases
_slug.vue <-- for case pages
_news
_slug.vue <-- for news pages
_slug.vue <-- for other pages
index.vue <-- for my frontpage
I use the following code to list links for nice URLs that renders just fine
h2 case
router-link(:to="localePath({ name: 'cases-slug', params: { cases: $t('slugs.cases'), slug: aCasePage.slug }})") {{aCasePage.title}}
h2 news
router-link(:to="localePath({ name: 'news-slug', params: { news: $t('slugs.news'), slug: aNewsPage.slug }})") {{aNewsPage.title}}
The problem is, that no matter if I click and go to a news page or a case page, I get served the same _cases -> _slug.vue component.
Looking into the .nuxt/router.js file, the routes seems to be generated correct:
routes: [{
path: "/da",
component: _1ea75fec,
name: "index___da"
}, {
path: "/da/:slug",
component: _2214a27c,
name: "slug___da"
}, {
path: "/da/:cases/:slug?",
component: _3a25cd77,
name: "cases-slug___da"
}, {
path: "/da/:news/:slug?",
component: _3988eeb6,
name: "news-slug___da"
}, {
path: "/",
component: _1ea75fec,
name: "index___en"
}, {
path: "/:slug",
component: _2214a27c,
name: "slug___en"
}, {
path: "/:cases/:slug?",
component: _3a25cd77,
name: "cases-slug___en"
}, {
path: "/:news/:slug?",
component: _3988eeb6,
name: "news-slug___en"
}],
How can I avoid Nuxt mixing up these routes? and the page Vue-components matched to them?
can you share you solution for the _slug pages data fetching ?
I am using findOne (slug,_locale:i18n.locale) from strapi .it's not working
so still hold on this issue
So I'm getting a routing problem whenever I use nuxt ssr with serverless. When I use either deploy to AWS lambda or use serverless-offline it generates the url prefixed with /{stage}, but nuxt can't seem to handle this and either throws 403, 404 or 500 errors because the routes to static files aren't prefixed with /{stage}.
I have tried adding {stage} to the public path on build, the results in a 404 because now the static file path needs to prefixed with another /{stage}. If I go directly to {stage}/{stage}/_nuxt/{file} it works.
build: {
publicPath: '/{stage}/_nuxt'
}
So looking around I found that I can update the router base to the below
router: {
base: '/{stage}'
}
but now the file only loads if its {stage}/{stage}/{stage}/_nuxt/{file} and removing the publicPath code above doesn't make it work either.
And this is for the static files, when it comes to the actual routes the homepage set at '/' either works but any other pages don't because the nuxt-links to them aren't prefixed with /{stage} or if I add the prefix to the base I get a Cannot GET / error when I visit /{stage}.
I have tried many different ways of doing this such as using express however I have had no luck and any tutorials that I found online are at least 2 years old and the github repos have the same problem. The closest thing I have found on stackoverflow that is somewhat similar to what I have is here but this is for a static site.
Anybody have any ideas? Below is the code for the serverless.yaml, handler.js, nuxt.js, nuxt.config.js.
Github Repo
serverless.yaml
service: nuxt-ssr-lambda
provider:
name: aws
runtime: nodejs12.x
stage: ${env:STAGE}
region: eu-west-1
lambdaHashingVersion: 20201221
environment:
NODE_ENV: ${env:STAGE}
apiGateway:
shouldStartNameWithService: true
functions:
nuxt:
handler: handler.nuxt
events:
- http: ANY /
- http: ANY /{proxy+}
plugins:
- serverless-apigw-binary
- serverless-dotenv-plugin
- serverless-offline
custom:
apigwBinary:
types:
- '*/*'
handler.js
const sls = require('serverless-http')
const binaryMimeTypes = require('./binaryMimeTypes')
const nuxt = require('./nuxt')
module.exports.nuxt = sls(nuxt, {
binary: binaryMimeTypes
})
nuxt.js
const { Nuxt } = require('nuxt')
const config = require('./nuxt.config.js')
const nuxt = new Nuxt({ ...config, dev: false })
module.exports = (req, res) =>
nuxt.ready().then(() => nuxt.server.app(req, res))
nuxt.config.js
module.exports = {
telemetry: false,
head: {
htmlAttrs: {
lang: 'en'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
css: [
],
plugins: [
],
components: true,
buildModules: [
'#nuxtjs/tailwindcss',
],
modules: [
],
router: {
base: '/prod'
},
build: {
}
}
Are you passing it as
<p>Path: {{ $route.path }}</p>
<NuxtLink to="/">Back to Mountains</NuxtLink>
if Yes then it should work else try going with redirect('/{stage}/_nuxt')
for an if statement put this inside else , I think it should work.
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 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.