Insert HTML codes in CKEditor textarea - ckeditor

I would like to know if there is a plugin in order to insert HTML codes in a CKEditor textarea?
I tried to install the PBCKCode plugin but it doens't work because the HTML is executed in my textarea.
Anthony
EDIT1 ----- INSERTPRE Plugin -------
Query when I add the post :
INSERT INTO `Posts` (`slug`,`title`,`thumbnail`,`content`,`tags`,`state`,`click`,`createdAt`,`updatedAt`,`id`) VALUES ('dsq','dsq','http://4.bp.blogspot.com/-knCgLUMOkJc/TeMY2jkmACI/AAAAAAAAAV0/VByHmoMa2N8/s1600/first+blog+posting.jpg','<pre class="prettyprint">\r\n<div>toto</div></pre>\r\n\r\n<p>dqsdqs</p>\r\n','toto','0',0,'2013-04-30 12:15:46','2013-04-30 12:15:46',NULL);
The result in my textarea when I try to edit the post :
<pre class="prettyprint">
</pre>
<div>toto</div>
<p>dqsdqs</p>
As you can see the "div" have changed of place.
EDIT2 ----- Escape HTML -------
Screenshot : http://grab.by/m8bs
As you can see it works in a P tag (just above the slug) but it doesn't work in my textarea. I think CKEditor encode my content but I don't know when and why... In my database everything is ok, I have the codes into the PRE tag.

