标签: summernote

编辑器Summernote有问题.我想将图像上传到服务器上的目录中.我有一些脚本:

<script type="text/javascript">
  $(function () {
    $(\'.summernote\').summernote({
      height: 200
    });
    $(\'.summernote\').summernote({
     height:300,
     onImageUpload: function(files, editor, welEditable) {
      sendFile(files[0],editor,welEditable);
    }
  });

  });
</script>
<script type="text/javascript">
  function sendFile(file, editor, welEditable) {
    data = new FormData();
    data.append("file", file);
    url = "http://localhost/spichlerz/uploads";
    $.ajax({
      data: data,
      type: "POST",
      url: url,
      cache: false,
      contentType: false,
      processData: false,
      success: function (url) {
        editor.insertImage(welEditable, url);
      }
    });
  }
</script>



<td><textarea class="summernote" rows="10" cols="100" name="tekst"></textarea></td>

当然我有所有的js和css文件.我做错了什么？如果我单击图像上传并转到编辑器,则图像不在textarea中.

如果我删除sendFile函数和onImageUpload:图像保存在base64上.

链接到summernote:http://hackerwins.github.io/summernote/

Summernote是一个jQuery插件,我不需要它的类型定义.我只想修改对象,但TS不断抛出错误.下面的一行仍然告诉我:"'jQueryStatic'类型中不存在"属性'summernote'." 错误.

(function ($) {

  /* tslint:disable */
  delete $.summernote.options.keyMap.pc.TAB;
  delete $.summernote.options.keyMap.mac.TAB;
  /* tslint:enable */

})(jQuery)

编辑:

这是我的tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    "allowJs": true,
    "noUnusedParameters": true
  },
  "include": [
      "js/**/*"
  ],
  "exclude": [
      "node_modules",
      "**/*.spec.ts"
  ]
}

我需要在我的summernote编辑器中复制粘贴一些内容.但是当我粘贴时,它会采用我复制它的页面样式.我需要将其粘贴为纯文本.有什么解决方案吗？

我如何知道可以为summernote的工具栏启用哪些功能,以及如何执行此操作？

在API文档中,我只能找到"toolbar:Array(optional)"而无需进一步说明.

我已经设法通过其中一个示例启用了一些功能,但我怎样才能启用:代码,缩进和突出？

$(".summernote").summernote({
    styleWithSpan: false,
    toolbar: [
        ['style', ['bold', 'italic', 'underline', 'clear']],
        ['color', ['color']],
        ['para', ['ul', 'ol']]
    ]
});

我有一个数据库中的预设电子邮件列表."感谢您成为会员","感谢您在途中购买它" - 这样的东西.我正在使用Bootstrap模式来编辑这些电子邮件.当我单击编辑按钮时,模态下降,并填充数据库中的数据:电子邮件名称,主题,正文.我正在使用传递数据到bootstrap模式来完成此任务.效果很好.现在我使用summernote作为我的富文本编辑器.

这是我的textarea,显示未编辑的数据:

<textarea class="summernote input-block-level" id="content" name="content" rows="18"></textarea>

