若依【summernote富文本编辑器的使用】

最新推荐文章于 2024-02-27 16:10:12 发布

谁是我的程序媛？

最新推荐文章于 2024-02-27 16:10:12 发布

阅读量1.8k

点赞数

分类专栏：若依文章标签： java

原文链接：https://blog.csdn.net/sayyy/article/details/115564508

版权

若依专栏收录该内容

9 篇文章 6 订阅

订阅专栏

原文链接：https://blog.csdn.net/sayyy/article/details/115564508
样式设置：https://blog.csdn.net/Joe__sir/article/details/96894176

1. 引入css和js

<th:block th:include="include :: footer"/>
<th:block th:include="include :: summernote-css" /> 
<th:block th:include="include :: summernote-js" />

2. 添加html

<div class="form-group">    
    <label class="col-sm-3 control-label">内容：</label>
    <div class="col-sm-8">
        <input type="hidden" class="form-control" name="content">
        <div class="summernote" id="content"></div>
    </div>
</div>

3. 添加js

1）初始化

<script th:inline="javascript">
    $(function() {
        $('.summernote').summernote({
            lang: 'zh-CN',
            height : 350,
            placeholder: '请输入内容',
            callbacks: {
                onChange: function(contents, $edittable) {
                    $("input[name='" + this.id + "']").val(contents);
                },
                onImageUpload: function(files) {
                    var obj = this;
                	var data = new FormData();
                	data.append("file", files[0]);
                	$.ajax({
                        type: "post",
                        url: ctx + "common/upload",
                		data: data,
                		cache: false,
                		contentType: false,
                		processData: false,
                		dataType: 'json',
                		success: function(result) {
                		    if (result.code == web_status.SUCCESS) {
                		        $('#' + obj.id).summernote('insertImage', result.url);
                		    } else {
                		        $.modal.alertError(result.msg);
                		    }
                		},
                		error: function(error) {
                		    $.modal.alertWarning("图片上传失败。");
                		}
                	});
                }
            }
        });
    });
</script>

2）取值

<!- 原来的取值方式 ->
var sHTML = $('.summernote').code();
//同一页面多个summernote时，取第二个的值
var sHTML = $('.summernote').eq(1).code();
<!- 现在的取值方式 ->
var sHTML = $('.summernote').summernote('code');

3）赋值

<!- 原来的赋值方式 ->
$('.summernote').code('要赋的值');
<!- 现在的赋值方式 ->
$('.summernote').summernote('code','要赋的值');

4）方法

API地址： Summernote完整API地址
Summernote完整资源包下载：Summernote完整资源包下载(font、lang、plugin、css、js)

如果要去掉图片、视频等，可以使用以下代码

 $('.summernote').summernote({
				 height : '400px',
				    lang : 'zh-CN',
				    toolbar: [
				              [ 'style', [ 'style' ] ],
				              [ 'font', [ 'bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear'] ],
				              [ 'fontname', [ 'fontname' ] ],
				              [ 'fontsize', [ 'fontsize' ] ],
				              [ 'color', [ 'color' ] ],
				              [ 'para', [ 'ol', 'ul', 'paragraph', 'height' ] ],
				              [ 'table', [ 'table' ] ],
				              [ 'insert', [ 'link'] ],
				              [ 'view', [ 'undo', 'redo', 'fullscreen', 'codeview', 'help' ] ]
				          ],
				     // 该行可以设置行高，但是必须要有['height', ['height']],
				     lineHeights: ['0.2','0.3', '0.4','0.5','0.6', '0.7', '0.8', '0.9', '1.0'],
			
            });