【富文本编辑器功能】vue实现富文本编辑器Tinymce功能，保留编辑器格式文章展示在页面上【前后端代码展示，简单好用】_tinymce内容如何在小程序正常展示

前言：

这个Tinymce富文本编辑器是vue-element-admin内集成好的，使用过后体验非常不错，很简单易用。这里分享一下，同时又看到了网上帖子都没什么人写前后端同时展示的，很多人想知道编辑器编辑的文章格式展示在前端的。这里统一写一下前后端代码都展示，并配上注释，相信大家看起来会很清晰明了。

效果图

编辑文章的时候，我是直接百度搜了一个小说复制了一段直接粘贴来的，格式还可以自动保留

文章保存后，在页面展示格式也是存在的

编辑器样式：鼠标移上去都会有功能介绍，功能很全

安装步骤

1，git下载vue-element-admin代码

直接新建个文件夹，用这个命令下载下来。

国内：
git clone -b i18n https://gitee.com/panjiachen/vue-element-admin.git
 
国外：
git clone -b i18n https://github.com/PanJiaChen/vue-element-admin.git
1
2
3
4
5

2，把这个Tinymce文件夹整个复制到你项目的components文件夹下面

这是Tinymce的路径

复制到components文件下

3，用npm安装一下tinymce

npm install @tinymce/tinymce-vue -S
npm install tinymce -S
1
2

用到sass没有的也安装下

cnpm install node-sass -s
1

4，使用方法：

直接引入组件，使用就行

设置中文

刚下载好的编辑器是英文的，所以设置一下中文
把这句话this.languageTypeList[‘zh’]替换上面注释的。

    language() {
      // return this.languageTypeList[this.$store.getters.language]
      return this.languageTypeList['zh']
    },
1
2
3
4

字体和字号设置添加

刚下载的编辑器也是没有带字号和字体设置的。所以可以添加一下
首先在initTinymce方法内添加这句话

fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt",
1

然后在toolbar内后面加入这两个词，toolbar就是配置项
前面是字号，后面是字体的意思，注意每个词中间要有空格啊

fontsizeselect fontselect
1

----------------------好了，到这就设置完了，可以使用用看看了--------------------------

代码（前端）

这里和上面的使用方法一样啊，就是注册个组件放你要的位置就行了。content_first就是你输入的文章内容了

<template>
  <div class="release_wrap">
              <el-input
                v-model="title"
                placeholder="请输入标题"
              ></el-input>
              <tinymce v-model="content_first" :height="300" />
  </div>
</template>

<script>
import Tinymce from "@/components/Tinymce";
export default {
  components: {
    //富文本组件
    Tinymce,
  },
  data() {
    return {
      //富文本输入的值
      //内容
      content_first: "请输入内容",
      //标题
      title:""
    };
  },

};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

文章按照格式显示

核心就是v-html。从后端把保存的文章拿出来，然后用v-html把文章展示出来就会有格式了，很简单

<template>
  <div class="release_wrap">
    <div class="release_title">{{ title }}</div>
    <el-card class="release_card">
      <el-button
        type="primary"
        round
        icon="el-icon-arrow-left"
        style="margin-bottom: 40px"
        @click="jump_home"
        >返回</el-button
      >
      <div v-html="content"></div>
    </el-card>
  </div>
</template>

<script>

