I have multiple (6) editables with two different classes (.html_edit_simple, .html_edit_advanced) on website and I want to divide them by class and each to have its own contentHandler settings.
But no matter what I try, only the default settings are loaded.
The ones defined under window.Aloha.settings.contentHandler.handler.sanitize don't apply at all.
The settings code that I use is the following:
(function(window, undefined) {
if (window.Aloha === undefined || window.Aloha === null) {
window.Aloha = {};
}
window.Aloha.settings = { sidebar: { disabled: true } };
window.Aloha.settings.contentHandler = {
insertHtml: [ 'word', 'generic', 'oembed', 'sanitize' ],
initEditable: [ 'sanitize' ],
getContents: [ 'blockelement', 'sanitize', 'basic' ],
sanitize: 'relaxed', // relaxed, restricted, basic,
allows: {
elements: ['strong', 'em', 'i', 'b', 'blockquote', 'br', 'cite', 'code', 'dd', 'div', 'dl', 'dt', 'em', 'i', 'li', 'ol', 'p', 'pre', 'q', 'small', 'strike', 'sub', 'sup', 'u', 'ul', 'h1', 'h2', 'h3', 'h4', 'h5', 'img', 'video', 'audio']
},
handler: {
generic: {
transformFormattings: false
},
sanitize: {
'.html_edit_simple': { elements: [ 'b', 'i', 'strong', 'em', 'strike', 'u', 'a' ] },
'.html_edit_advanced': { elements: [ 'b', 'i', 'strong', 'em', 'strike', 'u', 'a', 'br', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'sub', 'sup', 'ul', 'ol', 'li', 'div', 'img', 'video', 'audio' ] }
}
}
}
})(window);
I made a console log just before Aloha.ready and everything is loaded correctly.
So where could be the issue.
Related
I'm using CKEditor 4 react in my Next.js project. I have a problem in my dropdown toolbars when editor switched on full screen mod. My problem is as follows :
on clicking on the font-size drop down in toolbar the options appear and I can select a size (It works correctly as expected)
I click on "Maximize" button in toolbar and the screen size change
Now I repeat step1 again but options of font-size drop down doesn't appear (Not expected behavior)
<CKEditor
data={this.state.static_page.content}
onChange={this.onEditorChange}
config = {{
allowedContent : true ,
embed_provider: '//ckeditor.iframe.ly/api/oembed?url={url}&callback={callback}',
extraPlugins :`justify,font,colorbutton,smiley,pagebreak,iframe,find,save,exportpdf,preview,print,selectall,forms,copyformatting,showblocks,uploadfile,uploadimage,autoembed,embed`,
filebrowserBrowseUrl: photo_url,
filebrowserUploadUrl: photo_url,
toolbar : [
{ name: 'document', items: [ 'Source', '-', 'Save', 'NewPage', 'ExportPdf', 'Preview', 'Print', '-', ] },
{ name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'editing', items: [ 'Find', 'Replace', '-', 'SelectAll', '-'
// , 'Scayt'
] },
'/',
{ name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton'
// , 'HiddenField'
] },
'/',
{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike',
// 'Subscript',
// 'Superscript',
'-', 'CopyFormatting', 'RemoveFormat'
] },
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote',
// 'CreateDiv',
'-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-',
// 'BidiLtr', 'BidiRtl',
// 'Language'
] },
{ name: 'links', items: [ 'Link','Unlink', 'Anchor'
// ,'autolink'
] },
{ name: 'insert', items: [ 'Image','Embed','Auto-embed', 'Iframe', 'Table', 'HorizontalRule', 'Smiley','SpecialChar', 'PageBreak' ] },
'/',
{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
{ name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
],
language: "fa",
uiColor :'#b9a168',
// extraAllowedContent : 'button(*)[*]' ,
extraAllowedContent :true,
copyFormatting_allowRules :true,
copyFormatting_allowedContexts:true,
contentsLanguage :'fa',
contentsLangDirection : 'rtl',
// justifyClasses :['AlignLeft', 'AlignCenter', 'AlignRight', 'AlignJustify' ],
pasteFilter:'semantic-content',
removeEmpty : false,
}}
// onPaste ={this.onEditorPaste}
// onBeforeLoad={console.log("onBeforeLoad")}
/>
I test this on a react project and it worked correctly, but in next project it doesn't work correctly so I think this problem related to my framework.
The v-select that I change the option is triggering the other v-select automatically, the operation is to be independent between them, the issue that I am unable to get this code right. Someone with more experience than I could help me with?
<v-data-table
:headers="headers"
:items="res"
item-key="Name"
class="elevation-23"
>
<template v-slot:item.path="{ item }">
<v-select
v-model="cSel"
:items="item.path"
></v-select>
</template>
</v-data-table>
data () {
return {
expanded: [],
singleExpand: false,
cSel: 'A',
res: [
{
fullName: 'name 1',
med: 'med 1',
startDate: 'start date 1',
path: ['A', 'B', 'C', 'D'],
},
{
fullName: 'name 2',
med: 'med 2',
startDate: 'start date 2',
path: ['A', 'B', 'C', 'D'],
},
],
totalRes: 0,
search: '',
loading: false,
options: {
page: 1,
itemsPerPage: 40,
},
headers: [
{ text: 'Name', value: 'fullName' },
{ text: 'Med', value: 'med' },
{ text: 'Start Date', value: 'startDate' },
{ text: 'Create ', value: 'path', width: '200' },
],
}
You're using only one cSel variable for all items. That's why one change affects every select component.
You could either include the variable in every item. So you'd have item.cSel.
Or you convert cSel to an object and access it with an identifier:
cSel: {}
<v-select
v-model="cSel[item.fullName]"
:items="item.path"
></v-select>
I used the fullName property in this case. As long as that's unique this solution should work but it would probably be better to have an id property.
Looking at these docs: https://ckeditor.com/docs/ckeditor4/latest/features/styles.html
So adding a style set should go something like this, but I can't get the H2 or H3 items to appear in my toolbar:
CKEDITOR.stylesSet.add( 'my_styles', [
// Block-level styles
{ name: 'Blue Title', element: 'h2', styles: { 'color': 'Blue' } },
{ name: 'Red Title' , element: 'h3', styles: { 'color': 'Red' } },
// Inline styles
{ name: 'CSS Style', element: 'span', attributes: { 'class': 'my_style' } },
{ name: 'Marker: Yellow', element: 'span', styles: { 'background-color': 'Yellow' } }
] );
CKEDITOR.editorConfig = function( config ) {
config.extraPlugins = 'firstname,MediaEmbed,justify,image';
//config.forcePasteAsPlainText = true;
config.extraAllowedContent = 'iframe[*]';
config.toolbar = 'Normal';
config.toolbar_Normal = [
{ name: 'basicstyles', items: [ 'Bold', 'Italic','Underline','Strike' ] },
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', 'JustifyLeft', 'JustifyCenter', 'JustifyRight' ] }
];
config.toolbar_Emails = [
{ name: 'basicstyles', items: [ 'Bold', 'Italic','Underline','Strike' ] },
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', 'JustifyLeft', 'JustifyCenter', 'JustifyRight' ] }
];
config.removeDialogTabs = 'link:advanced;link:target';
config.stylesSet = 'my_styles';
};
As mentioned in the docs
Open the config.js file available in your ckeditor directory, and edit the config.format_tags entry in the following way to display the text formatting toolbar.
// Enable all default text formats:
config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div';
// Enable a limited set of text formats:
config.format_tags = 'p;h1;h2;pre;div';
My initialization:
function init_video_summernote(id_val,my_placeholder,my_width,my_height)
{
$( id_val ).summernote('destroy');
$( id_val ).summernote(
{
placeholder: my_placeholder,
//height: my_height,
//width: my_width,
toolbar: [
['style', ['style']],
['font', ['bold', 'italic', 'underline', 'clear']],
['fontname', ['fontname']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
['table', ['table']],
['view', ['fullscreen', 'codeview']],
['help', ['help']]
],
lineHeights: ['1.0', '1.2', '1.4', '1.5', '1.6', '1.8', '2.0', '3.0'],
fontNames: [
'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New',
'Helvetica Neue', 'Impact', 'Lucida Grande',
'Tahoma', 'Times New Roman', 'Verdana'
],
styleTags: ['p', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
lang: {
'en-US': {
font: {
bold: 'Bold',
italic: 'Italic',
underline: 'Underline',
clear: 'Remove Font Style',
height: 'Line Height',
name: 'Font Family'
},
image: {
image: 'Picture',
insert: 'Insert Image',
resizeFull: 'Resize Full',
resizeHalf: 'Resize Half',
resizeQuarter: 'Resize Quarter',
floatLeft: 'Float Left',
floatRight: 'Float Right',
floatNone: 'Float None',
shapeRounded: 'Shape: Rounded',
shapeCircle: 'Shape: Circle',
shapeThumbnail: 'Shape: Thumbnail',
shapeNone: 'Shape: None',
dragImageHere: 'Drag image here',
dropImage: 'Drop image',
selectFromFiles: 'Select from files',
url: 'Image URL',
remove: 'Remove Image'
},
link: {
link: 'Link',
insert: 'Insert Link',
unlink: 'Unlink',
edit: 'Edit',
textToDisplay: 'Text to display',
url: 'To what URL should this link go?',
openInNewWindow: 'Open in new window'
},
table: {
table: 'Table'
},
hr: {
insert: 'Insert Horizontal Rule'
},
style: {
style: 'Style',
normal: 'Normal',
blockquote: 'Quote',
pre: 'Code',
h1: 'Header 1',
h2: 'Header 2',
h3: 'Header 3',
h4: 'Header 4',
h5: 'Header 5',
h6: 'Header 6'
},
lists: {
unordered: 'Unordered list',
ordered: 'Ordered list'
},
options: {
help: 'Help',
fullscreen: 'Full Screen',
codeview: 'Code View'
},
paragraph: {
paragraph: 'Paragraph',
outdent: 'Outdent',
indent: 'Indent',
left: 'Align left',
center: 'Align center',
right: 'Align right',
justify: 'Justify full'
},
color: {
recent: 'Recent Color',
more: 'More Color',
background: 'Background Color',
foreground: 'Foreground Color',
transparent: 'Transparent',
setTransparent: 'Set transparent',
reset: 'Reset',
resetToDefault: 'Reset to default'
},
shortcut: {
shortcuts: 'Keyboard shortcuts',
close: 'Close',
textFormatting: 'Text formatting',
action: 'Action',
paragraphFormatting: 'Paragraph formatting',
documentStyle: 'Document Style'
},
history: {
undo: 'Undo',
redo: 'Redo'
}
}
}
} );
}
When I execute this code to get the html to store in a subsequent db insert.
var video_overview = $('#upl_overview_id').summernote('code');
console.log('OVERVIEW:'+video_overview);
This snippit of code is called from within a Dropzone sending event function.
I get the following in the console output
OVERVIEW:[object Object]
Instead of the text to store in the DB any ideas what I am missing here?
Never mind this was caused by including summernote.js more than once
I have the problem, that the "fontsize" field is not shown at my own custom configuration.
My YAML File looks like this:
# 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" }
# Add configuration for the editor
# For complete documentation see http://docs.ckeditor.com/#!/api/CKEDITOR.config
editor:
config:
contentsCss: ["EXT:rte_ckeditor/Resources/Public/Css/contents.css", "EXT:myext/Resources/Public/css/rte.css"]
format_tags: "p;h1;h2;h3;h4;h5;pre;div"
stylesSet:
# block level styles
- { name: "align-left", element: ['h1', 'h2', 'h3', 'h4','h5', 'h6', 'p', 'td', 'th'], attributes: { 'class': 'align-left' }}
- { name: "align-center", element: ['h1', 'h2', 'h3', 'h4','h5', 'h6', 'p', 'td', 'th'], attributes: { 'class': 'align-center' }}
- { name: "align-right", element: ['h1', 'h2', 'h3', 'h4','h5', 'h6', 'p', 'td', 'th'], attributes: { 'class': 'align-right' }}
- { name: "align-justify", element: ['h1', 'h2', 'h3', 'h4','h5', 'h6', 'p', 'td', 'th'], attributes: { 'class': 'align-justify' }}
- { name: "Interview", element: ['h5', 'p', 'span'], attributes: { 'class': 'ecx-interview' }}
- { name: 'Underline whole element', element: 'p', attributes: { 'class': 'p-carreer' } }
- { name: "Tiny Paragraph", element: "p", attributes: { 'class': 'p-tiny' }}
# Inline styles
- { name: 'Underline whole element', element: 'p', attributes: { 'class': 'p-carreer' } }
- { name: "Important", element: "span", attributes: { 'class': 'c-important' }}
- { name: "Tiny Word", element: "span", attributes: { 'class': 'c-tiny' }}
# List styles
- { name: 'Underline whole element', element: 'p', attributes: { 'class': 'p-carreer' } }
- { name: 'UL Style 2', element: 'ol', attributes: { 'class': 'ul-style2' } }
- { name: 'No UL Bullets', element: 'ul', attributes: { 'class': 'no-bullet' } }
# Link styles
- { name: "External Link", element: "a", attributes: { class: "external-link"} }
- { name: "Arrow-link", element: "a", attributes: { class: "ecx-explore-arrow-link more d-flex align-items-center"} }
# Form styles
- { name: "Table Responsive", element: "table", attributes: { 'class': 'contenttable table-responsive' } }
toolbar:
- [ 'Link', 'Unlink', 'Anchor', 'Table', 'SpecialChar', 'CodeSnippet', 'Youtube' ]
- [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ]
- [ 'NumberedList', 'BulletedList']
- [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord' ]
- [ 'Undo', 'Redo', 'RemoveFormat', 'ShowBlocks' ]
- "/"
- [ 'Format', 'Styles','Size' ]
- [ 'Bold', 'Italic', 'Underline', 'Blockquote', 'Subscript', 'Superscript']
- [ 'Source', 'Maximize', 'About']
extraPlugins:
- justify
- specialchar
- showblocks
- codesnippet
- font
justifyClasses:
- align-left
- align-center
- align-right
- align-justify
codeSnippet_theme: 'monokai_sublime'
removePlugins:
- image
processing:
allowTags:
- iframe
I've tried to import some other .yaml (full, processing, ... ) Files or to include the official font plugin from ckeditor but nothing work.
I'm using TYPO3 8.7.16.
The configuration looks like this in the backend: TYPO3 Backend custom configuration ckeditor
Thank you!
Using your configuration:
toolbar:
- [ 'Format', 'Styles','FontSize' ]
Instead of
toolbar:
- [ 'Format', 'Styles','Size' ]
See:
CKEditor 4 - how to add font family and font size controls to the toolbar