类summernote是数据如何定向到输出文本区域,以便可以编辑它.编辑完数据后,我单击"提交",然后使用下面的代码将数据提取到JavaScript.

    $(document).ready(function()
        {
          $('button[id=editEmail]').on('click', function()
          {

var $email_edbody_array = $('textarea[name="content"]').html($('#summernote').code());
var $email_edbody = $email_edbody_array.html();
console.log("edited email" + $email_edbody);

有趣的是,如果summernote文本区域为空白,这可以正常工作 - 如果我创建一个新的电子邮件而不是编辑一个.本console.log应该输出编辑的电子邮件正文中,但事实并非如此.它输出原始的电子邮件正文.我不知道为什么.

将编辑好的电子邮件发送到我的JavaScript中我缺少什么.以下是我认为对此问题很重要的代码的主要部分.

此部分是页面的输出,以及编辑按钮的数据重定向.

          <?php while ($datarow_emails = pg_fetch_assoc($results_emails))
          {
           echo " 
            <tr>
                <td>".$datarow_emails['internal_name']."</td> 
                <td>".$datarow_emails['email_subject']."</td>
                <td>".$datarow_emails['type']."</td>
                <td>
                        <span class='btn btn-info btn-small open-editEmailModal' data-toggle='modal' 
                            href='#editEmail' data-inm='".$datarow_emails['internal_name']."'
                            data-es='".$datarow_emails['email_subject']."'
                            data-bdy='".$datarow_emails['email_body']."'
                            data-ty=".$datarow_emails['type']."
                            data-ces=".$datarow_emails['canned_email_sid'].">
                        <i class='icon-edit icon-white'></i> Edit</span>

                        <span class='btn btn-danger btn-small open-delEmailModal' data-toggle='modal'href='#deleteWarning' data-ces=".$datarow_emails['canned_email_sid'].">
                        <i class='icon-remove icon-white'></i> Delete</span>
                </td>
            </tr>";
          } …

有没有办法完全禁用Summernote中的图像上传,但保持图像网址输入？我发现最接近的是disableDragAndDrop: true选项,但这不会从图像弹出窗口中删除上传按钮

我已经为summernote设置了一个div来改变从数据库中提取的文本.

<div id="summernote" class="form-control"><?php echo $laws['content']; ?></div> 

$(document).ready(function() {
   $('#summernote').summernote({
     height: 300,
   });
});

直接在div后面我有一个带ID的文本区域.

<textarea id="lawsContent"></textarea>

当我输入summernote div时,我希望textarea的内容发生变化.就像我在输入这个问题时发生的事情一样.

我正在寻找嵌入 Angular7 项目的 HTML 编辑器。编辑器的用户将创建非常简单的网页或对更复杂的页面进行小的编辑。我最初认为 WYSISYG 编辑器可能会解决问题，但我发现它们不太适合对源 HTML 进行编辑。有人有建议吗？

这是我迄今为止考虑过的清单：

1. CKEditor5 - 真正的富文本编辑器。不提供查看/编辑源 HTML 的功能。
2. CKEditor4 - 确实提供了编辑源 HTML 的能力，但似乎不适合编辑网页。
3. Froala - 看起来很不错，但不是开源的。
4. Summernote（和一个打字稿端口）——这个看起来很完美。一直无法找到在 Angular 中设置它的文档，并且打字稿库没有任何文档。如果有人有设置这个的经验，解释会很棒！
5. AngularEditor - 我目前有这个设置并在我的项目中工作。编辑网页似乎没问题。我最大的问题是我插入到编辑器中的一些 HTML 在渲染时不会留在编辑器中。样式离开编辑器窗口，主页上的其他元素被改变。

任何我可能忽略的建议？

例如,这是我输入的内容:

sdf
42342
xxcv

.code() 将其转换为 sdf<br>42342<br>xxcv

或另一件事:

[{"_type":"ServerOperation","operationType":"ANNOUNCE"}]

becames

<span class="message_content">[{"_type":"ServerOperation","operationType":"ANNOUNCE"}]</span>

如何获得纯文本/纯文本？

我使用summernotes成分,我想要做的就是我想从如果s(他)超过2000个字符,但我无法弄清楚如何停止键入事件添加字符停止用户.

我正在做的是如下:

 $(".note-editable").each(function(){
           $(this).on("keyup", function(){
                var cc = $(this).text().length;
                var arr = $(this).next().attr("class").split('_');
                var q = "q"+arr[0];
                var maxChar = arr[2];
                var textarea = $('*[name^="'+q+'"]');
                var diffChar = parseInt(maxChar - cc);

                if(diffChar >= 0)
                {
                    $(this).next().text(diffChar + " Remaining out of " + maxChar);
                }
                else
                {
                    $(this).next().text("0 Remaining out of " + maxChar);

                    //$(textarea).prop('disabled', true);
                    $(this).text($(this).text().slice(0,diffChar));
                }
           });
        });

任何想法如何做到这一点,我不希望禁用光标或破坏summernote ..我想,让用户觉得他(她)还可以编辑,但如果文本超过2000个字符也不会输入任何内容.

谢谢!!