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.
Related
I started to use vuetify 3 beta, I know it is not stable according to the documentation but I still tried.
<v-text-field placeholder="Type a name" class="v-field__outlined" outlined></v-text-field>
End result is the basic vuetify text field.
How do I fix this, any help is appreciated!
The styles are no longer individual prop values.
Styling options are now set via a prop called variant
variant="outlined"
It is also no longer possible to mix the different styles and rounded appears to be missing so far.
https://next.vuetifyjs.com/en/components/text-fields/#variant
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
I'm using the wonderful Sphinx tool to create some documentation and I need to create a custom HTML div so that I can style it apart from Sphinx's other, automatically-created, divs.
This is possible to do using the container directive, but the problem is that if I use this directive below a subsubsection, it automatically nests the div created with the container directive within the subsubsection, like so:
<div id="automatically-created sphinx subsubsection">
...
<div id="my custom container"></div>
</div>
Whereas, I want:
<div id="automatically-created sphinx subsubsection">
...
</div>
<div id="my custom container"></div>
Is there any way to do this? Any help would be greatly appreciated!
Addendum:
One hacky way of potentially solving the problem is to create a new subsubsection so that Sphinx automatically places it on the same level as other subsubsections and then use CSS to hide its header etc. The problem with this approach, however, is that the new subsubsection automatically gets added to the sidebar in the RTD theme (which I'm using) and this is not what I want.
Untested. Try a super-hacky .. raw:: directive, where you would close the current section, then open a new unclosed <div>:
.. raw:: html
</div>
<div id="my custom container">
Then resume using reStructured text markup. This would "trick" Sphinx into thinking that the current section is still open and it would still add a closing </div> after the rest of your markup until it starts parsing the next section.
I'm working on an email editor using the last ckeditor version.
To provide compatibility with outlook, I need to force HSPACE and VSPACE on images.
I found some workarounds that have been working on previous ckeditor version.
Now CKEDITOR output is:
<p><img alt="" src="/userfiles/images/river.jpg" style="float:left; height:900px; margin:10px; width:1600px" /></p>
I need something like:
<p><img alt="" src="/userfiles/images/river.jpg" align="left" vspace="10" hspace="10" /></p>
Any idea how to achieve that on the last ckeditor version?
Thank you in advance
My method would be simpler than modifying ckeditor. I would attempt to do something like the following. Disclaimer, the regex here probably doesn't work as written. Regex is not my strength and it takes a lot of research and time for me to get it right. And depending on the various possibilities for your output, you might have to loop through multiple images if each has different needs. But as an idea.... I am replacing the whole style statement with the vspace and hspace settings. Note, editor is the name of your instance of the editor
window.onbeforeunload = function (e) {
data = CKEDITOR.instances.editor.getData();
data = data.replace(/<style=(.*)>/g, 'align="left" vspace="10" hspace="10"');
CKEDITOR.instances.editor.setData(data);
};
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