i want to use component ckeditor with ZK.
The component is correctly visible but width/height set are non considered.
I've reproduced the problem using ckeditor on zul as follow:
<zk>
<window id="myId">
<div width="500px" height="500px" style="background:red">
<ckeditor id="myEditor" width="500px" height="300px"
customConfigurationsPath="/j/ckeditor_cfg_ro.js" toolbar="MyToolbar">
</ckeditor>
</div>
</window>
</zk>
when i open it, the ckeditor is smaller than expected...
version of ckeditor is 3.6.4.
how i can show my editor in the correct size?
here how the ckeditor is shown:
another info:
the toolbar (configured on file ckeditor_cfg.js on "js" directory) is not shown and using firebug i get the following error:
TypeError: jq(...).ckeditor is not a function
on line: ckez.wpd (line 42564) --> jq(this.$n('cnt')).ckeditor(function(){
Actually, after some testing in fiddle, the height does work.
The problem is that the height is set for the textbox of the ckeditor and do not look at the header.
You can Always create a bug report for it.
Check this fiddle for it.
Related
I am using Dropzone code obtained from this web site
DropZoneCode
In this example the dropzone is the width of the entire screen. I would like to reduce that size down to about 400 to 500 pixel. When I reduced the size of the div I could only drop 2 files before it stopped uploading files. The 3rd file just opened in the browser, which I believe was an indication I was outside the dropzone.
I believe if I reduced the size of the icon showing in the drop zone I would be able to add more files. Can anyone tell me where within the css file I can adjust the size of those items?
I was able to get it working using this setup
<asp:Panel ID="pnlStealthStat" runat="server" Visible="false">
<div id="dZUpload" class="dropzone" style="height:auto;margin-top:5px;">
<div class="dz-default dz-message"> Drop Stealth Stats Files Here</div>
</div>
</asp:Panel>
This setup was part of a bootstrap column and is functioning as expect
Previously (I thought?) it was possible to put HTML into vuetify hints but for me this is no longer working. For example, in one of my components I have:
<v-checkbox
v-model="create"
label="Nice label"
persistent-hint
hint="<span class="red--text">Red hint</span>"
/>
This hint used to display in red but now I see the full HTML code. Has something changed or am I doing something wrong?
In the Vuetify forum, MajesticPotatoe pointed me towards the bug report https://github.com/vuetifyjs/vuetify/issues/9647. This gave the following slots workaround, which works in my code:
<v-checkbox
v-model="create"
label="Nice label"
persistent-hint
hint="<span class="red--text">Red hint</span>"
>
<template v-slot:message="{ message, key }">
<span v-html="message"></span>
</template>
</v-checkbox>
It seems that this used to work without slots before the patch https://github.com/haggys22/vuetify/commit/f0d5edd7ddf7e01ba057b7f3d14604199b6db68d was merged.
behaviour changed from 1.5.19 to 1.5.20
1.5.19 (and before) treats html tags as expected
1.5.20, 1.5.21 treat html tags as simple text
'hint' is the 'string' type so you can't add HTML tags. Here is the screenshot from documentation: https://prnt.sc/qlag61
So, I think you can apply red color from CSS / SCSS using this class name '.v-messages__message' if you really need red color in hint.
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.
I have a custom button in CKeditor, which is responsible to open a modal showing picture the user has in order to insert one of them into the CKeditor.
This is a textarea:
<textarea name="editor1" id="editor1" rows="10" cols="80"></textarea>
Here is the init code of the editor:
CKEDITOR.replace( 'editor1');
I refereed to the documentation to know how to insert HTML to the editor when an event fires and it looks like below:
CKEDITOR.instances.editor1.insertHtml( '<img src="Media/smiley.gif>' );
But nothing is shoiwing on the editor even in the source
What i have tired so far :
I tried to insert <p>test</p> ==> with no luck
CKeditor version : latest
this is because of calling the insert code before Creditor is initialized, you should tie your insert element code with an event that fires after the CKeditor is %100 ready.
I asked about this question a few months back, but unfortunately it has not solved my issue, so I am asking it again with more information.
I am using CKeditor 4.4.5
Original Question
I have experimented with the online demo of CKeditor. What works is that the colour is rendered when making the edit in CKeditor, however when one retrieves a content with the coloured span element within it, as it correctly should do, the colour is not rendered in CKeditor. Also it seems that tags are not being stripped out at all. It just seems that CKeditor is not rendering something like :
<textarea class="RTE" cols="20" disabled="True" id="Content" name="Content"
rows="2">
<h1><span style="color:red">I should be coloured red</span></h1>
</textarea>
with:
I should be coloured red
in red.
I have checked for "!important", in relevant CSS, and I cannot see any that would affect this text.
Thoughts on why CKeditor is not respecting the "color" attribute of this "span" element when retrieving/displaying data, rather than initially editing it would be very helpful.
Thanks in advance.
EDIT
Source in "source" view:
<h1><span style="color:red">I should be coloured red</span></h1>
EDIT2
This works:
<p style="color:red">I should be coloured red</p>
EDIT3
This works
<h1 style="color:red">XXX red text XXX</h1>
EDIT4
This does not work:
<p><span style="color:red">XXX red text XXX<</span></p>
It seems I have some code in my CKeditor config which is causing this behaviour, but not sure why. When I comment it out, my colour coding works. Also I have turned ACF off, as I fine all my inline style attributes gets stripped out. So I have altered my config to :
//config.protectedSource.push(/<span[\s\S]*?\>/g); //allows beginning <span> tag - now commented out
//config.protectedSource.push(/<\/span[\s\S]*?\>/g); //allows ending </span> tag - now commented out
config.allowedContent = true; //Added