其他分享
首页 > 其他分享> > Summernote编辑器的使用

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