Code

Discussion on Bootstrap 4 WYSIWYG Editor

zahedkamal87 supports this item

Supported

This author's response time can be up to 1 business day.

35 comments found.

original:

Olá, acabo de adquirir seu editor WYSIWYG, e gostei de saber como posso captar esse conteúdo e postá-lo via GET e inserir no Mysql, existe algum comando ou linha de código para acrescentar que me ajude com isso ?

Translate:

Hello, I just purchased your WYSIWYG editor, and I liked how I can capture this content and post it via GET and insert it in Mysql, is there any command or line of code to add that helps me with this?

Hi, There is a method to get values/contents from the editor, for example -

var contents = $('#wmwysiwyg').wmwysiwyg('getContents');

Then you can send this ‘contents’ variable to php via ajax. You can also have a hidden textarea and when user submits the form, you need to set textarea’s value like this –

$('textarea').val(contents);

And, to set any contents/htmls in the editor, you can use this method –

var contents = "<h1>Hello World</h1>";
 $('#wmwysiwyg').wmwysiwyg('setContents', contents);

Texto original:

Olá, seria pedir muito que vc me mostra-se isso na prática? Não sou muito abilidozo com programação e não entendo muita coisa de ajax, e como eu precisaria utiliza-lo para operar em uma pagina com varios campos input e apenas uma tag form acredito que seja a melhor alternativa…

Grato desde já por sua atenção

PS: segue abaixo meu email gustavocgsg@gmail.com

Translate:   Hello, would it be asking a lot of you to show me this in practice? I’m not very capable with programming and I do not understand a lot of ajax, and how I would need to use it to operate on a page with several input fields and just a form tag I believe is the best alternative …

Thank you in advance for your attention.

PS: follow below my email gustavocgsg@gmail.com

Hi, I wish i could help you. But I’m currently busy on client’s project. So, If you do not have coding knowledge, kindly hire someone to take care of it.

Original:

Olá bom dia,

Esntendo seu pondo te vista e também entendo que está ocupado, apenas estava lhe pedindo que me mostra-se um exemplo de como serua essa requisição ajax…

Translete:

Hello good day,

I understand your putting on you and also understand that you are busy, I was just asking you to show me an example of how to use this ajax request …

Gave you a code snippet in your other comment. Hope that helps. Thank you

Original:

Olá bom dia,

Aproveito o contato para mostrar o código abaixo essa é a construção que você manda executar em sua documentação porem por algum motivo o editor não está aparecendo.. deixei algo de fora ?

Translete:

Hello good day,

I take the contact to show the code below this is the construction that you have to execute in your documentation but for some reason the editor is not showing up .. left something out?

Code:

<!doctype html> <html lang=”pt-br”> <head> <meta charset=”utf-8”> <meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" media="screen" />
    <link rel="stylesheet" href="css/wmwysiwygeditor.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="style.css">
<title>Editor de Texto</title>
</head>

Editor de texto html

<script type="text/javascript">
    $(document).ready(function(){
        $('#wmwysiwyg-basic-use').wmwysiwyg();
    });
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/wmwysiwygeditor.js"></script>

Hi, Code you shared above, seems it is not complete. However, I’ve created a code snippet for you. Hope it will help you—

HTML Code of a Form with WYSIWYG editor and a textarea with styled to be hidden

<form method="post" id="the-form">
    <input type="text" name="title" id="title">
    <hr/>
    <div id="wysiwyg-editor">WYSIWYG Contents here</div>
    <textarea style="display:none;" name="contents" id="contents"></textarea>
    <hr/>
    <input type="submit" name="submit" value="Submit"/>
</form>

Javascript/jQuery code to transfer WYSIWYG edit’s code to the hidden textarea on form submission

$(document).ready(function(){
        $('#wysiwyg-editor').wmwysiwyg();
        $('#the-form').submit(function(){
            var contents = $('#wysiwyg-editor').wmwysiwyg('getContents');
            $('#contents').val(contents);
        });
});

