Summernote编辑器的使用
作者：互联网
1 <head>
2 <meta charset="UTF-8">
3 <title>Summernote</title>
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 === '<p><br></p>' || 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 <!--保存输入的内容，提供给vue-->
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 <!--Summernote编辑器-->
52 <div class="summernote"></div>
53 <!--将输入的内容放到input里-->
54 <el-button onclick="InputContent();">保存</el-button>
55 <!--提交给vue-->
56 <el-button v-on:click="addRepository();"> 提交</el-button>
57
58 </div>
59
60 <script src="/static/js/repository/add.js"></script>
61 </body>
标签：summernote,InputContent,inputTitle,编辑器,使用,input,Summernote 来源： https://www.cnblogs.com/lwl80/p/16193106.html