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
Related
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.
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 have a CQ5 component where the users can write some text with a richtext editor. It is also possible to paste Image script code into source editor available in RTE.
When I am pasting the source code as below
<div style="background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='); height:100;width:100;"></div>
into RTE, It's getting converted as shown below and it is not rendering the image.
<div style="background: url('data:image/png; base64,ivborw0kggoaaaansuheugaaaauaaaafcayaaacnbyblaaaaheleqvqi12p4//8/w38giaxdibke0dhxgljnbaao9txl0y4ohwaaaabjru5erkjggg=='); height: 100; width: 100;"> </div>
Has anybody a suggestion what can be the cause of this problem?
I believe the code that is formatting the HTML is in /libs/cq/ui/rte/core/HtmlSerializer.js and/or /libs/cq/ui/rte/core/HtmlProcessor.js so you may need to override that by copying that file to apps as /apps/cq/ui/rte/core/HtmlSerializer.js and/or /libs/cq/ui/rte/core/HtmlProcessor.js. This code is doing toLowerCase in several places, though I don't know specifically where it would be altering a style attribute value. But I suspect it is. One of those files has a comment that seems suspicious:
// IE < 9 will report uppercase style names; hence normalize to
lowercase
So perhaps there is some code added to work around an IE bug that is messing up what you are wanting to do--essentially introducing a different bug while fixing an IE issue.
Actually the question is in the subj...
Is it possible to make handlebars template framework, to recognize templates within a div tag and not in script tag?
For example I would like to create template with this markup:
<style>
div.text-x-handlebars {display:none;}
</style>
<div class="text-x-handlebars-template">
<h2>I'm template</h2>
<p>{{welcomeMessage}}</p>
</div>
Yes you can put your templates in <div>s rather than <script>s, for example:
http://jsfiddle.net/ambiguous/RucqP/
However, doing so is fraught with danger. If you put your template inside a <div> then the browser will interpret it as HTML before you've filled it in; so, if your template's HTML isn't valid until after it has been filled in, the browser may attempt to correct it and make a mess of things. Also, if you have id attributes in your templates, then you will end up with duplicate ids (one in the template <div> and a repeat in the filled in template that you put in the DOM) and that will cause all sorts of strange and interesting bugs. The browser will also try to download any images inside the templates in a <div>, this may or may not be a problem (if might even be desirable but probably not desirable if the image uses a template variable in its src attribute).
Basically, you can do it but you shouldn't, you should put your templates in <script id="..." type="text/x-handlebars-template"> elements instead.
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