I want to display the code as code by onkeyup event in the textarea which something looks like online compilers without compiling anything, I'm using code-prettify which is this lib : <script src="https://cdn.jsdelivr.net/gh/google/code-prettify#master/loader/run_prettify.js"></script>
What I want to do when the user pastes his code in the textarea the code appears as code
the way it appears in one is by using prettyprint class: <pre class="prettyprint"> <code class="prettyprint "> <p> <?php echo htmlspecialchars($str); ?>
I don't mind using any other libraries
Take reference from this and try to implement it according to your needs:
Online coding playground
you are required to integrate with judge0
I am using TinyMCE in my HTML Textarea to format content and then save them in MySQL Database. All is working fine. But when I try to get the saved content from database in other page it is showing with all the HTML tags and CSS attributes. What I need is to show the content with same formatting as it was saved.
I am using following code to initilize the TinyMCE in my form.blade.php file.
<script>
tinymce.init({
selector: '#requestDescribe'
});
</script>
Below is the text area where I am using TinyMCE.
<textarea required name="requestDescribe" id="requestDescribe"
cols="30" rows="5" maxlength="600" class="form-control"
value="{{old('requestDescribe')}}">
After saving such type of content is being saved in database.
<p><strong>dfg <span style="text-decoration: underline;">fkjg gkjdfhgkfg </span> <em>gdfgf</em></strong></p>
When I get data in some other page it shows with all the html and css code like this:
I have used PHP stray_tags but it didnt work. Mybe because the code has both html and css. Please Help. TIA
Ok I have found the answer. If you are using PHP (Which is the case with me) so just use echo. :)
I want to add dynamic content in ckeditor I have also used CKEDITOR.instances or some another thinks which I get from Stack Overflow but I can't get output.
<script type="text/javascript" src="<?php echo base_url();?>js/ckeditor/ckeditor.js"></script>
<textarea class="ckeditor form-control" name="Content" id="emailcontent" >
<?php echo $valuedata[0]['email']; ?>
</textarea>
i am using ck-editor java script and text area.
You can do this in jquery by assigning value to editor like
CKEDITOR.instances['emailcontent'].setData(data)
Here you can populate data. Find below detail here
How to add extra data to the ckeditor using jquery?
If you want to replace the entire editor content, use setData(), for example:
CKEDITOR.instances[Name].setData(Data)
If you want append data into the editor window, you can use insertHtml() and insertText() methods
I am trying to use a jQuery Plugin for highlighting my Snippet at This Demo but the browser assumes that
<pre class="php">
<?php
echo "My first PHP script!";
?>
</pre>
is a originally PHP code which it is! now the solution is replacing all < with < and > with >
inside the <pre class="php"></pre>
Now can you please let me know how can I use the jQuery to replace all < and > characters inside the with < and > before loading the page?
Thanks
So you got the data with <? tags, it better for you is to replace output of your code serverside with < and > but if you looking for dirty js solution it is would be:
$('.php').each(function() {
var $this=$(this);
$this.text($this.html().replace(/\<\!--\?([\s\S]*?)-->/g,'<?$1>'));
});
http://jsfiddle.net/oceog/x974w2d9/
I not remember if any browser do the replacing of the <? with <!--? but chrome does. The js solution will not work if you have some random examples like: http://jsfiddle.net/oceog/x974w2d9/2/.
Now can you please let me know how can I use the jQuery to replace all < and > characters inside the with < and > before loading the page?
The problem lies in the assumption behind this question. You cannot use jQuery to make this manipulation before the page loads, as jQuery executes after the page loads up in the browser. So your PHP is getting executed and all jQuery will see is:
<pre class="php">
My first PHP script!
</pre>
You need to make sure the string makes it into the output instead of being executed. Something like this should work:
<pre class="php">
<?php
$snippet = <<<EOT
<?php
echo "My first PHP script!";
?>
EOT;
echo $snippet;
?>
</pre>
If I check official documentation, I can see a property called HTML:
Name | Type | default | Description
----------------------------------------------------------------------------
html | boolean | false | Insert html into the tooltip.
If false, jquery's text method
will be used to insert content
into the dom. Use text if you're
worried about XSS attacks.
It says, "insert html into the tooltip", but the type is boolean. How can I use complex html inside a Tooltip?
This parameter is just about whether you are going to use complex html into the tooltip. Set it to true and then hit the html into the title attribute of the tag.
See this fiddle here - I've set the html attribute to true through the data-html="true" in the <a> tag and then just added in the html ad hoc as an example.
Another solution to avoid inserting html into data-title is to create independant div with tooltip html content, and refer to this div when creating your tooltip :
<!-- Tooltip link -->
<p><span class="tip" data-tip="my-tip">Hello world</span></p>
<!-- Tooltip content -->
<div id="my-tip" class="tip-content hidden">
<h2>Tip title</h2>
<p>This is my tip content</p>
</div>
<script type="text/javascript">
$(document).ready(function () {
// Tooltips
$('.tip').each(function () {
$(this).tooltip(
{
html: true,
title: $('#' + $(this).data('tip')).html()
});
});
});
</script>
This way you can create complex readable html content, and activate as many tooltips as you want.
live demo here on codepen
Just as normal, using data-original-title:
Html:
<div rel='tooltip' data-original-title='<h1>big tooltip</h1>'>Visible text</div>
Javascript:
$("[rel=tooltip]").tooltip({html:true});
The html parameter specifies how the tooltip text should be turned into DOM elements. By default Html code is escaped in tooltips to prevent XSS attacks. Say you display a username on your site and you show a small bio in a tooltip. If the html code isn't escaped and the user can edit the bio themselves they could inject malicious code.
The html data attribute does exactly what it says it does in the docs. Try this little example, no JavaScript necessary (broken into lines for clarification):
<span rel="tooltip"
data-toggle="tooltip"
data-html="true"
data-title="<table><tr><td style='color:red;'>complex</td><td>HTML</td></tr></table>"
>
hover over me to see HTML
</span>
JSFiddle demos:
Bootstrap 2.x
Bootstrap 3.x
set "html" option to true if you want to have html into tooltip. Actual html is determined by option "title" (link's title attribute shouldn't be set)
$('#example1').tooltip({placement: 'bottom', title: '<p class="testtooltip">par</p>', html: true});
Live sample
As of bootstrap 5, you can just specify the contents of the tooltip to be html DOM nodes when configuring it. Sample config...
// setup tools tips trigger
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new Tooltip(tooltipTriggerEl, {
html: true // <- this should do the trick!
})
});
For bootstrap 5, you can use data-bs-html="true" with the title tag data-bs-original-title="Tooltip Title"