CKEditor5 right way to change table html structure - javascript

Our organization is using a HTML to OpenXML word converter. This converter is expecting a table like
<table cellpadding="2" border="1" style="width: 100%"><caption>Table caption</caption><tbody><tr><td>Some value</td></tr></tbody></table>
while CKEditor5 would produce something like
<figure class="table"><figcaption>Table caption</figcaption><table><tbody><tr><td>Some value</td></tr></tbody></table></figure>
is there an easy way to convert the HTML WITHOUT needing to copy/inherit most of the TablePlugin?
Currently, I'm changing the HTML text before calling the backend, but we are having multiple services. Therefore, we definitely will get problems when someone forgets to call the converter before calling the backend.
Some solution inside a wrapper of CKEditor5 or directly in CKEditor5 would be appreciated.

Related

Why isn't TinyMCE 5 rendering formatted html on page and in database?

I am programming newbie and I need your help.
I'm coding my first project and I ran across problem.
I needed text editor so I included TinyMCE 5. I'm coding in JavaScript and using mongoDB.
I included tinyMCE like this
<script src="https://cloud.tinymce.com/5/tinymce.min.js?apiKey=your_API_key"></script>
Everything works fine, https://imgur.com/a/hjwKipE
Until I try to save it to the mongoDB database: https://imgur.com/a/iaFRaP6
and render it on the page: https://imgur.com/a/o2rgK1X.
This is code I managed to grab from other StackOverflow post: https://imgur.com/a/JTWpgay
My goal is to render text on page(in ejs file), without html tags.
Thank you for your help,
Marian
Make sure you are getting plain html to write the textarea tag:
<textarea>
<p><strong>This is the strong text</strong><br></p>
</textarea>
So don't use the set the init_instance_callback, instead write the html to the textarea tag.
If you use the init_instance_callback, make sure ur template write only plain html.

How to save w3schools example as an AngularJs component?

I am creating a simple app in AngularJS and I am trying to build form steps wizard but JS is not getting applied.
I have copy pasted all the code from w3schools editor to the component.html file
getting the following output
output
The fastest way you can reuse this code is to take advantage of HTML <iframe>. Assuming that you saved all code from w3c site to file my_downloaded_code.html your iframe will look like
<iframe src = "path/to/file/my_downloaded_file.html" width="350px" height="600px" frameborder="0" scrolling="no"></iframe>
Attributes width, height etc. are not mandatory of course, but I have chosen them for exactly that case.
What's more the form is sent to action_page.php after confirmation, so You have to create such a file in appropriate localization (the same as the localization of my_downloaded_code.html).
However, if you like to make a AngularJS component containing that code it won't be very easy because as #Tomas commented
Code on the site w3school not written in Angularjs, but in pure JS...
but it is possible of course :) .
What have to be done?
Functions have to be moved to component controller.
Functions and variables in controller have to be visible in template, thus we must assign them to $scope.
on-click has to be changed to ng-click
Content of <style> tag has to be moved to .css file
You must create your action_page.php
I have made plunker with such working component for You.

Riot JS still not rendering yielded tables properly

I am currently writing a generic table component that provides some basic functionality to all tables I want to display on my site. Each actual table will then use this generic table and yield headers and content into the generic table.
With the - at the time of writing - latest version of Riot JS, there still appears to be a problem when yielding content into a table.
More specifically, when I yield into a table, Riot puts this information into the main tag (minus the tr and td tags) but keeps the actual table empty.
https://jsfiddle.net/ytgv5o5k/1/
Is there a fix coming up or a workaround that I can use right now? Some sources mention the data-is qualifier, but I don't see how to use this if I would like to re-use a generic table component.
Thanks a lot!
This is a major pain point when using a framework that utilizes custom html tags. It actually has nothing to do with riot. What you're trying to do is not valid html, so the browser kicks the invalid tags out of the table.
See here: http://riotjs.com/guide/#riot-dom-caveats
If it makes sense in your application to break your table into separate tags, you should be able to handle it like this:
<table-container>
<table>
<tr data-is='table-row' each={ row in rows } row={ row }></tr>
</table>
</table-container>
You won't be able to yield anything into a table that isn't valid html. As far as I know, riot has no concept of processing html before placing it in the DOM, which is when your tags will be moved out of the table. The only possibility of using <yield/> is to place content into cells
<td>
<yield/>
</td>

Convert RTF to HTML in Javascript

Is there a way to convert RichTextFormat to HTML in Javascript?
Iam trying to paste the RTF content copied , from clipboard iam getting the text/rtf content, now i need to show it with all styles applied in a div. how can i achive this ?? any suggestions?.
Eg:
if i copy
ghkasjhdk
gjhgjh
^^ this as RTF
i will get a string simmilar to this
{\rtf1\ansi\ansicpg1252\deff0\deflang1033{\fonttbl{\f0\fnil\fcharset0 Calibri;}}
{\*\generator Msftedit 5.41.21.2510;}\viewkind4\uc1\pard\sa200\sl276\slmult1\lang9\b\f0\fs40\par
\b0\fs22 ghkasjhdk\par
\b\fs40 gjhgjh}
i need this to be converted to html with <strong> tags and <br>'s respectively
You may wish to adapt this NodeJS package: rtf2html.
I understand this has already be done with an older version, as you can see in this Github repository.
After you get the corresponding HTML code, you can add it to your container using the usual DOM methods, or a library like jQuery if you are already using it.

How can i find source of html

I want to know form where page loads html...
For example, in my developing page I find this code
<div id="dnn_NavPane"><a name="alo"></a>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
//some code here
</table>
</div>
In sources I find that .ascx file, in which I see only this
<div runat="server" id="NavPane"></div>
So I about 2 hours can't find from where he feel div with that content? How can I find that code?
Here they used DotNetNuke and maybe secret is in that? Who can help?
When your DotNetNuke skin has a <div /> that is runat=server, that gets transformed into a "pane." DotNetNuke allows you to add modules to the pane, so you'd need to see what module is in there to see how its markup is being generated. It will probably be somewhere in the website's DesktopModules folder, and you can look it up in the "Module Definitions" or "Extensions" page (depending on the version of DNN) to see more information about a module.
If you don't have access to the running website, the assignment of a module to a pane is stored in the database. You'll want to find the page in the Tabs table, then check the entries in the TabModules table to see what module is in that pane on that tab. From there, follow TabModules to Modules to ModuleDefinitions to ModuleControls to see which control is generating the markup.
If they are using DotNetNuke then the content is being dynamically generated.
You can only see <div runat="server" id="NavPane"></div> because the content is dynamically being added to this.
I you want to edit the html, then you will need to edit it through the DotNetNuke Content Management System.
you know that server id of the element is NavPane. Go to codebehind and track all the operations with that control. try to work out when the inner html is assigned. Then attach to server process, make breakpoints there and see in debugger what happens.
Here they used DotNetNuke and maybe secret is in that?
maybe :) if you don't know how the underlying layer works the complexity of your task grows sufficiently

Categories