In an asp.net applicaiton I am using Hyperlink which points to an image. On certain condition I am setting its
"filter" property to alpha(opacity=70) for IE
and "opacity" prop to 0.7 for Firefox
so that it is shown dull to depict disable mode. This works fine in FIREFOX ie it shows dull in disabled mode but not in IE.
I see that the filter property is set on anchor tag and not on img tag present inside anchor. If I explicitly put the filter on image it works. But I am not able to do that programatically.
Any idea?
If you're not already, I would create some on/off CSS classes for the filter and then dynamically change the class that gets assigned based on your conditions. Then you may want to try putting each link inside a div and assign the classes to the div tags.
Related
How can I show documents created with Ckeditor in read only so that they as much as possible like in the editing mode but without having to create the editor for each message?
In my project users can send messages to each other among many other things and they create the messages using Ckeditor. I would to render message threads in readonly mode without having to create the Ckeditor for each message. Doing that would be slow and would consume a lot of vertical space. Another problem with that approach is that removing the toolbar removes formatting. I would like to just have the messages in div tags and add a class to them and then include Ckeditor css file. Or also acceptable would be to have one element with certain class whose children would get the Ckeditor styles. Before putting the messages in the html response I do whitelisting on the server so the docs are safe to put inside for example a div tag.
I solved this by wrapping the message in an iframe element and added dynamically a style element that links to the Ckeditor style sheet. Now the message gets Ckeditor styles and I don't need to create the editor at all in the read only state and the rest of my page unaffected by the Ckeditor styles.
I am using CKEditor 4.4.5.
Users use the text colour icon to change the colour of a word which works fine. When one checks the underlying HTML, it shows:
<p><span style="color:#FF0000">test </span></p>
However when clicks the "source" icon again to return to the standard non HTML view, the colouring has gone, although the underlying HTML is still correct. If you take this HTML and render it in a browser it will work correctly. So it seems that CKEditor is not able to render text colour correctly, unless freshly changed using the text colour icon.
We had customers thinking that the colour had not changed, and then trying to fix the issue in the HTML, which resulted in the total corruption of the HTML due to human error.
Is this a bug, or am I missing something?
Thanks.
As for CKEditor it might so happen that Advanced Content Filter will strip undesired tags / attributes.
If you don't have colorbutton plugin, CKEditor will strip this span (see standard demo).
You have 2 simple solutions:
Add colorbutton plugin.
Simply add to your config:
config.extraPlugins = 'colorbutton';
Add ACF proper rule.
config.extraAllowedContent = 'span{color}';
For more informations about ACF see Content Filtering (ACF).
I am trying to implement CKEditor v4.3.2. The way our product is set up is there are multiple areas of our pages that can be edited - we open an editor in a modal window and use the iframe method for editing. It works great with one exception:
If the page DOM looked something like "body > div#container > div > div#editcontent"
and there was CSS rules targeting that DOM then the CSS does not apply in the editor because the editor DOM is simply "body"
What I would LIKE to do is supply the editor with the HTML DOM Structure of the page that holds the editor so the ContentCSS rules that normally impact the div would still apply (e.g. white background in the div instead of background color from the body tag)
I am at a loss for how to accomplish this.
Thanks!
If you want the content of editor to inherit styles of your page, so a full integration with all the styles applied with every kind of selector, then you would have to use inline editing. Only inline editing offers that.
When using classic editor (the one using iframe) you still have an option though. It's the config.bodyClass setting which lets you assign a class to the body element into which contents is loaded. Then, if all your contents styles selectors starts with that class and a stylesheet is loaded using the config.contentsCss setting, the content inside editor will look similarly to your final page.
Found a very similar question here: CKEditor classes being stripped
I am using CKEditor 4.2, and I have found it automatically changes content/formats.
For example I have a plugin which automatically creates a new page and a link to it in the text editor, if I create a new page called 'newPage' it creates this code:
<p> </p>
<p><a class="wiki_page_link" href="newpage">newpage</a></p>
This is shown when I click the source button on the CKEditor, now if I click it again, it shows the button again but it's different, AND if I click the source button to view the source code again it displays this code:
<p> </p>
<p>newpage</p>
Now I don't know why CKEditor has automatically changed the link, but now the link won't work. And this is occurring a number of times, for example if I add a new link using the same plugin then the original 'newPage' link is automatically changed. If I have an image of set n x m width and height then load the CKEditor then the width and height are discarded and the image is set to it's default size. If a title is set to be in the center and the CKEditor is used to change the page this centering is defaulted to the normal left of the page.
Any advice would be appreciated,
Thank you
I have finally found a solution to this. The reason it took me so long is because links like this:
CKEditor classes being stripped
to the CKEditor website always say you turn CKEDITOR.config.allowedContent to 'true' and it only provides examples to trying to turn off individual plugins, but I needed to disable it over the entire system.
To disable Advanced Content Filtering throughout the entire CKEditor - in the config.js file insert the line:
config.allowedContent = true;
Hope this helps someone else.
The title of this question may seem a bit confusing, but here is what is happening to me.
First off, I am using Notes/Domino 8.5.3 with UP1.
I have an Xpage with a edit mode custom control inside of it. Within the custom control are various elements using digit.forms. I have tried to set the custom control to be rendered only on edit mode, but even when it is in read mode certain dojo elements are STILL being rendered. To test this I even have set it to rendered=false for the control.
<xc:ccEditDocument rendered="false"></xc:ccEditDocument>
When I compare the source of the XPage with the custom control as rendered=false VS source of the XPage with NO custom control at all the following differences are encountered:
<script type=”text/javascript” src=”/xsp/.ibmxspres/dojoroot-1.6.1/ibm/xsp/widget/layout/layers/xspClientDojoUI.js”></script>
<script type=”text/javascript”>dojo.require(’dijit.form.Form’)</script>
and
enctype=”multipart/form-data” dojoType=”dijit.form.Form”
This is actually causing a problem for me with IE8 and iFRAME rendering of a PDF (it of course works in all other real browsers).
Is there a way to TRULY have the custom control NOT render the dojo form elements?
Thanks!
UPDATE
jjtbsomhorst had the fix! It was to add a conditional on the loaded property of the custom control.
<xc:ccEditDocument rendered="#{javascript:document1.isEditable()}"
loaded="${javascript:document1.isEditable()}">
</xc:ccEditDocument>
Thanks!!
Use the loaded property and toggle the loading of the element using a viewscope variable. This viewscope var is populated using a url parameter. Because you change the url, and do a full refresh, the loaded property is revaluated. I think this should cause the dojo not to render at unless the dojotype is loaded
You need to set the rendered property of the dojo module in the custom control itself. This will determine then at runtime whether or not the module will be added to the list of resources to be rendered.