当前位置：网站首页>Summernote font displays Chinese

Summernote font displays Chinese

2022-07-24 02:46:00 【Summer is already slightly cool】

@toc

One 、 step

  • 1、 introduce summernote-zh-CN.js：
<script src="/summernote/lang/summernote-zh-CN.js"></script>
  • 2、 Set language properties when calling 
$('#summernote').summernote({
    
    lang:'zh-CN'
});

Two 、 Code 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>summernote  Font display Chinese </title>
    <!--  Reference Online bootstrap.css -->
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>
    <!--  Reference Online summernote.css -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

<!--  Reference Online jquery.js -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<!--  Abreast of the times  Bootstrap  The core  JavaScript  file  -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- summernote  The core  JavaScript  file  -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.js"></script>
<!-- summernote  chinese js file  -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lang/summernote-zh-CN.js"></script>
<!--  Reference Online vue.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<script> let vueObject = new Vue({
       el: '#vue-mount-element', //vue Mounted elements  data() {
       return {
       info: {
      id: 1, content: "<b> Bold content </b>, Normal content "} }; } }) $(document).ready(function () {
       $('#editor').summernote({
       // Rich text mounted elements id=editor lang:'zh-CN', // height: 500, // width: 1000, minHeight: 300, // Wide and high , Set up according to your own needs ： If it is displayed on the mobile phone , Just make the width smaller , such as 410px maxwidth: 1000, minwidth: 200, maxHeight: 500, focus: false, callbacks: {
       onImageUpload: function (files, editor) {
       var $files = $(files); //  adopt each Method to iterate through each file $files.each(function () {
       var file = this; // FormData, new form Form encapsulation , Baidu , But in fact, the usage is very simple , as follows  var data = new FormData(); //  Add files to file in , The back end can get the parameter named “file” data.append("file", file); // ajax Upload  $.ajax({
       data: data, type: "POST", url: "/upload/image",// div Upper action cache: false, contentType: false, processData: false, //  Call the method when successful , Backend return json data  success: function (response) {
       // console.log(response) if (response.error != 0) {
       alert(" Upload failed ：" + response.message); } else {
       //  Insert into summernote $('#editor').summernote('insertImage', response.url); } }, }); }) }, onFileUpload: function (files) {
       // Upload files , There is no default , How to add , Please read the next one  var $files = $(files); //  adopt each Method to iterate through each file $files.each(function () {
       var file = this; // FormData, new form Form encapsulation , Baidu , But in fact, the usage is very simple , as follows  var data = new FormData(); //  Add files to file in , The back end can get the parameter named “file” data.append("file", file); // ajax Upload  $.ajax({
       data: data, type: "POST", url: "/upload/file",// div Upper action cache: false, contentType: false, processData: false, //  Call the method when successful , Backend return json data  success: function (response) {
       // console.log(response) if (response.error != 0) {
       alert(" Upload failed ：" + response.message); } else {
       $(".note-video-url").val(response.url); //Insert Video Before, input online video url Remove disable after address , Now we upload it to Video URL Disable is removed after the input box is assigned  $(".note-video-btn").removeAttr("disabled"); } }, }); }) } } }); }) </script>
</html>
原网站

版权声明
本文为[Summer is already slightly cool]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/205/202207240244314824.html

边栏推荐

猜你喜欢

随机推荐