wysiwyg won’t let you type

Asked

Viewed 311 times

1

I’m using the wysiwyg to create a field with rich text but he’s not accepting that I type. What I’m doing wrong?

Setando Javascript:

    <script>
    $(document).ready(function(){
        $('#editor').wysiwyg(); 
    });    

</script>
<script>
( function($) {    
  $(function(){
    function initToolbarBootstrapBindings() {
      var fonts = ['Serif', 'Sans', 'Arial', 'Arial Black', 'Courier', 
            'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande', 'Lucida Sans', 'Tahoma', 'Times',
            'Times New Roman', 'Verdana'],
            fontTarget = $('[title=Font]').siblings('.dropdown-menu');
      $.each(fonts, function (idx, fontName) {
          fontTarget.append($('<li><a data-edit="fontName ' + fontName +'" style="font-family:\''+ fontName +'\'">'+fontName + '</a></li>'));
      });
      $('a[title]').tooltip({container:'body'});
        $('.dropdown-menu input').click(function() {return false;})
            .change(function () {$(this).parent('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle');})
        .keydown('esc', function () {this.value='';$(this).change();});

      $('[data-role=magic-overlay]').each(function () { 
        var overlay = $(this), target = $(overlay.data('target')); 
        overlay.css('opacity', 0).css('position', 'absolute').offset(target.offset()).width(target.outerWidth()).height(target.outerHeight());
      });
      if ("onwebkitspeechchange"  in document.createElement("input")) {
        var editorOffset = $('#editor').offset();
        $('#voiceBtn').css('position','absolute').offset({top: editorOffset.top, left: editorOffset.left+$('#editor').innerWidth()-35});
      } else {
        $('#voiceBtn').hide();
      }
    };
    function showErrorAlert (reason, detail) {
        var msg='';
        if (reason==='unsupported-file-type') { msg = "Unsupported format " +detail; }
        else {
            console.log("error uploading file", reason, detail);
        }
        $('<div class="alert"> <button type="button" class="close" data-dismiss="alert">&times;</button>'+ 
         '<strong>File upload error</strong> '+msg+' </div>').prependTo('#alerts');
    };
    initToolbarBootstrapBindings();  
    $('#editor').wysiwyg({ fileUploadError: showErrorAlert} );
    window.prettyPrint && prettyPrint();
  });
})(jQuery);
</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

And the fields:

                <div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
  <div class="btn-group">
    <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font"><i class="icon-font"></i><b class="caret"></b></a>
      <ul class="dropdown-menu">
      </ul>
    </div>
  <div class="btn-group">
    <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="icon-text-height"></i>&nbsp;<b class="caret"></b></a>
      <ul class="dropdown-menu">
      <li><a data-edit="fontSize 5"><font size="5">Huge</font></a></li>
      <li><a data-edit="fontSize 3"><font size="3">Normal</font></a></li>
      <li><a data-edit="fontSize 1"><font size="1">Small</font></a></li>
      </ul>
  </div>
  <div class="btn-group">
    <a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a>
    <a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a>
    <a class="btn" data-edit="strikethrough" title="Strikethrough"><i class="icon-strikethrough"></i></a>
    <a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="icon-underline"></i></a>
  </div>
  <div class="btn-group">
    <a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="icon-list-ul"></i></a>
    <a class="btn" data-edit="insertorderedlist" title="Number list"><i class="icon-list-ol"></i></a>
    <a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="icon-indent-left"></i></a>
    <a class="btn" data-edit="indent" title="Indent (Tab)"><i class="icon-indent-right"></i></a>
  </div>
  <div class="btn-group">
    <a class="btn" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i class="icon-align-left"></i></a>
    <a class="btn" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i class="icon-align-center"></i></a>
    <a class="btn" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i class="icon-align-right"></i></a>
    <a class="btn" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i class="icon-align-justify"></i></a>
  </div>
  <div class="btn-group">
      <a class="btn dropdown-toggle" data-toggle="dropdown" title="Hyperlink"><i class="icon-link"></i></a>
        <div class="dropdown-menu input-append">
            <input class="span2" placeholder="URL" type="text" data-edit="createLink"/>
            <button class="btn" type="button">Add</button>
    </div>
    <a class="btn" data-edit="unlink" title="Remove Hyperlink"><i class="icon-cut"></i></a>

  </div>

  <div class="btn-group">
    <a class="btn" title="Insert picture (or just drag & drop)" id="pictureBtn"><i class="icon-picture"></i></a>
    <input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" />
  </div>
  <div class="btn-group">
    <a class="btn" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="icon-undo"></i></a>
    <a class="btn" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i class="icon-repeat"></i></a>
  </div>
  <input type="text" data-edit="inserttext" id="voiceBtn" x-webkit-speech="">