Check these two plugins:
http://ckeditor.com/addon/insertpre
http://ckeditor.com/addon/syntaxhighlight
We use the first one on http://ckeditor.com/forum and it works very well.
Update: That's because you're not encoding HTML before you pass it to textarea. Use htmlspecialchars (or other similar function if you're not using PHP) to do that.
Update2: You are doing something wrong, but I don't know on what stage. The output data (editor.getData()) from the editor with one <pre> element is:
<pre class="prettyprint"><div></pre>
See that <pre> is not encoded, but <div> inside it is. Your examples show me that you "flattened" that structure - you have encoded both things equally when it should be:
<pre class="prettyprint">&lt;div&gt;</pre>
Note: &lt; is an encoded <.

You can use source menu in ck editor header to add your html
Use this tutorial
demo link

Okay Try This
for added Post
addslashes($_POST['post_from_textarea']);
to Edit
stripslashes($yourvairablegetRowsQuery)

Related

CKEDITOR extra html tag when paste from word

I have blog page in my website and website try to write content with CKEDITOR and copy it from word but when the content publiched, the html have too many extra tag that the are not useful.
how can we filter and delete extra tag and just save main html tag for blog page
thank you
As you did not provide any code sample, its hard to find out your problem. From my understanding I am writing this answer. Hope this will help.
When you save the text from the CKEDITOR fields, it saves text and HTML tags as well. So while viewing the saved texts, you can use the Laravel blade engine print function like this.
{!! $variale->field_name !!}
It will remove the HTML tags and only the text will be shown.

How do I do strikethrough (line-through) in asciidoc?

How do I render a strikethrough (or line-through) in an adoc file?
Let's presume I want to write "That technology is -c-r-a-p- not perfect."
That technology is [line-through]#crap# not perfect.
As per Ascii Doc manual, [line-through] is deprecated. You can test here.
Comment from Dan Allen
It's important to understand that line-through is just a CSS role. Therefore, it needs support from the stylesheet in order to appear as though it is working.
If I run the following through Asciidoctor (or Asciidoctor.js):
[.line-through]#strike#
I get:
<span class="line-through">strike</span>
The default stylesheet has a rule for this:
.line-through{text-decoration:line-through}
You would need to do the same.
It is possible to customize the HTML that is generated using custom templates (Asciidoctor.js supports Jade templates). In that case, you'd override the template for inline_quoted, check for the line-through role and produce either an <s> or, preferably, a <del> instead of the span.
If you're only targeting the HTML backend, you can insert HTML code verbatim via a passthrough context. This can be done inline by wrapping the parts in +++:
That technology is +++<del>+++crap+++</del>+++ not perfect.
This won't help you for PDF, DocBook XML, or other output formats, though.
If the output is intended for HTML you can pass HTML.
The <s> HTML element renders text with a strikethrough, or a line
through it. Use the element to represent things that are no longer
relevant or no longer accurate.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s
To render as:
Example text.
use:
1. Pass inline:
Example +++<s>text</s>+++.
2. Pass-through macro:
Example pass:[<s>text</s>].
3. Pass block:
++++
Example <s>text</s>.
++++

How to dynamically hide asciidoc element

I use org.asciidoctor.convert plugin for gradle to generate API documentation for my team. I include files:
include::{snippets}/index/curl-request.adoc[]
and want to place it's content into spoiler or anything like that. Is there any way to somehow hide dynamicaly asciidoc elements? I try to use
pass:[<details open>
include::{snippets}/index/curl-request.adoc[]
</details>]
but it is not processed include inside it. Any ideas will be higly appreciated. Without hiding snippets my documentation have almost unlimited scrol :). If no such way with ascii doc, suggestions of other documentation formats, where i can include files content and place it into the spoiler is also appreciated.
As this was so helpful for me - I added here the solution from Robin's comment.
No CSS and Javascript needed!
Here is an example:
+++ <details><summary> +++
Check `reference.conf`:
+++ </summary><div> +++
----
play {
http {
secret.key = asdf
secret.key = ${?SECRET_KEY}
...
}
...
}
----
+++ </div></details> +++
This creates a collapsed element:
..and this expanded image:
Update
As Foad's answer looks more elegant, I tried his proposed solution for a ReDoc Markup with no success.
As Guillaume Grossetie has mentioned here
Using passthrough to include raw HTML is not recommended because now your document is tightly coupled with the output.
and it is deprecated. The new syntax for collapsible/foldable sections is
.some description
[%collapsible]
====
this
is
going
to be
folded
====
This is a late answer but maybe it will help you/others.
The following asciidoc features are the key for implementing dynamic showing/hiding of blocks:
If your output is only HTML then you can embed any HTML in the document using
++++ any HTML contents ++++
This includes
<style> tags containing custom CSS classes
custom HTML tags for show/hide functionality like <input type="checkbox" />
<script> tags containing Javascript code to hide/show some blocks, e.g. by adding event listeners to checkboxes.
As #LightGuard has already mentioned, role attributes are converted to CSS class references. E.g.
[source,role="someCssClass"]
----
...
----
is converted to something like
<div class="someCssClass">
</div>
So you can reference this CSS class from Javascript code and implement show/hide by modifying the display CSS attribute.
For a simple example implementation see https://raw.githubusercontent.com/NorbertSandor/jsinterop.xyz/master/jsinterop-project/jsinterop-website/src/main/asciidoc/index.asciidoc (near the top of the file).

CKEditor alters content

When I save my content, it changes things that I don't want to be changed. How can I make it so it would just save my content without changing anything?
Content before saving:
<a anything</a>
After save, the above example becomes:
<a a="" anything=""> </a>
I'm trying to find a config option that would make it so when I save my content, it would save it just as it is - without adding anything of its own.
This <a anything</a> is not a valid HTML and CKEditor works only with a valid HTML. So once you try to load this content into CKEditor it (or the browser) tries to fix it.
Quoting CKEditor basic concepts:
CKEditor is not a tool that will let you input invalid HTML code. CKEditor abides by W3C standards so it will modify code if it is invalid.

jasmine-jquery toBeDisabled not working

I have got following html
<a disabled="disabled"><img alt="First" src="/Content/Images/Grid/disabledFirst.png"></a>
And I run following expect on this html
expect($(element)).toBeDisabled()
where element is the selector for above html. The expect fails. Further investigation lead to following code in jasmine-jquery-1.3.1.js
toBeDisabled: function(selector){
return this.actual.is(':disabled');
},
which for some reason is returning false. I'm sure I'm missing something very basic here but just not able to spot it.
This fiddle shows that jQuery only finds inputs not anchors when using :disabled. It's understandable because the anchor element doesn't have the disabled property

Resources