2023-4-4 富文本编辑&&模糊查询

1.富文本

1)引入wangeditor的js代码,并且创建wangEditor.js文件
2)复制html代码

          （1）如溢出进行换行

             (2)  对content进行设置id和宽度与高度，把原先的input删除

           （3）并把wangEditor.js引入，放在jquery下

 3).在js里面添加加载富文本的js

    (1):修改连接后台的文件地址：const editUrl = '/upload';//服务器访问地址

     (2)要将传递到前端的地址进行回显到html：insertImg(url)//回显到富文本里面 *

4) 对富文本进行取值赋值

    (1)取值：editor.txt.html();

    (2)   赋值：editor.txt.html(data.content);

2）复制html代码

如溢出进行换行

<style>
    #content > div:nth-child(1) {
        display: flex;
        flex-wrap: wrap;
    }
</style>

对content进行设置id和宽度与高度

<div class="layui-form-item">
    <label for="content" class="layui-form-label">
        <span class="x-red">*</span>新闻内容</label>
    <div class="layui-input-inline">
        <div id="content" style="height: 500px; width: 400px">
        </div>
    </div>
    <div class="layui-form-mid layui-word-aux">
        <span class="x-red">*</span>
    </div>
</div>

3）在js里面添加加载富文本的js

// // 创建富文本
// function setWE() {
const E = window.wangEditor;
const editor = new E('#content');
const editUrl = '/upload';//服务器访问地址
editor.customConfig.uploadImgShowBase64 = true;  // 使用 base64 保存图片
editor.customConfig.uploadImgServer = editUrl; // 上传图片到服务器
editor.customConfig.showLinkImg = false;// 隐藏“网络图片”tab
//配置属性名称，绑定请求的图片数据
editor.customConfig.uploadFileName = 'wangEditorUrl';
editor.customConfig.withCredentials = true;
// 将图片大小限制为 5M
editor.customConfig.uploadImgMaxSize = 5 * 1024 * 1024;
editor.customConfig.uploadImgHooks = {

    success: function (xhr, editor, result) {
        // 图片上传并返回结果，图片插入成功之后触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        console.log(result);
    },
    // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
    // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
    customInsert: function (insertImg, result, editor) {
        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
        let url = result.data;
        console.log(url);
        insertImg(url)//回显到富文本里面
        // result 必须是一个 JSON 格式字符串！！！否则报错
    }
};

//富文本创建
editor.create();
// }

//监听提交
form.on('submit(NewsAdd)',
    function (data) {
        data = data.field;
        ///监听提交富文本编辑赋值
        data.content=editor.txt.html();

        // console.log(data);
        // data.imghref=imgHref;
        // console.log(data);


        $.ajax({
            url: '/back/news/a