How can I set datas with CKEditor (4.0) with CSS style ?
$quote = $editor + '<br />'+
'<div class="quote">'+
'<div class="quote-infos">'+
'<i class="icon-comment icon-white"></i>'+
' <span class="quote-user">'+$user+'</span>,'+
' <span class="quote-date">'+$date+'</span> :'+
'</div>'+
'<blockquote>'+$div.html()+'</blockquote>'+
'</div>';
editorMessage.setData($quote);
In this code, when I send the datas to a POST form, I just have <div><div><i></i><span...
If you are using the new 4.1 CKEditor, it might be because of the new Advanced Content Filter feature. It nukes tags, attributes and attribute contents from content HTML, see demo. Turn it off by adding config.allowedContent = true to your config. More info on configuration in the API
You can test for this easily in your CKE instance by going to source mode, adding some attributes manually into the content, like <div class="MagicalPonies"><div><i></i><span... Then switch to wysiwyg mode and back to source mode. If your class definition is missing, it's most likely ACF. Also try to add a class like <img alt="X" class="left" src="http://b.cksource.com/a/1/img/sample.jpg" /> and see if that sticks. Standard CKE classes like that aren't removed.
Related
I have the following javascript code:
var html = '<div class="col-lg-4 col-references" idreference="'+response+'"><span class="optionsRefer"><i class="glyphicon glyphicon-remove delRefer" style="color:red; cursor:pointer;" data-toggle="modal" data-target="#modalDel"></i><i class="glyphicon glyphicon-pencil editRefer" data-toggle="modal" data-target="#modalRefer" style="cursor:pointer;"></i></span><div id="contentRefer'+response+'">'+refer_summary+'</div><span id="nameRefer'+response+'">'+refer_name+'</span></div>';
$("#references").append(html);
When this code runs, the refer_summary variable actually contains a string which may contain HTML tags such as <b>, <i> etc., however, those tags are displayed on the page instead of rendering their behavior.
For example, on the page it would show <b> rather actually making the content bold.
How can I go about rendering the HTML tags when the value is appended?
In my Django template I use {% autoescape off %}{{content}}{% endautoescape %} so when I first load the page, the content is rendered correctly with bold etc. But how can I do the same thing when appending the html from javascript?
Thanks for the help!
You can render HTML using document.write()
document.write('<html><body><h2>HTML</h2></body></html>');
But to append existing HTML string, you need to get the id of the node/tag under which you want to insert your HTML string.
There are two ways by which you can possibly achieve this:
Using DOM -
var tag_id = document.getElementById('tagid');
var newNode = document.createElement('p');
newNode.appendChild(document.createTextNode('html string'));
Using innerHTML -
var tag_id = document.getElementById('tagid');
tag_id.innerHTML = 'HTML string';
Use $.parseHTML before the append html like as
var html = '<div class="col-lg-4 col-references" idreference="'+response+'"><span class="optionsRefer"><i class="glyphicon glyphicon-remove delRefer" style="color:red; cursor:pointer;" data-toggle="modal" data-target="#modalDel"></i><i class="glyphicon glyphicon-pencil editRefer" data-toggle="modal" data-target="#modalRefer" style="cursor:pointer;"></i></span><div id="contentRefer'+response+'">'+refer_summary+'</div><span id="nameRefer'+response+'">'+refer_name+'</span></div>';
html = $.parseHTML( html);
$("#references").append(html);
You can use Javascript's document.createRange().createContextualFragment:
const frag = document.createRange().createContextualFragment('<div>One</div><div>Two</div>');
console.log(frag);
/*
#document-fragment
<div>One</div>
<div>Two</div>
*/
https://davidwalsh.name/convert-html-stings-dom-nodes
If you want to do it in ReactJS, you can use "dangerouslySetInnerHTML" attribute, instead of "innerHTML" attribute.
As it allows the attackers to inject codes (XSS), it is named dangerous!
const myHtmlData = `
<ul>
<li>Item1<li>
<li>Item2<li>
</ul>`;
...
<div
dangerouslySetInnerHTML={{
__html: myHtmlData
}}>
You need to assign a particular div an id and then process/change UI in the specific div accordingly.
Given here is an excellent explanation.
Is it possible to dynamically add an ng-include element to a HTML page and have it actioned?
I have a Drag N Drop application where you can drag an element onto the page and in the drop zone the element is replaced with a more detailed element. For examples you drag a box that says Calendar and when it is dropped a calendar is presented. To be clear a new Element is created and added to the DOM, it does not exist before the drop.
When the element is dropped, I'm hoping that I can replace it with a chunk of HTML that looks like below. Instead of having the markup defined in a string like it is at the moment which is not very nice:
<div class='panel panel-default'>
<div class='panel-heading'>
<h3 class='panel-title'>
<span class='glyphicon glyphicon-remove'></span>
WIDGET NAME
<spanclass='glyphicon glyphicon-cog'></span>
</h3>
</div>
<div class='widgetContainer' ng-include="'widgets/widget.html'"></div>
</div>
When the above HTML is inserted into the page the referenced HTML file is not included.
What I would like to happen is a HTML file is loaded containing the widget markup and included at the appropriate position.
I'm new to Angular so I don't know if this is because:
dynamically adding ng-include isn't supported
whether I need to do something with the controller to handle this logic
should I be using the tag instead of the attribute?
it just isn't possible.
Please provide examples with solutions, as I said I'm new to Angular.
Thanks
UPDATE
The code used to created the HTML that I want to dynamically add to the page looks like this
$("#template").append(
" \
<div class='panel panel-default'>\
<div class='panel-heading'>\
<h3 class='panel-title'>\
<span style='padding-right: 10px; cursor:pointer;' class='glyphicon glyphicon-remove' onclick='removeElement(this)'></span>\
" + widgetDetail['serviceName'] + "\
<span style='float:right; cursor:pointer;' class='glyphicon glyphicon-cog' onclick='toggleWidgetDetail(this)'></span>\
</h3>\
</div>\
<div class='markupContainer' ng-include=\"'widgets/" + id +".html'\"></div>\
</div>\
"
);
I've uploaded the complete code to GitHub. The drag and drop aspects are being handled currently by HTML5 javascript, which can be seen in the file /public/javascripts/js_dragndrop.js. The new widget being added to the page (the code above) is in /public/javascripts/jq_dragndrop.js
I'm in the prototyping phase trying to work out the DragNDrop elements so don't expect high quality code :)
I found a way of achieving what I wanted by moving the HTML5 drop and drop code into AngularJS directives and then (using this [ Compile dynamic template from outside of angular ] as a guide) got the html templates being loaded where I wanted them.
The main code change looks like this:
angular.element(document).injector().invoke(function ($compile) {
var widgetDetail = widgets[e.dataTransfer.getData('Text')];
var obj = $("#template");
var scope = obj.scope();
obj.append(
"<div class='panel panel-default'><div class='panel-heading'><h3 class='panel-title'>\
<span style='padding-right: 10px; cursor:pointer;' class='glyphicon glyphicon-remove' onclick='removeWidget(this)'></span>\
" + widgetDetail['serviceName'] + "\
<span style='float:right; cursor:pointer;' class='glyphicon glyphicon-cog' onclick='toggleWidgetDetail(this)'></span>\
</h3></div><div class='markupContainer' ng-include=\"'widgets/" + widgetDetail['serviceId'] + ".html'\"></div>\
"
);
$compile(obj.contents())(scope);
scope.$digest();
});
You can find the full code in the Git Project /public/controllers/template.js if you are interested.
I have a certain code to display some textarea according to the number of days choosed, i need all these text areas as editor .I have given then class tinyMCE but its not working
Its working if i use html code directly .Im using jquery html() to display contents and while using this the editor is not showing
division +='<div class="form-group">Activity on '
+btwn[i].getDate()+' '+month+
'<div id="activity_div"><input type="hidden" name="hidden_date[]" value="'+btwn[i].getDate()+
'"/><input type="hidden" name="hidden_day[]" value="'+month+
'"/><label for="input-demo-a-1">Activity name</label><input type="text" id="test-text'+i+
'" name="activity_name[]" style="width:99.5%;"/></br><label for="input-demo-a-1">Activity detail</label><textarea id="test2-text'+i+
'" class="tinyMCE " name="activity_detail[]" style="width:99.5%;"></textarea></br><button class="btn btn-success actvty" id="actvty-btn" data-toggle="modal" data-target="#long-modal'+i+
'" rel="'+i+'">Load Activities<input type="hidden" name="n_days" value="'+d+
'"/></div></div>'
division is the content I'm using and display it using $("#my_testing").html(division);
The editor is not showing while using this method , please help me
After adding the textarea dynamically you need to re-init the tinymce so it will apply to the new textareas:
tinymce.init({selector:'.tinyMCE'});
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"
I am working on a project where I need to create an embeddable button. I just want to give some code to the clients and ask them to put it where they want the button to appear on their websites. What is the best approach to it? As an example please see the following image:
I will be really thankful if someone can provide some example code.
The simplest form would be to provide a hyperlink:
Do Something
Or you could use an image button:
<a href="http://mysite.com/dosomething" title="DoSomething">
<img src="http://mysite.com/images/a.jpg" alt="DoSomething" />
</a>
These both remove dependencies on CSS and JS.
Or you can do it like suggested in your question:
<script src="http://mysite.com/scripts/embedbutton.js">
document.write('<link rel="stylesheet" href="http://mysite.com/css/embedbutton.css" />');
document.write('<div id="mybutton" onclick="DoSomething(event);">DoSomething</div>');
function DoSomething()
{
/* action code here */
}
</script>
I think that the javascript solution is the one thtat you need.
Create an javascript that will write the HTML of your button. Put the code in public/js/mybutton.js for example.
var link = 'http://yoursite.com';
var text = '<div><a href="' + link + '"><img src="'
+ link
+ '/public/images/image.png" alt="Some alt text for the image" /></a></div>';
document.write(text);
Then provide a script tag in your page for the users to embed your butscriptton.
<script src="http://yoursite.com/public/js/mybutton.js"></script>
The result will be a image with link to your site, rendered right after the script. You can use inline styling also.
I belive that this is good option when you want prevent your button styling modifications.
You could use a simple link:
Blah
and then ask your clients to embed this code into their sites. Obviously depending on the information you need to exchange between the client site and your site there could be additional parameters, javascript code, ...