显示带有字符串限制的 Summernote 数据

在 Laravel 应用程序中使用 Summernote 富文本编辑器时，我们有时需要限制用户输入的内容，例如只允许输入特定的字符串。这里提供了一个简单的方法来在视图中显示带有字符串限制的 Summernote 数据。

步骤

1. 在视图中加载 Summernote 插件和所需的依赖项。插件可以从 Summernote 官方网站 下载或从 CDN 引入。

<!-- load Summernote CSS and JS -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>

<!-- load dependencies -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js"></script>

2. 创建一个带有限制字符串的 JavaScript 变量并将其传递给 Summernote 插件。在这个例子中，我们将限制字符串设置为 test。

<textarea name="content" id="summernote"></textarea>

<script>
    $(document).ready(function() {
        var limitString = 'test';

        $('#summernote').summernote({
            callbacks: {
                onChange: function(contents) {
                    if (contents.indexOf(limitString) !== -1) {
                        contents = contents.replace(limitString, '');
                        $('#summernote').summernote('code', contents);
                        alert('The string "' + limitString + '" is not allowed.');
                    }
                }
            }
        });
    });
</script>

3. 在服务器端，通过使用 htmlspecialchars 函数将内容进行转义，然后将其回显到视图中。这将确保 HTML 标签在显示时被正确解析。

$content = htmlspecialchars($request->input('content'));
return view('my_view', [ 'content' => $content ]);

4. 在视图中将回显的内容作为 Summernote 的值设置，并启用只读模式以防止用户更改内容。

<div id="preview">{!! $content !!}</div>

<script>
    $(document).ready(function() {
        $('#summernote').summernote({
            disableDragAndDrop: true,
            toolbar: []
        });

        $('#summernote').summernote('code', $('#preview').html());
        $('#summernote').summernote('disable');
    });
</script>

结论

通过使用上述方法，我们可以在 Laravel 应用程序中显示带有字符串限制的 Summernote 数据。此方法简单易行，减少了大量的编码工作。