import { mapState } from "vuex";
export default {
  data() {
    return {
      //文章的标题
      title: "",
      //文章的内容
      content:''
    };
  },
  computed: {
    //引入vuex中state的变量，可以直接this.xxx调用到
    ...mapState(["articleIndex2"]),
  },
  created(){
    this.searchHtml()
  },
  methods: {
    jump_home() {
      this.$router.go(-1);
    },
    //请求后台，搜索信息拿到文章的数据
    searchHtml(){
      this.$axios.get("/Content/searchContentId",{
        id:this.articleIndex2
      }).then(res=>{
        this.title=res.contentTitle
        this.content=res.contentInfo
        console.log(res);
      })
    }
  },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

代码（后端）

结构：

ContentData

数据库实体类，存放数据库字段映射。

package com.example.demo.entity;

import com.fasterxml.jackson.annotation.JsonFormat;

import java.sql.Timestamp;

public class ContentData {
    private int id;
    private String entryName;
    private String contentTitle;
    private String contentInfo;
    //日期时间返回的格式规定
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
    private Timestamp createTime;

    public ContentData() {
    }

    public ContentData(int id, String entryName, String contentTitle, String contentInfo, Timestamp createTime) {
        this.id = id;
        this.entryName = entryName;
        this.contentTitle = contentTitle;
        this.contentInfo = contentInfo;
        this.createTime = createTime;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getEntryName() {
        return entryName;
    }

    public void setEntryName(String entryName) {
        this.entryName = entryName;
    }

    public String getContentTitle() {
        return contentTitle;
    }

    public void setContentTitle(String contentTitle) {
        this.contentTitle = contentTitle;
    }

    public String getContentInfo() {
        return contentInfo;
    }

    public void setContentInfo(String contentInfo) {
        this.contentInfo = contentInfo;
    }

    public Timestamp getCreateTime() {
        return createTime;
    }

    public void setCreateTime(Timestamp createTime) {
        this.createTime = createTime;
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

ContentController

给前端的接口写在这里

package com.example.demo.controller;

import com.example.demo.entity.ContentData;
import com.example.demo.entity.EntryList;

import com.example.demo.mapper.ContentMapper;

import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import java.util.List;

@RestController
@RequestMapping("/Content")
public class ContentController {
    @Resource
    ContentMapper contentMapper;
    //保存词条，文章标题，文章内容
    @CrossOrigin(origins ="*",maxAge = 3600)
    @GetMapping("/setContent")
    public void findContent(@RequestParam("entryName") String entryName, @RequestParam("contentTitle") String contentTitle, @RequestParam("contentInfo") String contentInfo){
        contentMapper.save(entryName,contentTitle,contentInfo);
    }
    //搜索用于展示的表格，分页查询文章的标题等展示
    @CrossOrigin(origins = "*", maxAge = 3600)
    @GetMapping("/SelectContentList")
    public EntryList findContent(@RequestParam("currentPage") int currentPage, @RequestParam("pageSize") int pageSize, @RequestParam("searchValue") String searchValue,@RequestParam("entryName") String entryName) {
        if (searchValue == "") {
            //判断：如果searchValue内为空，代表输入框没有输入值，那就正常查询所有表格数据返回
            //当前页
            int cuIndex = (currentPage - 1) * pageSize;
            //调用数据库的方法返回的表格数据用数组保存
            List list = contentMapper.ContentAll(cuIndex, pageSize, searchValue,entryName);
            //存下当前页
            int currentPageIndex = currentPage;
            //存下每页数
            int pageSizeIndex = pageSize;
            //调用数据库表格总数方法返回的值存下来
            int totalIndex = contentMapper.ContentIndex();
            //new出要返回给前端的对象，不new出对象无法往里面赋值
            EntryList entryList = new EntryList();
            //往对象内list添加表格数据
            entryList.setList(list);
            //把当前页赋值进去
            entryList.setCurrentPage(currentPageIndex);
            //把每页数赋值进去
            entryList.setPageSize(pageSizeIndex);
            //把总数赋值进去
            entryList.setTotal(totalIndex);
            //对象的数据上面赋值都拿到了，返回整个对象给前端
            return entryList;
        } else {
            //在搜索框输入了值就走这边。

            //当前页
            int cuIndex = (currentPage - 1) * pageSize;
            //调用数据库的方法返回的表格数据用数组保存
            List list = contentMapper.ContentAll(cuIndex, pageSize, searchValue,entryName);
            //存下当前页
            int currentPageIndex = currentPage;
            //存下每页数
            int pageSizeIndex = pageSize;
            //调用数据库表格总数方法返回的值存下来，这里专门调用的查询对应条件的总数方法
            int totalIndex = contentMapper.ContentSearchIndex(searchValue);
            //new出要返回给前端的对象，不new出对象无法往里面赋值
            EntryList entryList = new EntryList();
            //往对象内list添加表格数据
            entryList.setList(list);
            //把当前页赋值进去
            entryList.setCurrentPage(currentPageIndex);
            //把每页数赋值进去
            entryList.setPageSize(pageSizeIndex);
            //把总数赋值进去
            entryList.setTotal(totalIndex);
            //对象的数据上面赋值都拿到了，返回整个对象给前端
            return entryList;
        }
    }

    @CrossOrigin(origins = "*", maxAge = 3600)
    @GetMapping("/searchContentId")
    //根据id查询对应文章
    public ContentData searchContent(@RequestParam("id") Long id){
        return contentMapper.searchById(id);
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

ContentMapper

后端链接数据库操作的文件

package com.example.demo.mapper;

import com.example.demo.entity.ContentData;
import com.example.demo.entity.KnowledgeData;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;
import org.apache.ibatis.annotations.Update;

import java.util.List;

public interface ContentMapper {
    //把知识点的数据存进数据库，参数：词条名，文章标题，文章内容
    @Update("INSERT INTO `content_data`( `entryName`, `contentTitle`, `contentInfo`) VALUES (#{entryName},#{contentTitle},#{contentInfo});")
    void save(@Param("entryName") String entryName, @Param("contentTitle") String contentTitle, @Param("contentInfo") String contentInfo);

    //搜索数据库分页对应数据,搜索数据库模糊查询(这里参数要这么写：like concat('%',#{searchValue},'%'))
    @Select("select * from content_data where contentTitle like concat('%',#{searchValue},'%') and entryName=#{entryName} limit #{currentPage},#{pageSize}")
    List<ContentData> ContentAll(@Param("currentPage") int currentPage, @Param("pageSize") int pageSize, @Param("searchValue") String searchValue,@Param("entryName") String entryName);

    //搜索数据库数据总条数
    @Select("SELECT count(*) FROM content_data")
    int ContentIndex();

    //搜索数据库数据条件筛选后的总条数
    @Select("select count(*) from content_data where contentTitle like concat('%',#{searchValue},'%')")
    int ContentSearchIndex(@Param("searchValue") String searchValue);

    @Select("select * from content_data where id=#{id}")
    ContentData searchById(Long id);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

解释一下：因为我做了分页还有保存等操作，所以有三个接口，如果不需要的，只看@GetMapping(“/searchContentId”)的接口就行了。然后改改比如不用id根据别的来查询都可以。

数据库接收文章，类型设置为text。varchar不够长，如果再不够就longtext最长

清空富文本编辑器内容方法

刚下载的里面不包含清空方法，所以需要手动加一个。

1，在编辑器文件内加一个clear方法，里面写上这句话

    clear(){
      //清空富文本的内容
      window.tinymce.get(this.tinymceId).setContent( '')
    },
1
2
3
4

2，在你的组件上加上ref绑定dom

              <tinymce
                v-model="content_third"
                :height="300"
                ref="knowledgeText"
              />
1
2
3
4
5

3，操作dom调用子组件里面的clear方法清空数据

    setContent() {
      this.$axios
        .get("/Content/setContent", {
          entryName: this.entryText,
          contentTitle: this.form.title,
          contentInfo: this.content_first,
        })
        .then((res) => {
          this.$message({
            message: "业务内容发布成功！",
            type: "success",
          });
          this.form.title = "";
          //清空富文本编辑器内容
          this.$refs.contentText.clear();
        });
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

后端接收前端发来的文章提示请求头太大，Request header is too large 报错处理

问题原因：一个新增的接口，因为前端传入一段很长的JSON数组，导致了打印台报错
错误描述：java.lang.IllegalArgumentException: Request header is too large

请求头超过了tomcat的限值。本来post请求是没有参数大小限制，但是服务器有自己的默认大小
那就修改服务器的大小

普通tomcat
在server.xml中
处加上maxHttpHeaderSize =”102400”

SpringBoot
SpringBoot项目更方便了，在application.properties文件中添加

server.max-http-header-size=102400
1