I need a WYSIWYG HTML editor that can edit PHP Blade and Handlebars* templates. I've tried TinyMCE, CKEditor and bootstrap wysihtml5 but they all "fix" my invalid HTML. Can anyone suggest an alternative?
I need to be able to toggle between WYSIWYG and Source mode without the following being altered.
<table>
<thead>
<tr>
<tr>Column 1</tr>
<tr>Column 2</tr>
</tr>
</thead>
<tbody>
#foreach ($data as $datum)
<tr>
<td>{{ $datum->col1 }}</td>
<td>{{ $datum->col2 }}</td>
</tr>
#endforeach
</tbody>
</table>
All the editors I have found remove the #foreach and sometimes break the table too. I don't care too much if the "visual" mode is broken but I need the HTML to remain untouched.
*I prefix Handlebars variables with $ so they're broadly compatible with blade templates.
You can use CKEditor for that, however you will have to define which parts of the code you DON'T want the editor to fix.
CKEditor have the protectedSource feature which you can use to define the parts of the source that the editor should not touch, even if they are not valid HTML.
I've created an example that will work with your #foreach loop and the variables in your example. You can take it and enhance it to fit your needs:
CKEDITOR.editorConfig = function( config ) {
....
....
config.protectedSource.push( /#foreach.*/g );
config.protectedSource.push( /#endforeach.*/g );
config.protectedSource.push( /{{.*}}/g );
}
Here is a working fiddle you can check: https://jsfiddle.net/0tw75xt3/
Note that I changed the
<tr>
<tr>Column 1</tr>
<tr>Column 2</tr>
</tr>
since it's not a valid HTML and I guessed it wasn't supposed to be <tr><tr>
If you want to support more complex templates you will need some more complex regular expressions inside the protectedSource, however this can really give you a good place to start.
There were some WYSIWYG editors for React, that I was able to find.
https://github.com/Pagedraw/pagedraw
https://github.com/c8r/lab
Demo of Pagedraw on YouTube.com, https://www.youtube.com/watch?v=NjH3koR1E6w
I read about the idea about WYSIWYG editing of components in https://medium.com/#vlascik/ember-in-the-middle-of-2019-the-good-the-bad-the-ugly-hopefully-d641cc73d6d1:
https://pinegrow.com
https://grapesjs.com/
Pinegrow explicitly disavows this in the documentation, https://pinegrow.com/docs/pages/pages.html#formats
I saw an attempt to get Handlebars working with GrapesJS, but it ended up inconclusively, https://github.com/artf/grapesjs/issues/1162
Related
I am trying to add an 100 X 100 pixel image in a table in mpdf. But the table disappears when I do so.
<table>
<tr>
<td><img src="https://someimage.jpg" width=100 height=100></td>
</tr>
</table>
But when I use tag outside table it fetches the image and shows it perfectly fine.
How do I put image in table in mpdf (is there any trick)?
From my experience when I tried to use MPDF with tables and images inside cells I couldn't manage to set the correct image sizes. I fixed it with div's instead of table. If possible try this solution
It is possible to put images in a table in mpdf. Earlier i was making syntax mistake. I had forgot a comma. Sorry for inconvineance.
<table>
<tr>
<td><img src="https://someimage.jpg" style="height:50px; width:100px;"></td>
</tr>
</table>
I think what I want to ask if it's possible to get around sql:hide (https://learn.microsoft.com/en-us/sql/relational-databases/sqlxml-annotated-xsd-schemas-using/hiding-elements-and-attributes-by-using-sql-hide?view=sql-server-2017), but I've described my actual problem below in case I'm mistaken:
I'm trying to scrape the "foo" urls from a website with a DOM similar to the following:
<html>
<body>
<tbody>
<tr>
...
...
</tr>
</tbody>
<table>
<tbody>
<tr>
...
</tr>
<tr>
...
</tr>
</tbody>
</table>
</body>
</html>
Whenever I try print(response.css('a')) or equivalently print(response.xpath('//a')), I can see the "foo" urls, but not the "bar" urls. Additionally, using XPath I can access up to the table, but print(response.xpath('//table//*')) and print(response.xpath('//table//a')) both output [].
Could it be possible that the elements of table have been hidden from Scrapy somehow? How would one resolve this?
Thanks in advance. This is mainly for interest as the urls have a predictable pattern anyway.
I know that this is just a wild guess, but you can try
//a[starts-with(#href,'foo')]/text()
This should give you the text values of all a tags which have a href attribute which value starts with the string 'foo'.
But it could be possible that some parts of the result XML/HTML are loaded by JavaScript at a later time what would explain your difficulties locating certain elements.
I've tried to implement the formatting attribute for Dandelion Datatables as specified here using Thymeleaf to no avail, like so:
<table dt:table="true" dt:serverside="true" dt:url="#{/somefnplace}">
<thead>
<tr>
<th dt:property="someCurrencyField" dt:format="{0, number, #.##}">
</tr>
</thead>
</table>
...but this does not do anything. Anyone got an idea on how this is supposed to work, or do I have to create render functions for every column because this feature is broken?
Unfortunately, the dt:format attribute is not compatible with AJAX sources. See the last column of the link you've mentioned.
In the upcoming version, it will simply be removed, because using DOM sources, expression utility objects meet all needs perfectly.
So yes, currently the only way is to use the dt:renderFunction attribute, which will refer to a rendering function, one for each column to need to display in a specific format.
i have a j2ee written with spring framework and we are using tiles for templating.
overtime, developers have created numerous css styles and reuse them all over the jsp pages. for example we created a <table class="tablestyle blue ">, or <select class="style1 style2 style3"> and it is used in multiple pages. the problem i faced is that whenever we create a new table/select, we have to ensure we key in the correct css styles and this is cumbersome.
my question is, is it possible to put this <table> and <select> with its css class styles into a template and reuse it in other templates?
you can have this kind of tile for example it is the table
<table>
<thead>
<tr>
<c:foreach items="${tableColumn}" var="column">
<td><c:out value="${column}"/>
</c:foreach>
</tr>
</thead>
</table>
from the controller you will just put an column attribute to make it more flexible
and the select is all the same right?
<select>
<c:foreach items="${optionItems}" var="option">
<option><c:out value="${option}"/></option>
</c:foreach>
</select>
in this case you could reuse the table and option tile in every jsp you want it.
I am using Doxygen's \page, \subpage and \section constructions to make overview documentation for my application. Somewhere in this I am using HTML to create a nicely formatted table.
However, I want to remove a part of the table in the output, without removing the comment itself. E.g.
/*!
\page MAINPAGE Main Page
<table>
<tr>
<td>Do This</td>
<td>100</td>
</tr>
<tr>
<td>Do That</td>
<td>200</td>
</tr>
<tr>
<td>Yet another one</td>
<td>300</td>
</tr>
</table>
I want to remove the line containing 'Do That' without removing the 'text' itself from the file.
If this were simple source code, I could simply comment this out using // or /* */.
I found out that I could use \if or \latexonly (we only generate html output) but both seem a workaround (looks like using if(false) in code to comment out a block).
Isn't there a clean way to comment out comment in Doxygen?
Did you try \cond \endcond tags? It's described here http://www.doxygen.nl/manual/commands.html#cmdcond
http://www.doxygen.nl/manual/commands.html#cmdendcond
Enclose the part to be excluded within #cond and #endcond blocks. Like so:
#cond DOXYGEN_EXCLUDE
<tr>
<td>Do That</td>
<td>200</td>
</tr>
#endcond
and ensure that you have not defined DOXYGEN_EXCLUDE in any place that doxygen can see. DOXYGEN_EXCLUDE is just what I use, it not a special keyword, you can choose any name you prefer.
Besides \cond...\endcond you can also use HTML comments, i.e <!-- this is a comment in a comment --> inside doxygen comments, as explained at the bottom of this page in the manual http://www.doxygen.org/manual/htmlcmds.html