summernote富文本

最新推荐文章于 2024-01-09 11:10:30 发布

小哥哥学编程

最新推荐文章于 2024-01-09 11:10:30 发布

阅读量386

点赞数

分类专栏： JavaScript 文章标签： summernote

本文链接：https://blog.csdn.net/jiliang272/article/details/102975331

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

summernote富文本简洁易用,主要是有一个图片大小编辑功能：

具体参数配置请查阅官方文档网址：https://summernote.org/deep-dive/（英文文档）

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="hjl">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>summernote</title>
  <link href="summernote.css" rel="stylesheet"/>
<script src="summernote.min.js" type="text/javascript"></script>
 </head>
 <body>

<div class="summernote"></div>

<script type="text/javascript">

	$('.summernote').summernote({
        placeholder: '请输入图文消息',
        height : 350,//输入区域高度
        lang : 'zh-CN',
        followingToolbar: false,
        callbacks: {
            onImageUpload: function (files) {
				//上传图片方法
                sendFile(files[0], this);
            }
        }
    });

	// 上传文件
    function sendFile(file, obj) {
        var data = new FormData();
        data.append("file", file);
        $.ajax({
            type: "POST",
			//上传路径
            url: "/upload",
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            dataType: 'json',
            success: function(result) {
				//返回格式{"url": ,"fileName": }
                if (result.code == web_status.SUCCESS) {
                    $(obj).summernote('editor.insertImage', result.url, result.fileName);
                } else {
                    $.modal.alertError(result.msg);
                }
            },
            error: function(error) {
                $.modal.alertWarning("图片上传失败。");
            }
        });
    }

	//获取输入的文本代码
	var sHTML = $('.summernote').summernote('code');
	console.log(sHTML);
</script>

 </body>
</html>

小哥哥学编程

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
summernote富文本

summernote富文本简洁易用,主要是有一个图片大小编辑功能：具体参数配置请查阅官方文档网址：https://summernote.org/deep-dive/（英文文档）<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="...
复制链接

扫一扫