Summernote编辑器的使用
1 <head> 2 <meta charset="UTF-8"> 3 <title>Summernotetitle> 4 <link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet"> 5 <script src="http://www.jq22.com/jquery/2.1.1/jquery.min.js">script> 6 <script src="http://www.jq22.com/jquery/bootstrap-3.3.4.js">script> 7 <link href="../../plugins/EditPlugin/summernote.css" rel="stylesheet"> 8 <script src="../../plugins/EditPlugin/summernote.js">script> 9 10 <script> 11 //初始化summernote编辑器 12 $(function () { 13 $('.summernote').summernote({ 14 height: 500, 15 tabsize: 2, 16 lang: 'zh-CN' 17 }); 18 }) 19 20 //获取Summernote编辑器的值，然后赋值给隐藏输入框，vue通过输入框的值，给后台 21 function InputContent() { 22 const inputTitle = $("#inputTitle").val(); 23 const InputContent = $(".summernote").summernote('code'); 24 if (InputContent === '' || InputContent === '' || inputTitle === '') { 25 alert('请检查输入是否完整!') 26 } else { 27 alert('保存成功') 28 $("#InputContent").val(InputContent); 29 //赋值后重新激活input,否则vue获取不到值 30 $("input[name='InputContent']")[0].dispatchEvent(new Event('input')) 31 } 32 } 33 34 script> 35 head> 36 <body> 37 <div id="main"> 38 39 <input id="InputContent" name="InputContent" v-model="InputContent" type="hidden"> 40 41 <el-input 42 id="inputTitle" 43 type="text" 44 placeholder="请输入标题" 45 @input="change($event)" 46 v-model="repositoryTitle" 47 maxlength="100" 48 show-word-limit 49 > 50 el-input> 51 52 <div class="summernote">div> 53 54 <el-button onclick="InputContent();">保存el-button> 55 56 <el-button v-on:click="addRepository();"> 提交el-button> 57 58 div> 59 60 <script src="/static/js/repository/add.js">script> 61 body>