Summernote编辑器的使用

2022/4/26 6:12:57

编程Tag： 编辑器使用 input Summernote InputContent inputTitle

本文主要是介绍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编辑器的使用的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Summernote编辑器的使用

相关编程文章