froala / wysiwyg-editor Goto Github PK
View Code? Open in Web Editor NEWThe next generation Javascript WYSIWYG HTML Editor.
Home Page: https://www.froala.com/wysiwyg-editor
License: Other
The next generation Javascript WYSIWYG HTML Editor.
Home Page: https://www.froala.com/wysiwyg-editor
License: Other
initEditorSelection() { ....
// Mouse up anywhere else.
if (this.selectionInEditor() && this.text() !== '' && !this.isTouch()) {
this.show(null);
} else {
this.hide();
this.closeImageMode();
}
}, this));
....
}
clicking on a link outside the Froala editor caused the div with Froala initialised then destroyed ,to apply contenteditable='true'
Hi,
Your image upload solution is beautiful, and if you add a file upload feature for handling links to documents the solution would be complete.
Great work!
Hi!
I'm using multiple editable areas on a single page, and every time the page is loaded, one of the editors gets focus. Thus, if I start to type directly after page load, text appears in one of the editable areas.
I'm guessing this is a result of a focus() call being made from javascript for each editable area, as a result of running .editable() on them.
Is this how it works? If so, is there a way to disable that behavior?
When doing a new ordered or un-ordered list with paragraphy set to true, froala 1.1.3 inserts a new paragraph tag inside every list item.
I get a 405 Method Not Allowed error while uploading picture. System runs on Windows 2008 R2 classic asp. Kind regards Marius
Hi!
There seems to be a problem with how getHTML handles UTF-8 encoded characters. The setHTML method on the other hand works as expected; the characters are inserted in the editor and displayed correctly. But getHTML seems to strip any non-ascii characters.
This issue is present in Safari, Chrome and Firefox (the only ones I've tested).
I modified the basic.html example slightly to provide an example. I've added the UTF-8 meta tag and inserted a few lines of JS further down.
<!DOCTYPE html>
<html>
<head>
<link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="../css/froala_editor.min.css" rel="stylesheet" type="text/css">
<style>
body {
text-align: center;
}
section {
width: 80%;
margin: auto;
text-align: left;
}
</style>
<meta charset="UTF-8">
</head>
<body>
<section id="editor">
<div id='edit' style="margin-top: 30px;">
<img src="../img/cute_cat.jpg" alt="Cute cat" width="300" style="float: left; margin-right: 10px; margin-bottom: 10px; margin-top: 10px;"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis diam in odio iaculis blandit. Nunc eu mauris sit amet purus viverra gravida ut a dui. Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim nunc. Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero sit amet eros. Vestibulum a rhoncus felis. Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna mattis fermentum. Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</p>
<p><a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor. Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat. Nulla tincidunt porta vehicula.</p>
<p>Nullam laoreet imperdiet orci ac euismod. Curabitur vel lectus nisi. Phasellus accumsan aliquet augue, eu rutrum tellus iaculis in. Nunc viverra ultrices mollis. Curabitur malesuada nunc massa, ut imperdiet arcu lobortis sed. Cras ac arcu mauris. Maecenas id lectus nisl. Donec consectetur scelerisque quam at ultricies. Nam quis magna iaculis, condimentum metus ut, elementum metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus id tempus nisi.</p>
</div>
<div id="target"></div>
</section>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="../js/froala_editor.min.js"></script>
<script>
$(function(){
$('#edit').editable({inlineMode: false})
original_string = "abc åäö ÅÄÖ ghi";
alert(original_string);
console.log(original_string);
$('#edit').editable("setHTML", original_string);
froala_string = $('#edit').editable("getHTML")[0];
alert(froala_string);
console.log(froala_string);
});
</script>
</body>
</html>
Hi,
When invoking the getHTML() method to get the HTML from a Froala element, an array is returned instead of a string. This appears a little inconsistent since the setHTML() method accepts a string as input, thus you would think of the getHTML() method to return the same.
$(".selector").editable("getHTML");
I'm currently using these lines of code to account for possible future updates :)
var html = element.editable('getHTML');
if(Object.prototype.toString.call(html) === '[object Array]') {
html = html[0]
}
Should it be possible to initialize editor on the same element after it was destroyed?
Select the text, click the Link button, the dialog is shown
Click somewhere on it (not inside the field, but on the dialog itself, like on the dialog title "Insert link"). The dialog is hidden, data entered is lost
Much worse, the checkbox title is not the label, so when I expect standard behavior by clicking the "label" to check the box the dialog is hidden and the URL I just typed is lost.
Hi!
I'm using editable() and editable("destroy") to implement a "enable" and "disable" button to control the editing capabilities provided by Froala dynamically. The "enable" button invokes editable() and the "disable" button invokes editable("destroy").
I have found that editable() won't work once editable("destroy") has been invoked once.
$('#edit').editable(); // Works
$('#edit').editable("destroy"); // Works
$('#edit').editable(); // No effect
It seems like editable("destroy") has a permanent effect on the use of Froala on the page, as the following example also demonstrates the behavior:
$('#edit').editable("destroy");
$('#edit').editable(); // No effect
I've tested with 1.0.6, 1.0.5 and 1.0.4. Same behavior at every release, except that editable("destroy") didn't seem to work at all in 1.0.4.
This behaviour can be confusing to users.
Illustration: http://i.imgur.com/3FtLqj9.png (cursor, on the left, is outside the editable area)
Can be reproduced on the inline example at http://editor.froala.com/.
Tested on master branch on Chrome 32 and Firefox 29.
Looking into documentation about all possible callbacks (http://editor.froala.com/docs/callbacks) I can not find a way to fire event when froala-editor has changed. The only possible callback is contentChangedCallback which triggers with a huge delay.
This event is very important to properly bind froala with knockout.
Allow a method of building a custom dropdown like font selector and a callback for what to do with the selection. Similar to Redactor add dropdown.
http://imperavi.com/redactor/examples/dropdown/
Example use case I am building an email template editor and want to select from a list of mustache template keys that would get dropped into the editor, like {{ first_name }} {{ last_name }}.
Sorry for maybe stupid question, but can I disable autofocus?
I setup the editor and when page is loaded — editable zone have focus... But I don't need this :)
When the editor is in the normal mode and you call lastEditor.editable("getHTML") the actual HTML entered by the user is there. When the editor is in the HTML mode the call returns a textarea element.
Hi!
I think you guys should consider making a bower package of your software. Bower is a package manager which makes life much easier for front-end web developers, and is supported by most web frameworks and libs out there.
$("#editor").editable("insertHTML","foo bar");
It seems this method not working. Nothing happens when I invoke this method.
Button is not appearing on the iconbar
customButtons: {
imagePicker: {
title: "Insert Image",
icon: {
type: "fa",
value: "fa-info"
}
}
Button appears on iconbar
customButtons: {
imagePicker: {
title: "Insert Image",
icon: {
type: "txt",
value: "img"
}
}
You can highlight text and underline or bold. You can click into underlined or bold text and expand them. But you can't just click somewhere, hit underline or bold, and start typing underlined or bolded content.
Hi!
Why you include your custom Modernizr and same time rewrite it's original window.Modernizr??
This wysiwyg redactor case many errors in my project, because rewriting my custom Modernizr!
Default value in documentation for autosaveInterval is 1000ms, but it dont autosave untill i define interval myself
You both use 'editable' as your main function:(, any suggestion to use froala and x-editable together? Thanks.
Please create a src
folder with the non-minified versions and a build
folder for the minified output.
Not much point in putting this on Github if most of it is unreadable by human eyes.
hi~
Thank you for the great plug-in to create.
but
I want to remove the auto-focusing function.
Please let me know how.
thank you!!
Place the editor onto a modal dialog (such as a bootstrap modal) that does not allow clicks behind, data-backdrop="static". Open the dialog and then highlight some text and try to apply a link. The little popup link dialog box is behind the dialog and cannot be accessed.
Why editor not showing when I select text by keyboard?
Also note that sometimes your selection will get reset after step 2
I decided to show user when his content is not saved and show when saved. So, i want to draw some checkmark when i receive OK from server. I do this with afterSaveCallback
Everithing ok here.
But i want show some red cross or red border maybe when content is edited, but still not saved. I thought that contentChangedCallback
will solve my problem. But it doesnt, it works only just before save. I dont know how to detect changes in editable...
I think the correct behavior while having an image selected should be to delete the image. (Eg for text .. text is deleted)
So I have script which translates latin keyboard to other language.
Here is a function which is responsible for pasting this script
function pasteTo(field) {
if (document.selection) {
field.focus();
var sel = document.selection.createRange();
if(sel) {
sel.text = this;
field.focus();
}
} else if (field.selectionStart || field.selectionStart == '0') {
var startPos = field.selectionStart;
var endPos = field.selectionEnd;
var scrollTop = field.scrollTop;
field.value = field.value.substring(0, startPos)+ this+ field.value.substring(endPos,field.value.length);
field.focus();
field.selectionStart = startPos + this.length;
field.selectionEnd = startPos + this.length;
field.scrollTop = scrollTop;
} else if($(field).hasClass('froala-element')) {
console.log(field)
console.log(this);
// need help here
} else {
field.value += this;
field.focus();
}
};
So I can deal with usual textarea and input elements, but problem rises with Froala.
I went through froala methods but coud not really decide how to correctly deal with this so maybe you can help me here.
field
is element where I'm typing and this
is a key (one letter) to paste
I have a simple use case in which I have a button to start editing (calls .editable()) and then a save button that gets the HTML (.editable("getHTML")) and destroys the editor (.editable("destroy")). However, it seems that the destroy method call does nothing.
I've even opened up the minifed version (even from current master branch) and plugged in a console.log into the callback for the destroy method. Never seems to be invoked.
This behavior is also present in the inline example that comes in the download. Open the console and fire $("#edit").editable("destroy")
and nothing will change.
Platform: Mac
Browser: Chrome 32.0.1700.107
Hi,
Thank you for your great work. it is very userful!
I have a problem: how delete file when I delete it from the web textarea?
Thank you in advance,
Oda
Default true - still adding <div>
on enter.
Problem is in:
d.options.paragraphy===!0?"<p>":"<div>"
-- probably elsewhere, it's not fency to analyze minimized js and I don't want to "un-minimizing" it.
Explanation:
JavaScript has own types for boolean, it's convertible to integer values (it's not like in C) but if you're using ===
it's not converting it - it's checking type and value! So (true === 1)
is false because the type is different.
WORKAROUND: $(".selector").editable("option", "paragraphy", 1);
I can't move or insert image where I want. I've tried in Froala web page and in local. I test it with firefox an chrome. For example, I put the cursor after a paragraph and after the upload the image appears in the top left corrner of the wysiwyg.
Thanks.
When I run the following standard html code I get an error: "uncaught TypeError: Cannot call method 'on' of undefined"
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/font-awesome.min.css" rel="stylesheet" />
<link href="froala_editor.min.css" rel="stylesheet" />
<style>
body {
text-align: center;
}
section {
width: 80%;
margin: auto;
text-align: left;
}
</style>
</head>
<body>
<section id="editor">
<textarea class='edit' style="margin-top: 30px;">
<p>wwwwwLorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis diam in odio iaculis blandit. Nunc eu mauris sit amet purus viverra gravida ut a dui. Vivamus nec rutrum augue, pharetra faucibus purus. Maecenas non orci sagittis, vehicula lorem et, dignissim nunc. Suspendisse suscipit, diam non varius facilisis, enim libero tincidunt magna, sit amet iaculis eros libero sit amet eros. Vestibulum a rhoncus felis. Nam lacus nulla, consequat ac lacus sit amet, accumsan pellentesque risus. Aenean viverra mi at urna mattis fermentum. Curabitur porta metus in tortor elementum, in semper nulla ullamcorper. Vestibulum mattis tempor tortor quis gravida. In rhoncus risus nibh. Nullam condimentum dapibus massa vel fringilla. Sed hendrerit sed est quis facilisis. Ut sit amet nibh sem. Pellentesque imperdiet mollis libero.</p>
<p><a href="http://google.com" title="Aenean sed hendrerit">Aenean sed hendrerit</a> velit. Nullam eu mi dolor. Maecenas et erat risus. Nulla ac auctor diam, non aliquet ante. Fusce ullamcorper, ipsum id tempor lacinia, sem tellus malesuada libero, quis ornare sem massa in orci. Sed dictum dictum tristique. Proin eros turpis, ultricies eu sapien eget, ornare rutrum ipsum. Pellentesque eros nisl, ornare nec ipsum sed, aliquet sollicitudin erat. Nulla tincidunt porta vehicula.</p>
<p>Nullam laoreet imperdiet orci ac euismod. Curabitur vel lectus nisi. Phasellus accumsan aliquet augue, eu rutrum tellus iaculis in. Nunc viverra ultrices mollis. Curabitur malesuada nunc massa, ut imperdiet arcu lobortis sed. Cras ac arcu mauris. Maecenas id lectus nisl. Donec consectetur scelerisque quam at ultricies. Nam quis magna iaculis, condimentum metus ut, elementum metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus id tempus nisi.</p>
</textarea>
</section>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="Scripts/froala_editor.min.js"></script>fs
<script>
$(function () {
$('.edit').editable({ buttons: ['undo'] });
});
</script>
</body>
</html>
When loading the editor in IE8 it throws a "Node undefined" error, probably because IE8 doesn't implement the Node interface. So using the constant value this.nodeType == 3 would solve this. I am not sure in how far you are not supporting IE8, but it shouldn't break the rest of the Javascript loaded on that page. Also, a lot of people are still using IE8, switching from 7, would be good to have IE8 included.
In the editor I use to upload image by my own computer not yours by your URL. I got the JSON data and Image is showing in the editor. After that When I click in the editor Image disapper. Please help me
Currently there are two ways of pasting the text in froala
plainPaste: true and false
The problem is that when you use false, you completely remove all the markup from you text. But if you have true, and in your froala editor you selected only some markups
editable({buttons: ["bold", "italic", "underline"]});
you can still add links, images and all other markup.
Is it possible to have plainPaste to paste only markup that you specified?
When viewing you website in IE10, the editor icons are not displaying correctly
This is on the home page http://editor.froala.com/
I love the editor, but I would buy if it supports markdown. Because their is no great markdown editor out there.
There is, I can't find it, or will be support for generating tables? Tranks
I am trying to save the content via provided API with preserved line breaks, however all line breaks are being removed.
Instead of saving:
<p>Hello World</p>
<p><br></p>
<p><br></p>
<p>Hello World</p>
It saves:
<p>Hello World</p>
<p>Hello World</p>
Is this a feature? Also when i set option {paragraphy: false} it still uses <p><br></p> as new line. Please help or explain.
Hi,
The editor is vulnerable to an XSS. The editor allows users to insert link and if instead of normal link, I input JavaScript URI
javascript:alert%28location%29
then it works. The attacker can execute arbitrary code of his choice. Please fix this issue. Thanks!
Do you have event support, can I customize the save function to include other data that just the body of the editable?
hello, i wish to integrate bootstrap modal and froala-editor, but i have problem
as seen in with modal image, image-wrapper / video-wrapper is behind modal, i try to increase z-index on it, but seems does not have effect.
ps. i use flat-ui designmodo bootstrap3
JS FIddle link
Thanks.
Hello,
Thank you for your work. I think the best wysiwyg editor.
but I have a problem with image upload.
I do follow > http://editor.froala.com/docs/image-upload-php
but it don't work for me.
This is my js code
[test.php]
$(function(){
$('#edit').editable({inlineMode: false,
imageUploadURL: 'http://www.thaihondacityclub.com/forum/upload.php'})
});
[upload.php]
// Allowed extentions.
$allowedExts = array("gif", "jpeg", "jpg", "png");
// Get filename.
$temp = explode(".", $_FILES["file"]["name"]);
// Get extension.
$extension = end($temp);
// An image check is being done in the editor but it is best to
// check that again on the server side.
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& in_array($extension, $allowedExts)) {
// Generate new random name.
$name = sha1(microtime()) . "." . $extension;
// Save file in the uploads folder.
move_uploaded_file($_FILES["file"]["tmp_name"], "/uploads/" . $name);
// Generate response.
$response = new StdClass;
$response->link = "/uploads/" . $name;
echo stripslashes(json_encode($response));
}
and I created "uploads" folder and changed permission to 777.
Editor: http://www.thaihondacityclub.com/forum/test.php
Upload path folder: http://www.thaihondacityclub.com/forum/uploads
Upload file: http://www.thaihondacityclub.com/forum/upload.php
Please help me, Thank you very very much.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.