PHP Code to handle the form submission

<?php
    if(isset($_POST['submit'])) {
        $title = $_POST['title'];
        $contents = $_POST['contents'];
        // Now you can use the $title and $contents variable to save the data to Database
    }
?>

By the way, if you liked the editor, kindly leave a feedback and rating :)

Thank you

I noticed, he does not want to display the html content

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" type="text/css" media="screen" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" media="screen" />
<link rel="stylesheet" href="css/wmwysiwygeditor.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css">
<title>Editor de Texto</title>
</head>

Editor de texto html

<script type="text/javascript">
    $(document).ready(function(){
        $('#wmwysiwyg-basic-use').wmwysiwyg();
    });
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/wmwysiwygeditor.js"></script>

Sorry. I see the code is incomplete. There is no HTML ‘div’ tag or anything with id ‘wmwysiwyg-basic-use’

I understand, I’m going to see a way to better publish what I’m doing more already that the publisher is not loading … despite doing everything that you describe in the installation file

with your license, if I may, can I send an attachment directly to your e-mail?

Error when using it in my website nootstrap 4

jquery.min.js:2 jQuery.Deferred exception: $(...).wmwysiwyg is not a function TypeError: $(...).wmwysiwyg is not a function at HTMLDocument.<anonymous> (https://theolodewijk.nl/users/edit_homepage:228:42) at l (https://theolodewijk.nl/jquery/3.3.1/jquery.min.js:2:29375) at c (https://theolodewijk.nl/jquery/3.3.1/jquery.min.js:2:29677) undefined w.Deferred.exceptionHook @ jquery.min.js:2 c @ jquery.min.js:2 setTimeout (async) (anonymous) @ jquery.min.js:2 u @ jquery.min.js:2 fireWith @ jquery.min.js:2 fire @ jquery.min.js:2 u @ jquery.min.js:2 fireWith @ jquery.min.js:2 ready @ jquery.min.js:2 _ @ jquery.min.js:2 jquery.min.js:2 Uncaught TypeError: $(...).wmwysiwyg is not a function at HTMLDocument.<anonymous> (edit_homepage:228) at l (jquery.min.js:2) at c (jquery.min.js:2)

fixed, is it also possible to auto height of the div?

change selected text font size make massy of the text

Hi, For auto height, you might be using “height: ####” option. Remove that option..

Also, i’m not sure what do you mean by “massy of the text”. Please be more detailed. Thank you

This is not working at all for me. It does not appear at all… I have done:

<!doctype html>

<head> <meta charset=”UTF-8”> <title>WYSIWYG Test</title> </head> <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css” type=”text/css” media=”screen” /> <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css” media=”screen” /> <link rel=”stylesheet” href=”cdn/notes/css/wmwysiwygeditor.css” type=”text/css” media=”screen” />

<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script> <script type=”text/javascript” src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js”></script> <script type=”text/javascript” src=”cdn/notes/js/notes.js”></script>

<script type="text/javascript">
    $(document).ready(function(){
        $('#wmwysiwyg-basic-use').wmwysiwyg();
    });
</script>

and not appears. In the Inspector the following errors appear:

TypeError: undefined is not an object (evaluating ‘e.length’) Error: Bootstrap tooltips require Tether (http://tether.io/)

Please explain how I can get this to appear.

Thanks

Hi, Bootstrap tooltip require “Tether”. So, you’ve to include that library too above you included Bootstrap. It’s not my product’s requirement, it’s Bootstrap’s requirement. See – https://v4-alpha.getbootstrap.com/getting-started/introduction/#quick-start

hi,

Please check this url .Editor font size is not working properly..

http://billtechcoding.com/admin/add_blog.php

username: admin password: password

How much time you will take to update the script?

how much time you will take to rectify or update the script?

Hi, I’m not sure. But gonna take months, cause there will be more updates. Like using iframe, textarea, paste as plain text etc. Already have finished some updates though.. But hard to say specific timeframe. Sorry.

On the editor all the buttons except for the two color buttons and the text alignment button. In my download folder for the editor all works but on my site which is on localhost.Been trying different versions of jquery but no luck. It’s weird that all the buttons work except for those three. Any suggestions ?

Hi, Can you share the markups and js please? or if you’ve it live somewhere, share the link pls. Also, show me what js and css files you included. Thank you

So I disabled the javascript files one by to see if there was a conflict but still not working. I did just realize that and button with a drop down does not work.

Hi, Can you share the markups and js please? or if you’ve it live somewhere, share the link pls. Also, show me what js and css files you included. Thank you

Been tying different things and found out it works with bootstrap 4.0 and nothing higher. Hopefully you can get this corrected.

Hi, Can you share the markups and js please? or if you’ve it live somewhere, share the link pls. Also, show me what js and css files you included. Thank you

If you use the download folder with this purchase and use <link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css” > instead of the 4.0 alpha version that you are using you will find that it does not work for the dropdown. Bootstrap must have changed some thing from their alpha version to a working version. At first I thought it was another js file on my site that is one my localhost, but then I changed the version of the css file to a new version on the demo from the download and that does not work either. To see the problem just use latest version of the css which is 4.4.1

Hi, Thanks for your response.

Replacing new version’s CSS file isnt enough, you forgot to replace Javascript files. Bootstrap made changes on Dropdown/Tooltip etc. In Bootstrap 4.0 Alpha, they used “TetherJS” for dropdown/tooltip etc. Then from Bootstrap 4.0.0 they replaced TetherJS by “PopperJS”. I’ve tested my script with all sub version of Bootstrap 4. Works fine. You just need to include proper files in proper order like this—

> jQuery js

> Popper js (remember not Tether)

> Bootstrap js

Check this link – https://getbootstrap.com/docs/4.4/getting-started/introduction/

Hi, 1: Is it support RTL in deeb details ? 2: Is it support Bootstrap 4 ?

Also, Is it support Arabic tooltip ?

Hi,

1: Is it support RTL in deep detail?

2: Is it support Arabic tooltip?

3: Is it support Bootstrap 4?

Waiting for your response.

Hi, Sorry, its doesn’t have RTL support. But it supports Bootstrap 4.

Hi,

Thank you for your editor, it works great. But i have a small problem. As the editor is loaded in a div, and i want to use it in a form for storring data in an sql table, how i can do ? I can’t figure out how to use your editor like a textarea.

could you help me pleease ?

Regards.

Hi, Right now you’ve to do it by using a hidden textarea field. But i’ve working on an update. Hoping to upload it in next couple of months. That version will make this kind of thing. easy.

Anyway, Here is a complete example, hope this help you -

HTML

<form method="post">
<div id="wmwysiwyg"></div>
<textarea style="display:none;" name="wmwysiwyg-textarea" id="wmwysiwyg-textarea"></textarea>
<input type="submit" name="submit" onclick="wmwysiwyg_to_textarea()" value="Submit">
</form>

Javascript

function wmwysiwyg_to_textarea(){
      var contents = $('#wmwysiwyg').wmwysiwyg('getContents');
      $('#wmwysiwyg-textarea').val(contents);
}

PHP

$wmwysiwyg_contents = $_POST['wmwysiwyg-textarea'];

If my support helped you, please give the script a nice review and rating. Would inspire me to work on it’s update.

Thank you

Hi

Can you please provide RTL support like Arabic language by using English keyboard layout. I can pay for this feature too.

Thanks

Hi, Yes, i’ve plan to do it asap. Already few others requested for it. :)

Ivarvw

Ivarvw Purchased

Hey, this looks great :). Is there any documentation on parsing/loading changes from a database? Is this done with the getContents/setContents function?

Yes! Check the comments section, you’ll find some examples there.

by
by
by
by
by
by