标签: summernote

我正在使用summernote,有时候我需要的字体值比font-size列表中的值更高.这是我目前的代码:

$('#summernote').summernote({
  toolbar: [
    ['style', ['style']],
    ['fontsize', ['fontsize']],
    ['font', ['bold', 'italic', 'underline', 'clear']],
    ['fontname', ['fontname']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['height', ['height']],
    ['insert', ['picture', 'hr']],
    ['table', ['table']]
  ],
  height: 585,
  focus: false
});

我试图放入工具栏字体大小(数字如10,20,25,30),但它没有帮助.有什么方法可以设置我自己的自定义字体大小列表？

我会在AngularJS中使用summernote.我找到了https://github.com/outsideris/angular-summernote,但这对我不起作用.我唯一得到的是一个错误

错误:undefined不是函数(评估'element.summernote(summernoteConfig)')

我已经包含了所有必需的文件,如jquery,bootstrap,summernote等.

我的第二个想法是在没有角度 - summernote指令的情况下使用夏季音符.但这也不应该完美.

如果我试试

$(document).ready(function() {
  $('.summernote').summernote();
});

summernote不起作用,但如果我试试...... 喜欢

$.getScript('//cdnjs.cloudflare.com/ajax/libs/summernote/0.5.1/summernote.min.js',function(){
  $('#summernote').summernote();
});

它有效,但我会使用我的本地副本summernote,所以第二个不是我需要的

希望你理解我的问题并感谢任何帮助Rico

我已经使用了summernote编辑器一段时间了,它适用于我需要它的大部分内容.但是,我最近希望在用户操作后禁用它(未销毁).经过努力没有成功,我发现我可以使用destroy()方法来实现我想要的.我注意到Summernote仍然将已经禁用的textarea转换为其编辑器,禁用了写入区域.这是我最后做的:

要在创建它之后禁用summernote:我首先销毁它,然后禁用目标元素,最后重新初始化它:

    $(".summernoteTarget").destroy();

    $(".summernoteTarget").prop('disabled', true );

    $(".summernoteTarget").summernote();

为了再次启用它,我首先像以前一样销毁它,然后启用目标元素,最后重新初始化它:

    $(".summernoteTarget").destroy();

    $(".summernoteTarget").prop('disabled', false );

    $(".summernoteTarget").summernote();

这样就解决了一个小问题:当它处于"禁用"状态时,所有控件都不会被禁用,只有写入区域.因此,用户仍然可以将文件拖到写入区域,但这会引发错误.

有没有人看过Summernote的源代码,除了destroy()之外还可以添加两个方法(禁用和启用),这样我们可以做类似的事情:

     $(".summernoteTargetElement").disable();
     $(".summernoteTargetElement").enable();

谢谢.

我发现Summernote插件,有很多带翻译的js文件.但是如何应用它们呢？我已将它们包含在我的页面中.

我想在我用编辑器添加的图像中添加一个类(class ="img-responsive").

实际上我在保存文本后得到了这段代码:

<img src="LINK" style="width: 628px; height: 470.7191413237925px;">

在summernote.js中我发现了这段代码:

/**
     * create `<image>` from url string
     *
     * @param {String} sUrl
     * @return {Promise} - then: $image
     */
    var createImage = function (sUrl) {
      return $.Deferred(function (deferred) {
        $('<img>').one('load', function () {
          deferred.resolve($(this));
        }).one('error abort', function () {
          deferred.reject($(this));
        }).css({
          display: 'none'
        }).appendTo(document.body).attr('src', sUrl);
      }).promise();
    };

    return {
      readFileAsDataURL: readFileAsDataURL,
      createImage: createImage
    };
  })();

我不知道这是否是添加类的正确代码,而且我也不知道如何以及在何处添加class ="img-responsive"

我只是使用最新版的summernote进行策略.版本7.由于某种原因,此图像上载代码无效.该行onImageUpload: function(files) {sendFile(files[0]);}甚至没有被执行.

图像成功出现在编辑器中但在base64中,并且未在uplaods/文件夹中上载

已成功调用所有包含.

Js插入页面的head标签中

<script>
            $(document).ready(function() {
                $('#summernote').summernote({
                    height: 200,
                    onImageUpload: function(files) {
                        sendFile(files[0]);
                    }
                });
                function sendFile(file) {
                    var data = new FormData();
                    data.append("file", file);//You can append as many data as you want. Check mozilla docs for this
                    $.ajax({
                        data: data,
                        type: "POST",
                        url: 'uploader.php',
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: function(url) {
                            $("#summernote").summernote("insertImage", url);
                        }
                    });
                }
            });
        </script>

uploader.php

$dir_name = "uploads/";
    move_uploaded_file($_FILES['file']['tmp_name'],$dir_name.$_FILES['file']['name']);
    echo $dir_name.$_FILES['file']['name'];

Summernote非常易于使用.我需要让图片上传工作,以获得1000%的nof.

拜托,有人可以帮我这个吗？

在 Summernote 中切换到代码视图时，光标总是一直移动到文档末尾。有没有办法在切换时保持光标位置？有时使用它的人想要编写一些自定义 HTML，因为它比使用编辑器的按钮更快，但是在切换到代码视图后，他们必须向上滚动并尝试找到他们之前所在的位置。这不是很实用。

这是一个简单的堆栈闪电战。

基本上，我需要实现的是：当光标在这里时

我想单击“代码视图”按钮并转到此处：

有没有一种已知的方法可以使summernote模式从bootstrap模态中突破？

我有一个普通的模态,里面有一个summernote元素,没什么特别的.

当我使用summernote功能时,如果我在boostrap模式中使用summernote,这就是我得到的:

JS:

$('#dropper').on( "show.bs.modal", function() {
    $('#dropping').summernote({
        height: 300
    });
})

HTML:

<div id="dropper" class="modal fade" tabindex="-1" data-backdrop="static" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div id="dropping">text...</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left">
                    <span class='fa fa-paperclip '></span>
                    Attach Digital Assets
                </button>
                <div class="btn-group">
                    <button type="button" class="btn btn-default opacity75" class="close" data-dismiss="modal">
                        &times; Cancel
                    </button>
                    <button type="button" class="btn btn-warning" href="javascript:postDrop()">
                        Post Status Update
                        <span class='fa fa-bullhorn '></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

完成Bootply: http ://bootply.com/113808

我的summernote编辑器中的某些文本包含HTML。我想让用户选择文本，就像在编辑器中一样。

到目前为止，我看到的所有答案都告诉我使用此答案

$('#summernote').summernote('createRange').toString()

但这会从选择中剥离所有现有的HTML。这个：

$('#summernote').summernote('code')

返回所有带有HTML的文本，但不涉及用户选择的文本。

有没有办法让用户在summernote中使用所有HTML和格式设置文本？

有没有办法在summernote编辑器中为棱镜添加一个按钮？

我的视图中包含棱镜 css 和 js 文件，但我不知道如何在编辑器中为其添加按钮：

$(document).ready(function() {
  $('.summernote').summernote({
      minHeight: 200,
      toolbar: [
         ['style', ['style', 'bold', 'italic', 'underline', 'clear']],
         ['font', ['strikethrough', 'superscript', 'subscript']],
         ['fontsize', ['fontsize', 'fontname', 'fontsizeunit', 'height']],
         ['color', ['color']],
         ['para', ['ul', 'ol', 'paragraph']],
         ['table', ['table']],
         ['insert', ['link', 'emoji', 'picture', 'video']],
         ['view', ['fullscreen', 'codeview', 'help']]
      ]
  });
});

任何的想法？