Get html of a table in TinyMCE (using the table plugin) - javascript

I have a TinyMCE editor with the table plugin loaded (I'm using the TinyMCE Advanced Wordpress plugin). I have to get a selected table's HTML code (a table that you are currently editing - the on you have resize controls on). With normal text I can use tinyMCE.activeEditor.selection.getContent(), but this is not working when dealing with a table. What is the correct way of doing this?
Thanks.

You might use tinyMCE.activeEditor.selection.getNode();. If this is a table element you got your table and will be able to get the html using
var node = tinyMCE.activeEditor.selection.getNode();
var html = node.innerHTML;
// now you will only need to take care of the surrounding table element
// something like "<table>"+ html +"</table>"; maybe having a look at node.attributes

Related

Link not clickable in dynamically added (JQuery) row of list in HTML

I am building a chatbot that provides a link on occasion (using the Chatterbot package as a base). The link comes from python code to my HTML file from where a row is appended to the existing list using JQuery. My problem is that this link does not show up as clickable. I have tried JavaScript link() and html(). I have also tried Anchorme, Autolinker and Linkify.
This is where I am receiving the output from the chatbot:
$submit.done(function(statement) {
createRow(statement);
And this is the code for the row creation using JQuery:
function createRow(text) {
var $row = $('<li class="list-group-item"></li>');
$row.text(text);
$chatlog.append($row);
}
This is what the output looks like.
$row.html(text) should work if the image is anything to go by.

jquery - dynamic content inside a html table not getting recognised by .innerHtml code (JS / JQuery)

I have a HTML table in my web-application to which I allow my users to dynamically add rows using the onclick event.
However when I try to get the HTML contents of this table, (which is my objective) using either :
$("#table1").html()
or
var x = document.getElementById("table1").innerHTML;
I get only the initial table, and not the rows that were added dynamically.
Interestingly in jQuery when I use
$("#nutritiontable ").text()
I get details of the dynamic rows also, but obviously not the html tags for which I have use. I want both.
Want to know if I missed something, or if anyone knows of any other way to get the entire HTML table with the dynamic content and with the html tags intact.
If you add rows by
$("#table1").append("<tr><td>something</td></tr>")
Then
$("#table1").html()
Will give you everything.
You can use append() function in jQuery.
$("#tableid").append('<tr><td>Row text</td></tr>');

Javascript retrieve what in the tag using class attribute

im working on a Asp.net MVc application to create a scheduler application for workers.
The schedule is auto-generate using a JavaScript library called: Dhtmlx Scheduler.
upon populating the data, it creates some Html and places the content.
I would like to retrieve the content and was wondering if it's possible by obtaining the info from its class.
Pic for reference:
I am trying to retrieve the "Abel Toribio" so i can do a reverse search in my database for his name and eventually display a tooltip over that td with further information about the person.
So far I have tried:
var engName = document.getElementsByClassName("dhx_matrix_scell");
alert(engName[0].getData());
alert(engName[0].getContent());
alert(engName[0].getText());
alert(engName[0].getValue());
They all seem to give me undefined.
Thanks!
engName[0].innerHTML - for contents inside the tag 'html'.
engName[0].outerHTML - for contents inside the tag wrapped in the tag.
engName[0].textContent - for contents inside the tag 'text'.
As you tagged jquery as well,for tooltip purpose, you can write mouseover event using jquery this way :
$(".dhx_matrix_scell").on("mouseover",function(){
alert($(this).text());
// do something here
});
if you want to get all, you can get them like this:
$.each(".dhx_matrix_scell",function(){
alert($(this).text());
});

Clone HTML and remove some nodes using jQuery

I'm developing a little tool for live editing using Chrome DevTools, and I have a little button "Save" which grabs the HTML and sends it to server to update the static file (.html) using Ajax. Very simple indeed.
My problem is that I need to filter the HTML code before sending it to the server, I need to remove some nodes and I'm trying to achive this using jQuery, something like this:
// I grab all the HTML code
var html = $('<div>').append($('html').clone()).html();
// Now I need to remove some nodes using jQuery
$(html).find('#some-node').remove();
// Send the filtered HTML to server
$.post('url/to/server/blahblahblah');
I already tried this Using jQuery to search a string of HTML with no success. I can't achieve to use jQuery on my cloned HTML code.
Any idea about how to do this?
The DOM is not a string of HTML. With jQuery, you do DOM manipulation, not string manipulation.
What you're doing is
cloning the document (unnecessary because you convert it to HTML anyway),
appending that cloned document to a new div for some reason
converting the content of that div to an HTML string
converting that HTML back to DOM nodes $(html) (so we're back to the first point above)
finding and removing an element in those nodes
presumably posting the html variable to the server.
Unfortunately, the html string has not changed because you manipulated DOM nodes, not the string.
Hopefully you can see above that you're doing all sorts of conversions that have little to do with what you ultimately want.
I don't know wny you'd need to do this, but all you need is to do a .clone(), then the .find().remove(), then .html()
var result = $("html").clone(false);
result.find("#some-node").remove();
var html = result.html();
Maybe like this?
var html = $('html').clone();
html.find('#some-node').remove();

Resizing a specific TinyMCE editor added by JS

I am adding/replacing two textareas with TinyMCE via two different javascript clicks/calls. They have different IDs and are being added correctly by the 'execCommand' call:
tinymce.execCommand('mceAddControl',true,'comment1');
However, I am having trouble resizing the objects when there are more than one on screen. If there is just one I am able to successfully call 'resizeTo' using the 'activeEditor' to resize the object, like this:
tinymce.execCommand('mceAddControl',true,'comment1');
var ed = tinymce.activeEditor;
ed.theme.resizeTo(400, 200);
But when there is more than one editor, I cannot use 'activeEditor' and I don't know how to select a specific editor to resize. I have tried the following, but it didn't work:
var edd = tinymce.get('comment2');
edd.theme.resizeTo(350,306);
Any help/suggestions? Thanks!
In order to have to working tinymce editors with textareas as source elements you have given each of those testareas a unique id. This id will help you to get the correct editor instance.
Use
var editor = tinymce.get('your_textarea_id');
to get the correct editor. That's all.

Categories