BySplitDecision Posted February 4, 2019 Share Posted February 4, 2019 (edited) Good afternoon, I'm trying to implement the Froala Text Editor into my site and couldn't get it working. I created a basic html file and managed to get a certain method to work which is great. The problem is that I want the editor to allow all of the HTML tags, but when I enter the <html><body> tags to the code editor and then go back to the text editor, it deletes it. I have tried to use the allowedTags method but it doesn't seem to stop stripping the <html> and <body> tags. Does anyone have experience with this? I've posted my code below. Many thanks, BySplitDecision <?php include("setup/start.php"); ?> <html> <head> <title>Code Testing Laboratory</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/styles.css"> <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> --> <!-- Include external CSS. --> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.css"> <!-- Include Editor style. --> <link href="https://cdn.jsdelivr.net/npm/froala-editor@2.9.2/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" /> <link href="https://cdn.jsdelivr.net/npm/froala-editor@2.9.2/css/froala_style.min.css" rel="stylesheet" type="text/css" /> </head> <body> <section id="header"> <div class="container"> <h3 id="logo"> <a href="<?php { echo $page;} ?>">Laboratory Technician</a> </h3> </div> </section> <!-- Create a tag that we will use as the editable area. --> <!-- You can use a div tag as well. --> <textarea></textarea> <!-- Include external JS libs. --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/codemirror.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/xml/xml.min.js"></script> <!-- Include Editor JS files. --> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@2.9.2/js/froala_editor.pkgd.min.js"></script> <!-- Initialize the editor. --> <script> $(function() { $('textarea').froalaEditor({ htmlAllowedTags: ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'menu', 'menuitem', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'pre', 'progress', 'queue', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'style', 'section', 'select', 'small', 'source', 'span', 'strike', 'strong', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr'] }); // $('textarea').froalaEditor('edit.off'); }); </script> </body> </html> Edited February 4, 2019 by BySplitDecision Quote Link to comment https://forums.phpfreaks.com/topic/308281-prevent-froala-editor-removing-html-and-body-tags/ Share on other sites More sharing options...
requinix Posted February 4, 2019 Share Posted February 4, 2019 When in doubt, Ctrl+F in the documentation might help. 1 Quote Link to comment https://forums.phpfreaks.com/topic/308281-prevent-froala-editor-removing-html-and-body-tags/#findComment-1564220 Share on other sites More sharing options...
BySplitDecision Posted February 4, 2019 Author Share Posted February 4, 2019 Thank you very much! That's exactly what I was looking for. Kind regards, Tom Quote Link to comment https://forums.phpfreaks.com/topic/308281-prevent-froala-editor-removing-html-and-body-tags/#findComment-1564238 Share on other sites More sharing options...
BySplitDecision Posted February 19, 2019 Author Share Posted February 19, 2019 (edited) Good evening, I managed to get the Froala editor to keep all of the HTML tags, but I also want to initialise it with 'edit.off' on some occasions depending on if another element has a 'disabled' class. The code I now have made for the froala editor initialisation is: <script> $(function() { $('textarea').froalaEditor({ fullPage: true }); $('textarea').froalaEditor('edit.off'); }); </script> Now, I know that I am initialising it twice, which is why the fullPage is not working. I've searched for days online and gone through the documentation over and over searching for something sounding similar but to no avail. Is there a way that I can combine the 2 into one initialisation? I have tried the following: <script> $(function() { $('textarea').froalaEditor('edit.off',{ fullPage: true }); // $('textarea').froalaEditor('edit.off'); }); </script> and <script> $(function() { $('textarea').froalaEditor({ fullPage: true, 'edit.off' }); // $('textarea').froalaEditor('edit.off'); }); </script> Many thanks for any information you can help me with. BSD Edited February 19, 2019 by BySplitDecision Quote Link to comment https://forums.phpfreaks.com/topic/308281-prevent-froala-editor-removing-html-and-body-tags/#findComment-1564613 Share on other sites More sharing options...
requinix Posted February 19, 2019 Share Posted February 19, 2019 Are you sure that's what is happening? If you reverse the calls, does fullPage work but it's editable? Quote Link to comment https://forums.phpfreaks.com/topic/308281-prevent-froala-editor-removing-html-and-body-tags/#findComment-1564614 Share on other sites More sharing options...
BySplitDecision Posted February 19, 2019 Author Share Posted February 19, 2019 That's correct, when I reversed it, content is editable and the fullPage works. I attached the code and result below: Quote Link to comment https://forums.phpfreaks.com/topic/308281-prevent-froala-editor-removing-html-and-body-tags/#findComment-1564615 Share on other sites More sharing options...
requinix Posted February 19, 2019 Share Posted February 19, 2019 It's weird: you should be able to do that, there must be a way to set it up and then call methods on it, but it's not working. And they don't provide the source to read through. Well, edit.off supposedly simply removes the contenteditable attribute. You could do that normally through straight jQuery instead of their API. Quote Link to comment https://forums.phpfreaks.com/topic/308281-prevent-froala-editor-removing-html-and-body-tags/#findComment-1564617 Share on other sites More sharing options...
BySplitDecision Posted February 19, 2019 Author Share Posted February 19, 2019 Managed to find this in another set of documentation: Changing my code to this: <script> $(function() { $('textarea').froalaEditor(); $('textarea').editable('option', 'fullPage', true); }); </script> renders this error in the console: '.editable is not a function' ? Many thanks, BSD Quote Link to comment https://forums.phpfreaks.com/topic/308281-prevent-froala-editor-removing-html-and-body-tags/#findComment-1564618 Share on other sites More sharing options...
requinix Posted February 19, 2019 Share Posted February 19, 2019 You're looking at the documentation for v1. A shot in the dark: $('.selector').on('froalaEditor.initialized', function(e, editor) { editor.edit.off(); }).froalaEditor({ fullPage: true }); Quote Link to comment https://forums.phpfreaks.com/topic/308281-prevent-froala-editor-removing-html-and-body-tags/#findComment-1564630 Share on other sites More sharing options...
BySplitDecision Posted February 26, 2019 Author Share Posted February 26, 2019 Good evening, Only just got free time to work on this since your reply but this works exactly as needed except it seems to be stripping only the <style> tag now. Checking the source code, there is a <style> tag with some default CSS but when viewing the source via the 'Code Editor' button in Froala, it is completely removed. I've attached 2 images to show you what I mean... What I have done is explicitly set the 'htmlAllowedTags' option to allow the <style> tag as there is also an option called 'htmlRemoveTags', which lists <style> as a default removed element. Could it be something to do with sanitising? How can it appear in the browser source, but not the code editor source? Quote Link to comment https://forums.phpfreaks.com/topic/308281-prevent-froala-editor-removing-html-and-body-tags/#findComment-1564836 Share on other sites More sharing options...
requinix Posted February 26, 2019 Share Posted February 26, 2019 I'm not sure what the data-fr-style=true is, but it could mean that the style is for the editor itself and so should not be included when serialized. What if you had a plain <style>? Quote Link to comment https://forums.phpfreaks.com/topic/308281-prevent-froala-editor-removing-html-and-body-tags/#findComment-1564846 Share on other sites More sharing options...
BySplitDecision Posted February 26, 2019 Author Share Posted February 26, 2019 Ah thank you. When adding a plain <style></style> tag to the <head> it still deletes it from the code editor, but setting data-fr-style to FALSE, makes all of the <style> and code appear. Thank you very much for your help. Kind regards, BSD Quote Link to comment https://forums.phpfreaks.com/topic/308281-prevent-froala-editor-removing-html-and-body-tags/#findComment-1564863 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.