I thought that my code here would work when a user sends a message that includes a http://, but it doesn't:
function showMessage(nameStr, contentStr, textColor) {
var node = document.getElementById("chatbox");
var nameNode = document.createElementNS("http://www.w3.org/2000/svg", "tspan", textColor);
nameNode.setAttribute("x", 100);
nameNode.setAttribute("dy", 20);
nameNode.setAttribute("fill", textColor);
nameNode.appendChild(document.createTextNode(nameStr));
node.appendChild(nameNode);
var contentNode = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
contentStr = contentStr.replace(/((http|https|ftp|ftps)\:\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(\/\S*)?)/g,
'<a target="blank" href="$1">$1</a>');
contentNode.setAttribute("x", 200);
contentNode.setAttribute("fill", textColor);
contentNode.innerHTML = contentStr;
// Add the name to the text node
node.appendChild(contentNode);
}
Can anyone find an error within this code?
nameStr is the name of the person sending the message,
contentStr is what the user input, and which the program should automatically change so any hyperlinks become clickable links, and
textColor is just the color of the message.
To make hyperlinks work inside an svg element, you should set up the XLink namespace, in addition to the default one for svg:
<svg width="500" height="500"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
Then you can use the xlink:href attribute:
<a xlink:href="http://www.example.com">click here</a>
Taking it all together in this snippet:
function showMessage(nameStr, contentStr, textColor) {
var node = document.getElementById("chatbox");
var nameNode = document.createElementNS("http://www.w3.org/2000/svg", "tspan", textColor);
nameNode.setAttribute("x", 100);
nameNode.setAttribute("dy", 20);
nameNode.setAttribute("fill", textColor);
nameNode.appendChild(document.createTextNode(nameStr));
node.appendChild(nameNode);
var contentNode = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
contentStr = contentStr.replace(/((http|https|ftp|ftps)\:\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(\/\S*)?)/g,
'<a fill="purple" target="blank" xlink:href="$1">$1</a>'); // "xlink:" added!
contentNode.setAttribute("x", 200);
contentNode.setAttribute("fill", textColor);
contentNode.innerHTML = contentStr;
// Add the name to the text node
node.appendChild(contentNode);
}
// Sample call:
showMessage('John Doe', 'click this http://www.example.com', 'blue');
a {
text-decoration: underline;
}
<svg width="500" height="500"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1">
<text id="chatbox"></text>
</svg>
I have a TinyMCE editor on my website and I would like to have the editable area (or the whole thing) displayed in A4 format.
Basically, I would like to view the document in the same way as in MS Word. (width, pagebreaks etc.)
Is that even possible? Please point me in the right direction.
Everybody says it's difficult, but Google already done it in Google Docs (TIP: you could use Google API and even get the PDF version of your document. I didn't do this, because we needed extra functions in the editor.)
Here's my solution:
I have resized the page to A4 width
Added a ruler, that shows how much page is left (obviously not 100% reliable, but close). And even page numbers! Yes!
Thoughts:
Ruler is much easier than trying to show each page, which would mean to split up the contents... IT WOULD BE DOPE THOUGH... I had my attempts to do full A4 pages even using css clip, but it was messing with text selection, so I don't know... I wish I could do it, but...
The reason I used SVG inside HTML tag is because it's the only thing I can place there... if you select all text in TinyMCE you could erase my ruler, or even copy and paste... even if you used contenteditable="false"... the choices were limited.
See here my solution:
https://jsfiddle.net/mzvarik/59smpdv8/
// plugin pravítko
tinymce.PluginManager.add('ruler', function(editor) {
var domHtml;
var lastPageBreaks;
function refreshRuler()
{
console.log("ddd");
try {
domHtml = $( editor.getDoc().getElementsByTagName('HTML')[0] );
// HACK - erase this, I have to put my CSS here
console.log($('tinystyle').html() );
domHtml.find('head').append( $('<style>'+$('tinystyle').html()+'</style>'));
} catch (e) {
return setTimeout(refreshRuler, 50);
}
var dpi = 96
var cm = dpi/2.54;
var a4px = cm * (29.7-5.7); // A4 height in px, -5.5 are my additional margins in my PDF print
// ruler begins (in px)
var startMargin = 4;
// max size (in px) = document size + extra to be sure, idk, the height is too small for some reason
var imgH = domHtml.height() + a4px*5;
var pageBreakHeight = 14; // height of the pagebreak line in tinyMce
var pageBreaks = [];
domHtml.find('.mce-pagebreak').each(function(){
pageBreaks[pageBreaks.length] = $(this).offset().top;
});
pageBreaks.sort();
// if pageBreak is too close next page, then ignore it
if (lastPageBreaks == pageBreaks) {
return; // no change
}
lastPageBreaks = pageBreaks;
console.log("Redraw ruler");
var s = '';
s+= '<svg width="100%" height="'+imgH+'" xmlns="http://www.w3.org/2000/svg">';
s+= '<style>';
s+= '.pageNumber{font-weight:bold;font-size:19px;font-family:verdana;text-shadow:1px 1px 1px rgba(0,0,0,.6);}';
s+= '</style>';
var pages = Math.ceil(imgH/a4px);
var i, j, curY = startMargin;
for (i=0; i<pages; i++)
{
var blockH = a4px;
var isPageBreak = 0;
for (var j=0; j<pageBreaks.length; j++) {
if (pageBreaks[j] < curY + blockH) {
// musime zmensit velikost stranky
blockH = pageBreaks[j] - curY;
// pagebreak prijde na konec stranky
isPageBreak = 1;
pageBreaks.splice(j, 1);
}
}
s+= '<line x1="0" y1="'+curY+'" x2="100%" y2="'+curY+'" stroke-width="1" stroke="red"/>';
// zacneme pravitko
s+= '<pattern id="ruler'+i+'" x="0" y="'+curY+'" width="37.79527559055118" height="37.79527559055118" patternUnits="userSpaceOnUse">';
s+= '<line x1="0" y1="0" x2="100%" y2="0" stroke-width="1" stroke="black"/>';
s+= '</pattern>';
s+= '<rect x="0" y="'+curY+'" width="100%" height="'+blockH+'" fill="url(#ruler'+i+')" />';
// napiseme cislo strany
s+= '<text x="10" y="'+(curY+19+5)+'" class="pageNumber" fill="#ffffff">'+(i+1)+'.</text>';
curY+= blockH;
if (isPageBreak) {
//s+= '<rect x="0" y="'+curY+'" width="100%" height="'+pageBreakHeight+'" fill="#FFFFFF" />';
curY+= pageBreakHeight;
}
}
s+= '</svg>';
domHtml.css('background-image', 'url("data:image/svg+xml;utf8,'+encodeURIComponent(s)+'")');
}
editor.on('NodeChange', refreshRuler);
editor.on("init", refreshRuler);
});
tinymce.init({
plugins: "ruler pagebreak",
toolbar1: "pagebreak",
selector: 'textarea',
height: 300
});
Btw.
Imagine Google would make free rich text editor!
CKEditor also can't do it and is paid, what a shame!
It is possible, but hard, error prone and you won't get near MS Word. Maybe you can get it right for one font or so.
What you need to do is a custom CSS and a custom template. The template should resemble a grey background with the white page (with a shadow :). Define some buttons that will add custom classes to the template with Javascript and you will get the margin settings (narrow, wide, normal, no values). For the page break, you can insert a special <hr> that styles the underlying page template as if it ends and another one begins. Bear in mind you will have to replace almost all of your custom CSS in order to make it print-ready. Also, you should make tinymce fullscreen.
Another (very weird) approach that I've seen is a combination between tinymce and a PDF renderer library or equivalent. This way you'll get the WYSIWYG right.
Hope that helps.
I modified the Martin's ruler. Thanks
// plugin pravítko, modified by SerhatSoylemez
tinymce.PluginManager.add("editor-ruler", function(editor) {
var domHtml;
var lastPageBreaks;
var pagen= tinymce.util.I18n.translate("p.");
function refreshRuler() {
try {
domHtml = $(editor.getDoc().getElementsByTagName('HTML')[0]);
} catch (e) {
return setTimeout(refreshRuler, 50);
}
var dpi = 96
var cm = dpi/2.54;
var a4px = cm * (29.7); // A4 height in px, -5.5 are my additional margins in my PDF print
// ruler begins (in px)
var startMargin = 0;
// max size (in px) = document size + extra to be sure, idk, the height is too small for some reason
var imgH = domHtml.height() + a4px*5;
var pageBreakHeight = 4; // height of the pagebreak line in tinyMce
var pageBreaks = []; // I changed .mce-pagebreak with .page-break !!!
domHtml.find('.page-break').each(function() {
pageBreaks[pageBreaks.length] = $(this).offset().top;
});
pageBreaks.sort();
// if pageBreak is too close next page, then ignore it
if (lastPageBreaks == pageBreaks) {
return; // no change
}
lastPageBreaks = pageBreaks;
// console.log("Redraw ruler");
var s = '';
s+= '<svg width="100%" height="'+imgH+'" xmlns="http://www.w3.org/2000/svg">';
s+= '<style>';
s+= '.pageNumber{font-weight:bold;font-size:20px;font-family:verdana;text-shadow:1px 1px 1px rgba(0,0,0,.6);}';
s+= '</style>';
var pages = Math.ceil(imgH/a4px);
var i, j, curY = startMargin;
for (i=0; i<pages; i++) {
var blockH = a4px;
var isPageBreak = 0;
for (var j=0; j<pageBreaks.length; j++) {
if (pageBreaks[j] < curY + blockH) {
// musime zmensit velikost stranky
blockH = pageBreaks[j] - curY;
// pagebreak prijde na konec stranky
isPageBreak = 1;
pageBreaks.splice(j, 1);
}
}
curY2 = curY+38;
s+= '<line x1="0" y1="'+curY2+'" x2="100%" y2="'+curY2+'" stroke-width="1" stroke="red"/>';
// zacneme pravitko
s+= '<pattern id="ruler'+i+'" x="0" y="'+curY+'" width="37.79527559055118" height="37.79527559055118" patternUnits="userSpaceOnUse">';
s+= '<line x1="0" y1="0" x2="100%" y2="0" stroke-width="1" stroke="black"/>';
s+= '<line x1="24" y1="0" x2="0" y2="100%" stroke-width="1" stroke="black"/>';
s+= '</pattern>';
s+= '<rect x="0" y="'+curY+'" width="100%" height="'+blockH+'" fill="url(#ruler'+i+')" />';
// napiseme cislo strany
s+= '<text x="10" y="'+(curY2+19+5)+'" class="pageNumber" fill="#e03e2d">'+pagen+(i+1)+'.</text>';
curY+= blockH;
if (isPageBreak) {
//s+= '<rect x="0" y="'+curY+'" width="100%" height="'+pageBreakHeight+'" fill="#ffffff" />';
curY+= pageBreakHeight;
}
}
s+= '</svg>';
domHtml.css('background-image', 'url("data:image/svg+xml;utf8,'+encodeURIComponent(s)+'")');
}
function deleteRuler() {
domHtml.css('background-image', '');
}
var toggleState = false;
editor.on("NodeChange", function () {
if (toggleState == true) {
refreshRuler();
}
});
editor.on("init", function () {
if (toggleState == true) {
refreshRuler();
}
});
editor.ui.registry.addIcon("square_foot", '<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24">'+
'<g><rect fill="none" height="24" width="24"/></g><g><g><path d="M17.66,17.66l-1.06,1.06l-0.71-0.71l1.06-1.06l-1.94-1.94l-1.06,1.06l-0.71-0.71'+
'l1.06-1.06l-1.94-1.94l-1.06,1.06 l-0.71-0.71l1.06-1.06L9.7,9.7l-1.06,1.06l-0.71-0.71l1.06-1.06L7.05,7.05L5.99,8.11L5.28,7.4l1.06-1.06L4,4'+
'v14c0,1.1,0.9,2,2,2 h14L17.66,17.66z M7,17v-5.76L12.76,17H7z"/></g></g></svg>');
editor.ui.registry.addToggleMenuItem("ruler", {
text: "Show ruler",
icon: "square_foot",
onAction: function() {
toggleState = !toggleState;
if (toggleState == false) {
deleteRuler();
} else {
refreshRuler();
}
},
onSetup: function(api) {
api.setActive(toggleState);
return function() {};
}
});
});
function loadJavascript(url) {
var script = document.createElement("script");
script.src = url;
document.head.appendChild(script);
}
loadJavascript("https://code.jquery.com/jquery-3.5.1.min.js");
I want create a simple animation where length of a rectangle changes smoothly to half its value when 'mouseover' event occurs and doubles up again when 'mouseout' event occurs.
the following code works if mouse is moved slowly but doesn't if mouse is moved rapidly. The rectangle just gets stuck if mouse is moved rapidly. Please suggest how to overcome this.
<body>
<svg id="svg" width="600" height="100">
<rect id="myrect" width="600" height="100" fill="green">
</svg>
<script>
svg = document.getElementById("svg");
var w = 600;
var step = 10;
svg.addEventListener("mouseover", function(){
function anim () {
w -= step;
if( w >= 300) {
myrect = document.getElementById("myrect");
myrect.setAttribute("width", w);
requestAnimationFrame(anim);
}
}
anim();
});
svg.addEventListener("mouseout", function(){
function anim () {
w += step;
if( w <= 600) {
myrect = document.getElementById("myrect");
myrect.setAttribute("width", w);
requestAnimationFrame(anim);
}
}
anim();
});
</script>
</body>
Today, please do not use JavaScript for this kind of animation.
CSS Transitions are made for this - and they show way better performace as most browser can calculate them faster on graphic card rather than CPU.
For more info see W3C School on CSS Transitions
So an improved and lot shorter version of your example would look like
#myrect {
transition: transform 0.5s ease;
}
#myrect:hover {
transform: scale(0.5, 1.0);
}
<svg id="svg" width="600" height="100">
<rect id="myrect" width="600" height="100" fill="green" />
</svg>
Note: It seems you can not animate 'width' property for SVGs by simple CSS like done before. For easy handling, you can use translate-property and scale it to 50% of width instead.
(Ok, according to SVG Standard - Section Attributes 'width' can be animated with the more compelx SVG-animation logic, but CSS looks quiet easier and this knowledge can be applied to HTML elements as well :-) )
Short explanation of the below code:
Animation process unified in a single function that can work in two direction dependent on the direction parameter value. Mouse events just change the animation direction. Variable animActive prevent from double call of requestAnimationFrame and makes direction changes smooth.
<body>
<svg id="svg" width="600" height="100">
<rect id="myrect" width="600" height="100" fill="green">
</svg>
<script>
svg = document.getElementById("svg");
var w = 600;
var step = 10;
var direction;
var animActive = false;
svg.addEventListener("mouseover", function(){
direction = true;
if (!animActive)
requestAnimationFrame(anim);
});
svg.addEventListener("mouseout", function(){
direction = false;
if (!animActive)
requestAnimationFrame(anim);
});
function anim(){
if (direction){
if( w > 300){
animActive = true;
w -= step;
myrect = document.getElementById("myrect");
myrect.setAttribute("width", w);
requestAnimationFrame(anim);
}
else
animActive = false;
}
else{
if( w < 600){
animActive = true;
w += step;
myrect = document.getElementById("myrect");
myrect.setAttribute("width", w);
requestAnimationFrame(anim);
}
else
animActive = false;
}
}
</script>
</body>
I have d3 code that produces this svg. It is a snippet of a larger dynamic graph that has an image within a div within a foreignobject within a group element.
<svg>
<g class = "node" transform = "translate(711.2977697849274,120)">
<circle class = "cirBG" r = "70"></circle>
<foreignobject class = "fObj" x = "-25" y = "-25" height = "50" width = "50" overflow = "visible">
<div class = "logo"
style = "background-image: url(imgs/ppl/gbProfile.png); height: 50px; width: 50px; background-size: 50px 50px; background-position: 0px 0px; background-repeat: no-repeat;"></div>
</foreignobject>
</g>
</svg>
Then I have d3 code to the change the size of .logo div but none of it works
var logoDiv = cNode.select( ".logo" );
// tried strict javascript //////////////////////
logoDiv.style.width = '"' + logoWidth + 'px"';
logoDiv.style.height = '"' + logoHeight + 'px"';
// tried d3 style ////////////
logoDiv.style( "width", logoWidth + 'px' );
logoDiv.style( "height", logoHeight + 'px' );
I saw some examples of Jquery and will use it if it's the only option but trying to keep it simple to existing d3 library. Any help will be appreciated
The d3 style seems to work. Did you select logoDiv with d3?
The following code works for me:
var logoDiv = d3.select( ".logo" );
logoDiv.style('background-color',"blue");
logoDiv.style('height','200px')
JsFiddle: http://jsfiddle.net/8m6kT/
Also, you should probably use the xhtml namespace for the div as it is not inferred in a foreignObject:
<foreignobject class = "fObj" x = "-25" y = "-25" height = "50" width = "50" overflow ="visible">
<xhtml:div class = "logo" style = "..."></xhtml:div>
</foreignobject>
I am trying to learn SVG and have the following code. The point clicked is printed ok, but no shape is created. Can someone plese point out what I am doing wrong.
<?xml version='1.0' standalone='no'?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 20001102//EN' 'http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd'>
<svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg' onload='Init(evt)' onmousedown='Grab(evt)' >
<title>Drag And Drop</title>
<script><![CDATA[
var SVGDocument = null;
var SVGRoot = null;
var BackDrop = null;
function Init(evt)
{
SVGDocument = evt.target.ownerDocument;
SVGRoot = SVGDocument.documentElement;
BackDrop = SVGDocument.getElementById('BackDrop');
}
function Grab(evt)
{
var targetElement = evt.target;
if ( BackDrop == targetElement )
{
alert ( 'point: ' + evt.clientX + ' ' + evt.clientY);
var c1 = SVGDocument.createElementNS("http://www.w3.org/2000/svg", "circle");
c1.setAttribute("cx", evt.clientX);
c1.setAttribute("cy", evt.clientY);
c1.setAttribute("r", "100");
c1.setAttribute("fill", "#336699");
BackDrop.appendChild(c1);
}
};
]]></script>
<rect id='BackDrop' x='-10%' y='-10%' width='110%' height='110%' fill='none' pointer-events='all' />
</svg>
BackDrop is a <rect> and <rect> elements are not containers that can have graphic element children. If you create the circles as children of the root element instead i.e. change
BackDrop.appendChild(c1);
to
SVGRoot.appendChild(c1);
the circles will appear.