</div>

<div id="editor">
</div>

Comments: Although you initialized wysiwyg it does not appear in the option to inspect element >of google Chrome. I’ve updated the entire project to the latest jquery.

The mistake is

When I type in the div, and removed the focus of the place where you write and the option to center the text is triggered, not letting write. When trying to write again, >process repeats.

javascript twitter-bootstrap wysiwyg

  • You are creating the component twice in the code, once at the beginning of the code and once at the end of the ready Document. Tried to remove one of the two (preferably from outside the ready Ocument) ?

  • What the solution would look like ?

  • What do you mean? I’d only get one call from .wysiwyg() in the code, I believe.

  • I tried but it’s not working yet.

  • First of all, which plugin you are using; second: there is some error in your console ?

  • I am using this plugin: http://mindmup.github.io/bootstrap-wysiwyg/ and there are no errors in my console.

  • If you know one you can point out to me, I’ll take suggestions.

  • @Renanrodrigues after you take a look at this, it has Portuguese translation and excellent documentation http://summernote.org/#/

  • @Gabrielrodrigues Even with summernote is not opening the text box.

Show 4 more comments

1 answer

2


Renan, you must follow an order in the assembly of your html to load the components correctly,

1° download the jQuery: Download

And the first to be included, why bootstrap,font-awesome e summernote use it.

2° download the Bootstrap: Download

It is used in the font-awesome e summernote.

3° download the Font-Awesome: Download

It is used by Summernote to load editor icons.

4° download the Summernote: Download

Now you must follow the hierarchy in inclusion, it can be done like this:

http://jsfiddle.net/ay3cc7c9/1/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.6.9/summernote.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.6.9/summernote.min.css" rel="stylesheet"/>

<!DOCTYPE html>
<html lang="en">

   <body>
      <div id="summernote">Olá Mundo</div>
      <script>
         $(document).ready(function () {
            $('#summernote').summernote();
         });
      </script>
   </body>
</html>

  • It seems that this giving conflict with the jquery I already have, and it is only appearing hello world.

  • my jquery is jquery-1.7.2.min. js so it is giving conflict in javascript, is there any to adapt to my ?

  • Why don’t you update your jquery ? have to see which version they use, they must have a previous version that runs in this jquery 1.7 but should present some problems that in the recent version has been fixed

  • they are in the jquery-1.9.1.min.js

  • the problem that if I update it will mess up my whole system. I don’t know why you’re doing this

  • The more you try to help me with what I was doing up there, it’s not enough to write, this next tidy, I’m seeing if it’s lack of initializing something. But something funny about my project is that even if you start the.js document it doesn’t appear in the source of google Chrome, does there have to be something ?

  • if you click on the url of your script it does not open the js file ?

  • open, but does not appear in Chrome selections

  • I updated the whole project, but it still gives the error when I type it leaves from Focus, and does not let me write anything.

Show 4 more comments

Browser other questions tagged javascript twitter-bootstrap wysiwyg

You are not signed in. Login or sign up in order to post.