I know this question has been asked 1000 times, but after 6 hours of research I still couldn't find any solution.
Unfortunately, I am bound to a CMS that's using ckeditor. I don't like WYSIWYG editors at all, but I have to deal with it. I want the editor to not touch ANY of my code, doesn't matter if it's wrong or not, if I place block elements into inline elements, etc.
This is the config I am using atm:
CKEDITOR.editorConfig = function( config ) {
config.language = 'en';
config.allowedContent = true;
config.height = 600;
config.startupMode = 'source';
// Prevent CK from removing empty HTML-tags
$.each(CKEDITOR.dtd.$removeEmpty, function (i, value) {
CKEDITOR.dtd.$removeEmpty[i] = false;
});};
Well, with these settings the editor still seems to alter the code. For instance, it realigns <a> or <span> tags and just adds new code. This is so incredible annoying. I know it's not the purpose of the editor to behave like a pure webdev editor, but there must be a way to configure it somehow to just leave the code completely alone, right? Can anyone tell me what settings I need to add in order to achieve this?
there must be a way to configure it somehow to just leave the code completely alone, right?
Wrong.
Libraries like this make use of the contentEditable feature provided by browsers.
The browser will take the HTML, parse it into a DOM, and then provide an API to manipulate it. Later, that DOM can be serialised back to HTML, but this is entirely disconnected from the original HTML. Everything will have been normalised.
Related
It seems that CKeditor automatically initializes on any element that has contenteditable=true. It even says so on their Guides page, but with no instructions on whether this can be avoided.
This makes me lose a lot of control over the content on my page. I have some content that should be editable with the rich text editor, and some other that shouldn't. But this makes CKeditor initialize on elements that don't even expect rich text, and they don't get saved as rich text in the database... So I need to get rid of it from the interface, but I don't know how...
Can I tell it to avoid automatic initialization?
The answer to the question is No.
The alternate solution, is to omit the contenteditable=true, then after initializing the CKEDITOR, set the contenteditable attribute on the required element from Javascript.
Try
CKEDITOR.disableAutoInline = true;
(See this answer from another question)
So iv been reading about peoples problems with tiny MCE "messing up" code. I understand it isn't, but I have a very minor problem that is become a major problem.
Im trying to add a simple object tag to one of my CMS pages. I need the object type to be "text/html" but whenever I save the page it converts this to "application/x-shockwave-flash"
I don't want to turn off the tinyMCE cleanup option as by the sounds of things this is a really bad thing to do.
So is there a way to stop it changing just the type attribute?
I have tried adding the code to a CMS widget and adding the widget to the page but this get the same altered result.
This thread (Object tag is not working) seems similar, but simply changing the type isn't working for me as it is automatically changing back to flash upon save.
The url i am trying to load looks like this...
(http://www.domain.com/animations/embed/one/o-t-t-d?player_width=100%&player_height=100%) I have been told that this will return flash if it is available or html if not.
Im assuming that because i'm saving the page on a PC with flash available its recognising and changing the type.
Any help appreciated.
You can edit the file js/mage/adminhtml/wysiwyg/tiny_mce/setup.js to make this happen.
Look for the settings array (around line 100). Add 'extended_valid_elements' there, like this;
var settings = {
...
extended_valid_elements: 'object[type]',
...
};
This way, TinyMCE will know the type attribute is valid and won't change it.
I'm using Uploadcare for uploading and storing images, which is working.
However, it appears CKEditor 4.1.1 is choking on these images.
Adding an image via CKEditor.
The initial placement of the image is as expected. However, when the data is saved, CKEditor is clearly doing something weird, prior to committing the data.
In several tests, during the formatting and rearrangement of the HTML, CKEditor is stripping out the "style" image attribute and the first opening double quote, which I can see in the text data on the database itself.
This behavior is entirely reproducible.
Editing an image via CKEditor.
Initially, the image looks fine. But when I view the source, the HTML for the image is sanitized to render as text, and not to render as an image object.
Disabling 3rd party Plugins.
As mentioned previously, I'm using Uploadcare, in addition to Word Count & Char Count. I disabled both Plugins, but this didn't change anything.
Thoughts.
During the saving process, I merely cleanse the data via the $this->db->escape() function in CodeIgniter, which cannot to circumvented, or the data won't commit and I receive an error.
Just to be clear, during testing, the errors occured with any type of image object; either added manually, or via Uploadcare.
In my view page, I have:
<script type="text/javascript">
CKEDITOR.replace('note', {
allowedContent: true
});
</script>
Which — according to the documentation — "will disable the filter (data will not be filtered, all features will be activated)."
However, it doesn't work and it's doing exactly the same as before; stripping out the style attribute by name and converting the HTML to their regular textual equivalents.
If I chose to define something specifically, that turns almost everything off, including the plugins, and — strangely enough — the very thing I've written a rule for:
<script type="text/javascript">
CKEDITOR.replace('note', {
allowedContent: {
'img': {
styles: 'height, width'
}
}
});
</script>
So I have no idea what's going on.
I've also tried the advice in a thread on their forums where someone is experiencing exactly the same problem as me, but neither methods work, which leads me to believe this is a problem particular to the CKEditor itself, and not the treatment of data in and of itself.
If anyone has any advice as to how I can coax CKEditor into handing images, I'd be happy for any advice.
Setting allowedContent: true for 99.9% would stop CKEditor from stripping images if you did that correctly.
Your allowedContent setting (2nd code sample) is incorrect. It does not allow src and alt attributes. Image without src will be stripped by CKEditor as invalid. So you should have at least:
allowedContent: {
img: {
attributes: '!src, alt', // src is required
styles: 'height, width'
}
}
So point 1. or 2. should work - I did that a lot of times, so I'm pretty sure of that. Thus, I think that you have a 2nd issue with your server breaking something.
The problem here (on top of needing allowedContent: true or properly set up rules) is CodeIgniter's XSS filtering. Before we get access to $_POST (or $_GET/$_REQUEST) CI has already ran filtering over this data and in this case ruined it. This setting can't be overridden on a per-controller basis as it's already run before the controller is loaded.
So you can either disable it altogether in /application/config/config.php (not recommended)
$config['global_xss_filtering'] = FALSE;
Or a less heavy handed approach (but still not ideal) manually disabling it on certain pages (i.e. my example turning it off on all pages under /admin/help). Also in /application/config/config.php.
$config['global_xss_filtering'] = TRUE;
# Override the XSS filtering on /admin/help
if (preg_match("/^\/admin\/help/", $_SERVER["QUERY_STRING"])) {
$config['global_xss_filtering'] = FALSE;
}
I had the exact issues you were having, and this has solved the issue for me.
There's a webpage with something annoying on it which I'd like to hide every time I visit it. I thought a good way to do this would be to make an add-on for Firefox.
I've never done this before, and came across the web-based Firefox add-on builder. I'm not too sure where to go from here though. I know it should be quite easy to do this though. I suppose all I need to do is check if a block with a certain id is used on a website, and if it is, then delete/hide it from my view.
Is that the best way to do about this? If not, what do you suggest? If so, can you give me any tips to help me accomplish this?
Right, I got it:
Using just a standalone Firefox Add-On use the following code:
exports.main = function() {
var pageMod = require("page-mod");
pageMod.PageMod({
include: "*.ca",
contentScriptWhen: 'end',
contentScript: 'document.getElementById("DIVID").style.visibility="hidden";'
});
};
Just replace DIVID with whatever you want.
Similarly, in Greasemonkey, just add this to the script:
document.getElementById('DIVID').style.visibility='hidden';
The only reason I didn't want to use Greasemonkey is that it isn't as easy to share. But it's convenience can't be beat!
Install the latest FF
Install the latest AdBlock Plus
Go to the website right click on specific element and then Inspect Element(Q)
Right bottom corner there is Hide with ABP(AdBlock Plus) button, click on it, then Add Element Hiding Rule
You can just use GreaseMonkey which is a very useful plugin for firefox. You can write your own script in JavaScript which operates on the page.
However, chances are that someone might have already written a script for the site in question that you can install from the http://userscripts.org/ repository.
In well-formed HTML, any particular value for the id attribute should occur at most once in a document. If your mission is to seek and destroy a recurring phenomenon, it might be labeled (if at all) with a class. This is the case with Twitter's "promoted tweets", for example.
var promotedTweets = document.getElementsByClassName("promoted-tweet");
for (k=0; k<promotedTweets.length; k++) {
promotedTweets[k].parentNode.removeChild(promotedTweets[k]);
}
Wouldn't Adblock Plus do the trick here? You can feed it an element hiding rule (based on the class or ID attribute) on any given website, if I recall correctly.
I used the up-and-coming jpm tool to write this, and incorporated the suggestions here. It is specifically for filtering certain div tags here on StackOverflow—how fitting. The code and the xpi add-on file is at Github.
An alternative in Firefox is to create a userContent.css file and add css which hides the div.
See https://superuser.com/a/319322/ and note the comment which points out that "Starting with Firefox 69, you need to set the toolkit.legacyUserProfileCustomizations.stylesheets preference to true".
I am sure this is on here already...
I want to be able to disable autocomplete for some CMS generated form fields with some frontend javascript code, preferably Prototype but neat javascript will do if it has no cross-browser problems.
I have ids for my boxes and I am not using some clever 'prototype autocomplete' (that seems to stuff the Google results on this). Regular browser autocomplete is what I want to turn off and not for the entire form.
Knew I would find it as soon as I asked:
$$('.MacGuffin')[1].setAttribute('autocomplete', 'off');
$$('.MacGuffin')[7].setAttribute('autocomplete', 'off');
That is specifying elements by class rather than id.