When I use the editor and type "test" I get back the following:
"<html data-version="ckeditor"><body><p> </p>
<p><span style="font-family:Arial,Helvetica,sans-serif"><span style="font-size:11pt"><span style="font-size:11pt">test</span></span></span></p>
</body></html>"
The problem is the <p> </p>. I have no idea why its there but it is adding an empty line at the top when the value is saved/opened again.
I have tried various config settings:
config.autoParagraph = false;
config.fillEmptyBlocks = false;
config.enterMode = CKEDITOR.ENTER_DIV;
But none of them work. I cant see why its being added, Its completely unnecessary.
Can anyone tell me how I set it up so they don't get added through the config, if theres a way, or just let me know if there is not.
It's really strange markup which you receive from the CKEditor. I've build some example codepen, where implement standard CKEditor setup. Below editor is button which triggers receiving data from editor.
https://codepen.io/msamsel/pen/GMEqyo/
var editor = CKEDITOR.replace( 'editor' );
editor.getData();
Usually getData method should be used to obtain data from editor.
I hope this example will help. If not then, can you give more info what kind of CKEditor setup do you use and which version?
Related
I have this line in code into a longtext field in ckeditor:
<div style="width:100%"> <canvas id="canvas3"></canvas></div>
but when I save then delete and replace by:
<div style="width:100%"> </div>
so delete all: I use to show graphics. Any idea to solved it?
Thanks
You need to add config.extraAllowedContent = 'canvas[*]{*}(*)'; inside your config.js. Basically none of existing plugins has reported canvas element to Advanced Content Filter (ACF) thus they get removed. This filter lets you decide what tags, attributes, styles and classes can be used inside the editor.
Once you add this, please simply switch to source mode. If canvas are there it means CKEditor is fixed and it no longer removes that tag. If the tag, despite being in editor, still isn't saved in your data base, please check your server-side code for potential HTML filters.
If you wish learn more about ACF, please see:
https://docs.ckeditor.com/ckeditor4/latest/guide/dev_acf.html
https://docs.ckeditor.com/ckeditor4/latest/guide/dev_advanced_content_filter.html
https://ckeditor.com/docs/ckeditor4/latest/guide/dev_disallowed_content.html
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-allowedContent
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-extraAllowedContent
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-disallowedContent
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_filter.html#method-addTransformations
IE 'contenteditable' implemntation is not allowing me to change the cursor property when ever the contenteditable property in CKEditor is set to 'true'(no issue if the contenteditable='false').
Not an issue in chrome in both cases whether the contenteditable is set to true/false.
tried to change it dynamically using the following code but was not successful
var element = $('iframe').contents().find('body.cke_show_borders').get(0);
var elem = CKEDITOR.dom.element.get( element );
elem.setStyle('cursor', 'pointer');
any idea to handle this please?
Thanks.
It is browser native bug.
You can reproduce this issue outside of CKEDITOR with following code:
<body style="cursor:pointer" contenteditable="true">
</body>
I doubt there are any workarounds for this.
The Problem:
I am working on a site where I wanted to use JQTransform to quickly get a good looking form for a contact page. Also, to avoid the customer getting junk, I decided to add reCAPTCHA. I ran into the issue of JQTransform styles for the textbox causing the elements in the reCAPTCHA to be displaced.
It seemed like the type of problem that would have a simple fix but I struggled with it for a while.
I tried the solution at:
JQTransform - Exclude an element from styling?
This did not solve the issue, nor did a few other answers to the "How do you make JQTransform stop JQTransforming an element?" question.
What has produced usable results is adding:
<script type="text/javascript">
var RecaptchaOptions = {
theme: 'clean'
};
</script>
This changes the reCAPTCHA to a format that looks better in the form anyway. But it leaves 2 textbox styles. One that is your normal default textbox and another underneath that is the JQTransform rounded corner, light blue on hover/focus textbox.
Then I added:
$(function () {
$( "#recaptcha_response_field" ).attr('style', 'border: 0px; padding: 5px; solid #3c3c3c; width: 302px;');
});
and this alters the style that reCAPTCHA has for the textbox. Now the textbox looks like the other inputs of the form. I am pretty happy with the result.
(I know you're now asking: "Then why are you here?")
The Question:
Is there a way to have JQTransform ignore any input,checkbox,etc that is in the <form></form> by wrapping those in a div?
If I want to use JQTransform with some other plug-in in the future I would like to be able to just drop it in to a div like:
<div class="donot-jqtransform">
<?php
echo printCaptchaPlugin();
?>
</div>
or
<div class="donot-jqtransform">
<%= PrintPasswordValidationPlugin() >
</div>
That way I don't have to worry about what the code brings into the form and it will work and look as intended. That's the idea of having the abstraction in the first place, right? So if I want to switch out reCAPTCHA with another option, all I do is replace code in the printCaptchaPlugin() function and all should be bacon(good) for any form that uses it.
well i've made a new library - csTransPie – basing it on jqtransform – jqtransform is a great library but it really has many problems
I'm creating regular input fields (css styled) and you won't have those problems
https://github.com/pkoretic/csTransPie
It’s a work in progress but even now it’s better than jqtransform (more than half of the css rewritten, many bugs solved, clean css…)
now you can use it per element with just one class!
all suggestions are welcome!
Sorry if it's bad form to pile in on an old answered question, but I found this as I had the same problem.
I didn't want to add another library to my project, so I amended the jqtransform.js to include this line in the TextArea handler (line 221-ish)
if (textarea.parents().hasClass('jqTransformIgnore')) { return; }
I then just had to add the jqtransformIgnore class to the recaptcha div...
<div class="g-recaptcha jqTransformIgnore" data-sitekey="blahblahblah"></div>
... and that did the trick!
I am using ckeditor on my website to make it easier for users to input HTML.
However, the data I get back from ckeditor is wrapped in <p></p> blocks. (Which I don't want.)
Is there some configuration setting that forces the editor to not wrap the text in anything?
Add the following to your config.js file for CKEditor:
config.enterMode = CKEDITOR.ENTER_BR;
Example:
...
CKEDITOR.editorConfig = function (config)
{
config.enterMode = CKEDITOR.ENTER_BR;
...
};
Details
The configuration setting that controls this behavior is based on what you want to happen when the user presses Enter.
Just in case someone who's new to working with HTML reads this, I'm including some basic explanation of the concepts involved and why a tag will need to be inserted when the Enter key is pressed.
We know that if we enter some text into an HTML document and then put additional text on a new line, the browser won't display the text as two lines, it will ignore any carriage returns and will condense multiple spaces between characters to a single space.
The following HTML:
qwer
tyui
Will be rendered as:
qwer tyui
So the editor needs to insert an HTML tag to tell the browser that it should display the second group of text on a new line.
The configuration setting that controls this is config.enterMode and it offers three options:
1 - Insert paragraph
The default setting creates a paragraph element each time Enter is pressed:
config.enterMode = CKEDITOR.ENTER_P; // inserts `<p>...</p>`
2 - Insert 'div'
You can choose to create a div element instead of a paragraph:
config.enterMode = CKEDITOR.ENTER_DIV; // inserts `<div></div>`
3 - Insert break (the setting you're looking for)
If you prefer to not wrap the text in anything, you can choose to insert a line break tag:
config.enterMode = CKEDITOR.ENTER_BR; // inserts `<br />`
The CKEditor documentation indicates that using the ENTER_BR setting is not recommended:
Note: It is recommended to use the CKEDITOR.ENTER_P setting because of its semantic value and correctness. The editor is optimized for this setting.
Another related setting 'autoParagraph'
There is a second setting that controls a similar situation –config.autoParagraph. How it functions depends on the config.enterMode setting discussed above.
autoParagraph determines whether inline elements such as span are wrapped in the block element (p or div) specified by the enterMode setting. The default is to wrap inline elements, so if you enter a span like this (as HTML):
<span>asdfg</span>
It will be wrapped in a p or div element like this:
<p><span>asdfg</span></p>
or this:
<div><span>asdfg</span></div>
The inline element won't be wrapped if you set this to false or if you set enterMode to CKEDITOR.ENTER_BR.
The CKEditor documentation includes this note about config.autoParagraph:
Note: Changing the default value might introduce unpredictable usability issues.
Even more settings
There are three more settings that are somewhat related to this subject:
config.fillEmptyBlocks
config.forceEnterMode
config.ignoreEmptyParagraph
Reference
A complete list of the available configuration options can be found here:
CKEDITOR.config - CKEditor 3 JavaScript API Documentation
CKEDITOR.config - CKEditor 4 Documentation
I know I'm a little late to the game, but I think the option the OP is looking for is:
config.autoParagraph = false;
This is answered perfectly well above, however as mentioned you should not really be changing this in the main config.
The correct way to do this is per .replace really.
i.e.
<form name="title" method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']);?>">
<textarea id="editor2" name="editor2" rows="300"><?php echo $editor2;?></textarea>
<textarea id="editor1" name="editor1" rows="1" cols="50" onfocus="this.value=''; this.onfocus=null;">Type Tab Title Here:</textarea>
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
CKEDITOR.replace( 'editor2', {
enterMode: CKEDITOR.ENTER_BR,
on: {'instanceReady': function (evt) { evt.editor.execCommand('maximize'); }},
});
</script>
A very simple solution without any configuration change is to use
shift+enter for a line break <br>, and
just enter would cause a new paragraph.
Advantage is that you don't have to do any configuration changes. Plus, you have both.
If you want to exclude <p> tag and want only basic editing tool like Bold Italic superscript Subscript etc in Ckeditor then follow these steps:
I am 100% sure about this as I researched 36 Hours continuously :)
Step 1: Add this script in your PHP webpage
<script type="text/javascript">
CKEDITOR.replace( 'editor1', {
enterMode: CKEDITOR.ENTER_BR,
on: {'instanceReady': function (evt) { evt.editor.execCommand('');}},
});
</script>
Step 2: add id="editor2" and onfocus="this.value='';" in your textarea like this
<textarea id="editor2" name="AsYourWish" onfocus="this.value='';">
Step 3: Be sure that remove Class="ckeditor" from Textarea.
Step 4: Reload your webpage if not happened Delete Cache/History and Restart PC/laptop.
Step 5: Its Done :)
For Django-ckeditor add this config in your settings.py file:
ENTER_P = 1 # default
ENTER_BR = 2
ENTER_DIV = 3
CKEDITOR_CONFIGS = {
'default': {
'enterMode': ENTER_BR,
},
}
If anyone comes here with ckeditor 5, don't look for this option. They have removed it, I've spent days tyring to figure this out.
I'm afraid you're not going to like it, but enter mode BR is the root
of all evil. If we were able we'd removed it from CKEditor 4 long time
ago and we're definitely not going to implement it in CKEditor 5.
Related GitHub issue
I'm trying to change my index.html to show a modal window if the referer to my site == (eg, if they come from Google, show a "Welcome Googler" dialog box with an image inside of it).
I'm using FancyBox, but I'm not married to it.
Any suggestions on how to code it? I'm a C++ programmer -- Javascript isn't my forte, so straight examples would be very much appreciated.
Thanks in advance.
You're going to need a couple things: document.referrer, and jQuery UI. jQuery UI makes dialog boxes trivially easy.
You can find an in depth example from the documentation page but for the most part, this is what you are going to need:
<script type="javascript/text">
if (document.referrer.indexOf('google.com') > -1){
$("#my-dialog").dialog("open");
}
// this is the jquery code to set up the dialog box
$(function() {
// options would go inside the dialog() function
$("#dialog").dialog();
});
</script>
Needed HTML:
<div id="my-dialog">
This is where things get displayed
</div>