$summernote 未定义 HTMLTextAreaElement.onImageUpload

Posted

技术标签:

【中文标题】$summernote 未定义 HTMLTextAreaElement.onImageUpload【英文标题】:$summernote is not defined HTMLTextAreaElement.onImageUpload 【发布时间】:2020-08-13 21:09:34 【问题描述】:

我正在使用 Summernote,它适用于所有文本,但我在设置 AJAX 调用以上传图像时遇到问题。 我收到警告“$summernote is not defined ReferenceError: $summernote is not defined 在 HTMLTextAreaElement.onImageUpload"。 这不是一个实际的错误,只是一个警告但没有调用该函数。

      <script type="text/javascript">
      	$(document).ready(function() 
	        $('#summernote').summernote(
	          lang: 'en-EN',
	          placeholder: 'Article content...',
	          tabsize: 2,
	          height: 200,
	          shortCuts: false,
	          disableDragAndDrop: true,
	          toolbar: [
	            ['style', ['bold', 'italic', 'underline', 'clear']],
	            ['fontsize', ['fontsize']],
	            ['color', ['color']], 
	            ['para', ['ul', 'ol', 'paragraph']],
	            ['table', ['table']],
	            ['insert', ['link', 'picture']],
	            ['view', ['codeview', 'help']]
	          ],
	          callbacks: 
			    onImageUpload: function(files) 
			      // upload image to server and create imgNode...
			      $summernote.summernote('insertNode', imgNode);
			    
			  
	        );
    	);

    	$('#summernote').on('summernote.image.upload', function(we, files) 
		  // upload image to server and create imgNode...
		  $summernote.summernote('insertNode', imgNode);
		);
      </script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
     <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.16/dist/summernote.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.16/dist/summernote.min.js"></script>	
</head>	
<body>

<form ...>
  <div class="row">
    <div class="col-md-12">
      <textarea id="summernote" name="editordata"><?php echo $this->input->post('editordata'); ?></textarea>
    </div>
  </div>
</form>

【问题讨论】:

该变量到底是在哪里定义的?你说这只是一个警告,但你也说你的方法没有被调用。这不是警告。由于未定义的变量,这是一个损坏的空指针异常。 我按照 Summernote 网站 (summernote.org/getting-started) 上的说明进行操作,我假设变量在包含的 Summernote js 中。这也是我的第一个想法,我会检查js文件。 我在该文档页面中没有看到对 $summernote 变量的任何引用 使用此链接 (summernote.org/deep-dive/) 并搜索回调 onImageUpload。 该文档看起来不完整。它也没有显示该变量的来源。无论如何,试试这个。 var $summernote = $('#summernote').summernote( 将来自 summernote() 方法的响应存储在该变量中。这就是我希望文档在某个时候显示的内容。 【参考方案1】:

已解决,AJAX 调用出错。

【讨论】:

以上是关于$summernote 未定义 HTMLTextAreaElement.onImageUpload的主要内容,如果未能解决你的问题,请参考以下文章

如何解决未捕获的类型错误:无法读取未定义的属性“调用”?

Summernote 文本未存储到数据库中

文本未从 Laravel 中的 Summernote 存储

summernote 所见即所得内容未到达 $_POST

Summernote v0.8.15 图标未加载

Summernote 和 Electron:未捕获的错误:找不到模块“jquery”