Questions tagged [froala]

Froala is a commercial jQuery based WYSIWYG text editor built with the latest technologies and industry trends in mind.

Froala is a commercial jQuery based WYSIWYG text editor built with the latest technologies and industry trends in mind. It boasts high performance and full cross-browser, cross-platform support for all standard WYSIWYG features as well as being highly customisable in any web application. As stated in the official website, Froala has several plugins for many development frameworks, such as ruby-on-rails, django, cakephp, angularjs, angular2 and symfony.

Resources

Official Page & Feature Set

Licence

A licence is require to use this software in both commercial and open-source environments - exemptions offered to educational institutes and not-for-profit organisations. Full details may be found on their FAQ.

460 questions

-1

votes

1 answer

quickInsertTags tag is not working in froala-editor

I and using froala editor and want to quickInsertTags plugin feature in my froala editor. As per document, I need to include quick_insert.min.js to use quickInsertTags. I have included this js file, but still it not showing option to insert div…

javascript jquery wysiwyg froala

asked Aug 19 '21 at 15:59

Amit Kumar

5,888
11
47
85

-1

votes

1 answer

froala editor 3 with react js - how to hide toolbar on initialize?

I am trying to implement froala editor in my react js application, and the i need to keep toolbar hidden by default and should only show up when the textarea/editor has focus. in the previous versions the initialize would work like below but not in…

reactjs froala

asked Mar 16 '20 at 14:38

user3622185

-1

votes

1 answer

How to override Django widget functions (Froala Editor)?

I was wondering how I can override the functions render and trigger_froala in Django. Can I create my own widget which overrides the two functions? from django.forms import widgets, Media from django.utils.safestring import mark_safe from…

python django widget froala django-widget

asked Feb 18 '19 at 14:47

konichiwa

-1

votes

2 answers

Froala editor not working with fancybox plugin

all the things working correctly but when I add froala in fancybox popup then space, arrowkeys not working also when I click f key then act as full screen please give me solution:

<div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> 
                
                <a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a> 
                
                <a href="../../questions/tagged/froala" class="post-tag grid--cell" title="show questions tagged 'froala'" rel="tag">froala</a> 
                
                <a href="../../questions/tagged/fancybox-3" class="post-tag grid--cell" title="show questions tagged 'fancybox-3'" rel="tag">fancybox-3</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Nov 20 '18 at 21:18">asked Nov 20 '18 at 21:18</time>
    <a href="../../users/6889551/rana-amir" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/6889551.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Rana. Amir" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/6889551/rana-amir" class="s-user-card--link">Rana. Amir</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">187</li>
            
            <li class="s-award-bling s-award-bling__silver" title="3 silver badges">3</li>
            <li class="s-award-bling s-award-bling__bronze" title="15 bronze badges">15</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-49392408">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>-1</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status ">
                <strong>2</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/49392408/data-after-character-is-not-getting-saved-in-db-using-php" class="question-hyperlink">Data after (&) character is not getting saved in db using PHP</a></h3>
        <div class="excerpt">I have integrated froala editor. When I fetch the value of div, the data after   does not get saved in my db. 
Below is the value of my div
Hello, Froala inline!<br>line 2<br>line 3  and url - <a…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> 
                
                <a href="../../questions/tagged/php" class="post-tag grid--cell" title="show questions tagged 'php'" rel="tag">php</a> 
                
                <a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a> 
                
                <a href="../../questions/tagged/froala" class="post-tag grid--cell" title="show questions tagged 'froala'" rel="tag">froala</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Mar 20 '18 at 19:11">asked Mar 20 '18 at 19:11</time>
    <a href="../../users/2828442/user2828442" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/2828442.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="user2828442" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/2828442/user2828442" class="s-user-card--link">user2828442</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">2,415</li>
            <li class="s-award-bling s-award-bling__gold" title="7 gold badges">7</li>
            <li class="s-award-bling s-award-bling__silver" title="57 silver badges">57</li>
            <li class="s-award-bling s-award-bling__bronze" title="105 bronze badges">105</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-49378222">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>-1</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status ">
                <strong>1</strong> answer
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/49378222/how-to-use-froala-editor-as-inline-option-in-ionic" class="question-hyperlink">How to use Froala editor as inline option in Ionic?</a></h3>
        <div class="excerpt">I have installed Froala editor in Ionic. It is working properly. In my **home.html** I have added this line of code
<div [froalaEditor]>Hello, Froala!</div>

It looks like this:

How can I use it inline in Ionic?
Their documentations guides for js…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> 
                
                <a href="../../questions/tagged/ionic-framework" class="post-tag grid--cell" title="show questions tagged 'ionic-framework'" rel="tag">ionic-framework</a> 
                
                <a href="../../questions/tagged/ionic2" class="post-tag grid--cell" title="show questions tagged 'ionic2'" rel="tag">ionic2</a> 
                
                <a href="../../questions/tagged/ionic3" class="post-tag grid--cell" title="show questions tagged 'ionic3'" rel="tag">ionic3</a> 
                
                <a href="../../questions/tagged/froala" class="post-tag grid--cell" title="show questions tagged 'froala'" rel="tag">froala</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Mar 20 '18 at 07:09">asked Mar 20 '18 at 07:09</time>
    <a href="../../users/2828442/user2828442" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/2828442.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="user2828442" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/2828442/user2828442" class="s-user-card--link">user2828442</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">2,415</li>
            <li class="s-award-bling s-award-bling__gold" title="7 gold badges">7</li>
            <li class="s-award-bling s-award-bling__silver" title="57 silver badges">57</li>
            <li class="s-award-bling s-award-bling__bronze" title="105 bronze badges">105</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-35589030">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>-1</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status ">
                <strong>2</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/35589030/ror-upload-with-froala-wysiwyg-editor-and-carrierwave-save-the-uploaded-pictur" class="question-hyperlink">RoR: Upload with Froala WYSIWYG editor and Carrierwave – save the uploaded picture without an attachment model</a></h3>
        <div class="excerpt">I'm a beginner and I can't solve this problem.
