当前位置：网站首页>Summernote rich text editor

Summernote rich text editor

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

One 、 file
Two 、 Use
Four 、 His shan zhishi

One 、 file

Two 、 Use

bootstrap Find the online address on the official website
summernote Find the online address on the official website
File upload to Tp5 For example , Refer to this article ：kindeditor Custom upload file （ Picture and video files ） Fang （ backstage PHP）
Successfully returns

return [
            'error' => 0, // success 
            'url' => ' picture , The address after uploading the video '
        ];

Failure to return

        return [
            'error' => 1, // When the failure 
            'message' => $file->getError()
        ];

design sketch
The code is as follows ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>summernote Rich text editor </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>
<!--  Abreast of the times  summernote  The core  JavaScript  file  -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.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 // 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>