summernote 字体显示中文
祁建业
@toc
一、步骤
- 1、引入
summernote-zh-CN.js：
<script src="/summernote/lang/summernote-zh-CN.js"></script>
- 2、调用时设置语言属性
$('#summernote').summernote({
lang:'zh-CN'
});
二、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>summernote 字体显示中文</title>
<!-- 引用线上的bootstrap.css -->
<link rel="stylesheet" type="text/css"
href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>
<!-- 引用线上的summernote.css -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.css" rel="stylesheet">
</head>
<body>
<div id="vue-mount-element" style="padding: 20px">
<textarea name="content" id="editor">{{info.content}}</textarea>
</div>
</body>
<!-- 引用线上的jquery.js -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- summernote 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.js"></script>
<!-- summernote 中文js文件 -->
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/lang/summernote-zh-CN.js"></script>
<!-- 引用线上的vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
let vueObject = new Vue({
el: '#vue-mount-element', //vue挂载的元素
data() {
return {
info: {id: 1, content: "<b>加粗内容</b>，正常内容"}
};
}
})
$(document).ready(function () {
$('#editor').summernote({ //富文本挂载的元素id=editor
lang:'zh-CN',
// height: 500,
// width: 1000,
minHeight: 300, //宽高，根据自己的需求设置：如果是手机上显示，就把宽设小一点，比如410px
maxwidth: 1000,
minwidth: 200,
maxHeight: 500,
focus: false,
callbacks: {
onImageUpload: function (files, editor) {
var $files = $(files);
// 通过each方法遍历每一个file
$files.each(function () {
var file = this;
// FormData，新的form表单封装，具体可百度，但其实用法很简单，如下
var data = new FormData();
// 将文件加入到file中，后端可获得到参数名为“file”
data.append("file", file);
// ajax上传
$.ajax({
data: data,
type: "POST",
url: "/upload/image",// div上的action
cache: false,
contentType: false,
processData: false,
// 成功时调用方法，后端返回json数据
success: function (response) {
// console.log(response)
if (response.error != 0) {
alert("上传失败：" + response.message);
} else {
// 插入到summernote
$('#editor').summernote('insertImage', response.url);
}
},
});
})
}, onFileUpload: function (files) { //文件上传，默认没有，具体怎么加，请看下一篇
var $files = $(files);
// 通过each方法遍历每一个file
$files.each(function () {
var file = this;
// FormData，新的form表单封装，具体可百度，但其实用法很简单，如下
var data = new FormData();
// 将文件加入到file中，后端可获得到参数名为“file”
data.append("file", file);
// ajax上传
$.ajax({
data: data,
type: "POST",
url: "/upload/file",// div上的action
cache: false,
contentType: false,
processData: false,
// 成功时调用方法，后端返回json数据
success: function (response) {
// console.log(response)
if (response.error != 0) {
alert("上传失败：" + response.message);
} else {
$(".note-video-url").val(response.url);
//Insert Video之前是输入线上视频url地址后去除禁用，现在是我们上传之后给Video URL输入框赋值后去除禁用
$(".note-video-btn").removeAttr("disabled");
}
},
});
})
}
}
});
})
</script>
</html>
类似资料：