I've searched here and CKEditor docs under the Advanced Content Filter, but it's really confusing to me.
All I want to do is paste some simple Flexslider code into a CKEditor box, but when it saves, the class statement is stripped, leaving just the ul.
I can find lots of ideas for removing unwanted tags, but nothing to say allow class 'slider' on a ul element.
In my config.js, I tried:
CKEDITOR.editorConfig = function( config )
{
config.allowedContent = 'ul(slider)';
}
Also, tried extraAllowedContent, but no joy. Does anyone know how to do this please?
This is enough:
CKEDITOR.replace( 'editor', {
extraAllowedContent: 'ul(slides)'
} );
You can check it on:
http://jsfiddle.net/6FnRf/
Copy that HTML, paste into editor and switch to source mode:
You can see that slides class was preserved when pasting and this means that it won't be stripped by CKEditor when you load the data (switch between source and WYSIWYG modes what equals to loading data). So if you're losing this class then something outside CKEditor is not working correctly.
Related
I'm using the Easy Admin Bundle for a mini Symfony app.
The bundle comes with the trix editor for the text_editor field input.
The editor is pretty cool and offers a code feature that encapsulates the paragraph in <pre> tags. The issue is I'm using highlightjs on frontend to make my code sections pretty. Now highlightjs requires code be encapsulated in <pre><code> ...code here... </code></pre> tags which is a bummer.
Is there any way to control in which tags are code sections encapsulated with the trix editor. In my specific case from <pre> to <pre><code>?
I had the exact same problem, and unfortunately I couldn't figure out how to update the Trix source code to add the code element in the pre element and also add the class. I asked the question here, and I'm going to open an issue to see if the nice folks over at Trix would consider adding this functionality.
So, I put together a little hack that will transform the pre elements when I display them to the user. Here is what the code looks like:
const applyFormattingToPreBlocks = function () {
const preElements = this.showPostBody.querySelector('.trix-content').querySelectorAll('pre');
preElements.forEach(function(preElement) {
const regex = /(?!lang\-\\w\*)lang-\w*\W*/gm;
const codeElement = document.createElement('code');
if (preElement.childNodes.length > 1) {
console.error('<pre> element contained nested inline elements (probably styling) and could not be processed. Please remove them and try again.')
}
let preElementTextNode = preElement.removeChild(preElement.firstChild);
let language = preElementTextNode.textContent.match(regex);
if (language) {
language = language[0].toString().trim();
preElementTextNode.textContent = preElementTextNode.textContent.replace(language, '');
codeElement.classList.add(language, 'line-numbers');
}
codeElement.append(preElementTextNode)
preElement.append(codeElement)
})
};
I also wrote up a blog post that goes into more detail about what this code is doing. I using Rails 6 and the post has an example of what the formatting looks like. Let me know if you have questions.
I would like to extract the HTML content created inside a tinyMCE editor to display it without any tinyMCE editor (displaying directly on a page).
I'm aware of tinyMCE's getcontent() function. But is there another function/parameter/plugin that I oversee with which you can extract it as selfrunning HTML code? There are many tinyMCE classes inside the content and it would be hard work to gather them or to convert them back into CSS styles.
So either an extraction with the tinyMCE specific classes would be great or any (automated) conversion from classes to CSS styles would be great. Or ist there any other way I oversee?
There is a format option that can be used to get pure HTML out of tinyMCE content:
tinymce.get('yourEditorId').getContent( {format : 'html'} );
I would like to know how to select a default class of a CSS for applying it in tinymce, following this example :
tinyMCE.init({
mode : "textareas",
editor_selector : "textarea_number_1",
content_css : "css/custom_content.css",
default-style : 'NameOfMyClass'; <- here is my problem ! Please, help me :)
}
I have 3 texteareas in my page, only one CSS file, but I want to select a different default class for each textarea.
This is only for the display in the TinyMCE editor, in the php post treatment I delete the 'p' tags from the retrieved content.
Thanks for any suggestion, and if I'm not clear enough, I can explain any point of my problem.
The easy way to do this is to use different configurations: http://www.tinymce.com/tryit/multiple_configs.php
The other way is to have one default object holding settings for all editors and before you use tinyMCE.execCommand('mceAddControl', false, 'your_textarea_id'); you merge the default object with another object holding the additional settings. See for more info also Tinymce how to reduce options for multiple instances
Problem: When a user copies a load of code from another website and pastes it into CKEditor it includes a load of inline styles which refer to the style of the content on the website it was copied from. When the pasted content is then saved and shown on my website it doesn't use my styles but the copied inline ones which conflict.
I've had a look through the CKEditor documentation, and to be honest I don't find the documentation to narrow down to what I'm looking for. There is a paste function available which removes formatting but this is an optional button in the menu, whereas most users will just post into the main large area, so its pretty worthless.
Main Question: is there a way to set CKEditor to strip formatting when pasting?
Ah, I found the answer:
// Apply editor instance settings.
CKEDITOR.config.forcePasteAsPlainText = true;
I am trying to configure tinymce to not allow css styles in style attribute.
I just want to allow one style which is text-decoration. Here is a similar problem
http://tinymce.moxiecode.com/punbb/viewtopic.php?pid=76101 .
The valid_styles option is not present and I dont want to use regexp on my content, coz there got to be some or the other option with tinymce. I searched through the tinymce forums but couldn't find any proper solution.
Can anybody help?
What you need to do is tu use the paste plugin and do some prefiltering when performing copy+paste into the editor.
Use the paste_preprocess setting in your init, using your own cleanup mechanism here:
paste_preprocess : function(pl, o) {
o.content = custom_function_modify(o.content);
},