Jump to content
BySplitDecision

Prevent Froala Editor removing html and body tags

Recommended Posts

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 by BySplitDecision

Share this post


Link to post
Share on other sites

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 by BySplitDecision

Share this post


Link to post
Share on other sites

Are you sure that's what is happening? If you reverse the calls, does fullPage work but it's editable?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Screen Shot 2019-02-19 at 02.24.00.png

Share this post


Link to post
Share on other sites

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
});

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.