What I did: 
Setting up Froala WYSIWYG editor with CarrierWave and Rails 
Gist: https://gist.github.com/qqnc/c4417aefe120374c8271
Problem:
see :picture
#<TextPost:0x0000000591aaa0> {
                :id…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/ruby-on-rails" class="post-tag grid--cell" title="show questions tagged 'ruby-on-rails'" rel="tag">ruby-on-rails</a> 
                
                <a href="../../questions/tagged/ruby" class="post-tag grid--cell" title="show questions tagged 'ruby'" rel="tag">ruby</a> 
                
                <a href="../../questions/tagged/froala" class="post-tag grid--cell" title="show questions tagged 'froala'" rel="tag">froala</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Feb 23 '16 at 21:56">asked Feb 23 '16 at 21:56</time>
    <a href="../../users/5227365/pascal" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/5227365.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Pascal" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/5227365/pascal" class="s-user-card--link">Pascal</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">1,158</li>
            
            <li class="s-award-bling s-award-bling__silver" title="17 silver badges">17</li>
            <li class="s-award-bling s-award-bling__bronze" title="20 bronze badges">20</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-27590568">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>-1</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status ">
                <strong>1</strong> answer
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/27590568/convert-these-php-script-into-web-pages-razor-syntax" class="question-hyperlink">Convert these PhP Script into Web Pages Razor Syntax</a></h3>
        <div class="excerpt">I just got hands on this Froala Editpr, sadly, the server integration script was written in php, and am using it on Asp.net Web Pages Razor Syntax..
// Allowed extentions.
$allowedExts = array("gif", "jpeg", "jpg", "png");

// Get filename.
$temp =…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/php" class="post-tag grid--cell" title="show questions tagged 'php'" rel="tag">php</a> 
                
                <a href="../../questions/tagged/asp.net" class="post-tag grid--cell" title="show questions tagged 'asp.net'" rel="tag">asp.net</a> 
                
                <a href="../../questions/tagged/froala" class="post-tag grid--cell" title="show questions tagged 'froala'" rel="tag">froala</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Dec 21 '14 at 15:01">asked Dec 21 '14 at 15:01</time>
    <a href="../../users/2095121/user2095121" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/2095121.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="user2095121" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/2095121/user2095121" class="s-user-card--link">user2095121</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">57</li>
            
            <li class="s-award-bling s-award-bling__silver" title="2 silver badges">2</li>
            <li class="s-award-bling s-award-bling__bronze" title="10 bronze badges">10</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-34941170">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>-2</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status answered-accepted">
                <strong>1</strong> answer
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/34941170/using-django-froala-editor-the-editor-works-in-admin-page-won-t-work-in-post-p" class="question-hyperlink">Using django-froala-editor, the editor works in admin page won't work in post page?Uncaught TypeError: $(...).froalaEditor is not a function</a></h3>
        <div class="excerpt">Sorry if my previous post wasn't clear. 
I'm using django-froala-editor, https://github.com/froala/django-froala-editor but it just won't work. I remember using this in my last project but this time it won't work. I installed and configured it…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> 
                
                <a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a> 
                
                <a href="../../questions/tagged/django" class="post-tag grid--cell" title="show questions tagged 'django'" rel="tag">django</a> 
                
                <a href="../../questions/tagged/froala" class="post-tag grid--cell" title="show questions tagged 'froala'" rel="tag">froala</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Jan 22 '16 at 07:24">asked Jan 22 '16 at 07:24</time>
    <a href="../../users/5792491/mike-braa" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/5792491.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="mike braa" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/5792491/mike-braa" class="s-user-card--link">mike braa</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">647</li>
            <li class="s-award-bling s-award-bling__gold" title="1 gold badge">1</li>
            <li class="s-award-bling s-award-bling__silver" title="12 silver badge">12</li>
            <li class="s-award-bling s-award-bling__bronze" title="33 bronze badge">33</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-33333107">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>-2</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status ">
                <strong>1</strong> answer
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/33333107/what-is-the-recommended-php-version-for-froala-editor" class="question-hyperlink">What is the recommended PHP version for froala editor?</a></h3>
        <div class="excerpt">Uploading & display an image in froala editor works, but I have a free account at 000webhost.com. And can't seem to find the recommeded PHP version for froala editor. My PHP version on my machine is 5.5.44. And PHP version of 000webhost is 5.2
Thanx…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/php" class="post-tag grid--cell" title="show questions tagged 'php'" rel="tag">php</a> 
                
                <a href="../../questions/tagged/froala" class="post-tag grid--cell" title="show questions tagged 'froala'" rel="tag">froala</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Oct 25 '15 at 18:05">asked Oct 25 '15 at 18:05</time>
    <a href="../../users/5486584/1420timmy" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/5486584.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="1420timmy" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/5486584/1420timmy" class="s-user-card--link">1420timmy</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">1</li>
            
            
            <li class="s-award-bling s-award-bling__bronze" title="1 bronze badges">1</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>

</div>
        </div>

</div>
        </div>
        <script src="../../static/js/stack-icons.js"></script>
        <script src="../../static/js/fromnow.js"></script>
        
    </body>
</html>