From 5ff0dc65650b3ad7b94c2f289c45fc86d6d12dca Mon Sep 17 00:00:00 2001
From: Helius <wangdoubleone@gmail.com>
Date: Tue, 17 May 2022 18:43:31 +0800
Subject: [PATCH] fix goods editor
---
src/main/resources/templates/febs/views/modules/goods/goodsAddNew.html | 78 +++++++++++++++++--------
src/main/resources/templates/index.html | 2
src/main/resources/templates/febs/views/modules/goods/goodsUpdateNew.html | 60 ++++++++++----------
3 files changed, 85 insertions(+), 55 deletions(-)
diff --git a/src/main/resources/templates/febs/views/modules/goods/goodsAddNew.html b/src/main/resources/templates/febs/views/modules/goods/goodsAddNew.html
index 18b2c15..5cbc964 100644
--- a/src/main/resources/templates/febs/views/modules/goods/goodsAddNew.html
+++ b/src/main/resources/templates/febs/views/modules/goods/goodsAddNew.html
@@ -142,7 +142,11 @@
<div class="layui-form-item">
<label class="layui-form-label febs-form-item-require">商品详情：</label>
<div class="layui-input-block">
- <textarea id="goodsDetailEdit" lay-verify="goodsDetails" name = "goodsDetails" class="layui-textarea"></textarea>
+<!-- <textarea id="goodsDetailEdit" lay-verify="goodsDetails" name = "goodsDetails" class="layui-textarea"></textarea>-->
+ <div style="border: 1px solid #ccc;">
+ <div id="toolbar-container" style="border-bottom: 1px solid #ccc;"></div>
+ <div id="editor-container" style="height: 450px;"></div>
+ </div>
</div>
</div>
</div>
@@ -254,6 +258,29 @@
element = layui.element;
form.render();
+
+ var E = window.wangEditor;
+ const editorConfig = { MENU_CONF: {} };
+ editorConfig.MENU_CONF['uploadImage'] = {
+ server: '/admin/goods/uploadFileBase64',
+ fieldName : "file",
+ customInsert(res, insertFn) {
+ insertFn(res.data.src, res.data.title, '')
+ },
+ }
+
+ const editor = E.createEditor({
+ selector: '#editor-container',
+ config : editorConfig,
+ mode: 'default'
+ });
+
+ const toolbar = E.createToolbar({
+ editor,
+ selector: '#toolbar-container',
+ mode: 'default'
+ });
+
laydate.render({
elem: '#febs-form-group-date'
});
@@ -466,37 +493,38 @@
}
});
- layedit.set({ //设置图片接口
- uploadImage: {
- url: 'admin/goods/uploadFileBase64', //接口url
- type: 'post',
- }
- });
- //创建一个编辑器
- var index = layedit.build('goodsDetailEdit', { height: '300px', });
- //提交时把值同步到文本域中
- form.verify({
- //content富文本域中的lay-verify值
- goodsDetails: function(value) {
- return layedit.sync(index);
- }
- });
+ // layedit.set({ //设置图片接口
+ // uploadImage: {
+ // url: 'admin/goods/uploadFileBase64', //接口url
+ // type: 'post',
+ // }
+ // });
+ // //创建一个编辑器
+ // var index = layedit.build('goodsDetailEdit', { height: '300px', });
+ // //提交时把值同步到文本域中
+ // form.verify({
+ // //content富文本域中的lay-verify值
+ // goodsDetails: function(value) {
+ // return layedit.sync(index);
+ // }
+ // });
- upload.render({
- elem: '#skuImg'+index
- ,url: ctx + 'admin/goods/uploadFileBase64' //改成您自己的上传接口
- ,done: function(res){
- febs.alert.success(res.data.src);
- $('#imageUrls' + index).attr('src', res.data.src);
- $('#skuImage'+ index).val(res.data.src);
- }
- });
+ // upload.render({
+ // elem: '#skuImg'+index
+ // ,url: ctx + 'admin/goods/uploadFileBase64' //改成您自己的上传接口
+ // ,done: function(res){
+ // febs.alert.success(res.data.src);
+ // $('#imageUrls' + index).attr('src', res.data.src);
+ // $('#skuImage'+ index).val(res.data.src);
+ // }
+ // });
form.on('submit(goods-add-form-submit)', function (data) {
data.field.goodsType = 1;
data.field.addMallGoodsSkuDtos = tableSkuData;
data.field.categoryId = category.getValue('valueStr');
+ data.field.goodsDetails = editor.getHtml();
$.ajax({
'url':ctx + 'admin/goods/addMallGoods',
'type':'post',
diff --git a/src/main/resources/templates/febs/views/modules/goods/goodsUpdateNew.html b/src/main/resources/templates/febs/views/modules/goods/goodsUpdateNew.html
index 72b08ec..200bb4a 100644
--- a/src/main/resources/templates/febs/views/modules/goods/goodsUpdateNew.html
+++ b/src/main/resources/templates/febs/views/modules/goods/goodsUpdateNew.html
@@ -164,8 +164,11 @@
<div class="layui-form-item">
<label class="layui-form-label febs-form-item-require">商品详情：</label>
<div class="layui-input-block">
- <textarea id="lay_edit" lay-verify="goodsDetails" name="goodsDetails"
- class="layui-textarea"></textarea>
+<!-- <textarea id="lay_edit" lay-verify="goodsDetails" name="goodsDetails" class="layui-textarea"></textarea>-->
+ <div style="border: 1px solid #ccc;">
+ <div id="toolbar-container" style="border-bottom: 1px solid #ccc;"></div>
+ <div id="editor-container" style="height: 300px;"></div>
+ </div>
</div>
</div>
</div>
@@ -302,23 +305,15 @@
formSelects.render();
- layedit.set({ //设置图片接口
- uploadImage: {
- url: 'admin/goods/uploadFileBase64', //接口url
- type: 'post',
- }
- });
- //创建一个编辑器
- var index = layedit.build('lay_edit', {
- height: 300
- });
- //提交时把值同步到文本域中
- form.verify({
- //content富文本域中的lay-verify值
- goodsDetails: function (value) {
- return layedit.sync(index);
- }
- });
+ var E = window.wangEditor;
+ const editorConfig = { MENU_CONF: {} };
+ editorConfig.MENU_CONF['uploadImage'] = {
+ server: '/admin/goods/uploadFileBase64',
+ fieldName : "file",
+ customInsert(res, insertFn) {
+ insertFn(res.data.src, res.data.title, '')
+ },
+ }
var category = xmSelect.render({
el: '#goods-category',
@@ -580,26 +575,31 @@
}
$('#demo2').append('<img src="' + goodsInfo.thumb + '" alt="" class="layui-upload-img" style="width: 100px">')
- layedit.setContent(index, goodsInfo.goodsDetails, false);
+
+ console.log(goodsInfo.goodsDetails);
+
+ window.editor = E.createEditor({
+ html: goodsInfo.goodsDetails,
+ selector: '#editor-container',
+ config : editorConfig,
+ mode: 'default'
+ });
+
+ window.toolbar = E.createToolbar({
+ editor,
+ selector: '#toolbar-container',
+ mode: 'default'
+ });
tableSkuData = skus;
reloadTable(skus);
}
-
- upload.render({
- elem: '#skuImg' + index
- , url: ctx + 'admin/goods/uploadFileBase64' //改成您自己的上传接口
- , done: function (res) {
- febs.alert.success(res.data.src);
- $('#imageUrls' + index).attr('src', res.data.src);
- $('#skuImage' + index).val(res.data.src);
- }
- });
form.on('submit(goods-update-form-submit)', function (data) {
data.field.goodsType=1;
data.field.mailGoodsSkuDto = tableSkuData;
data.field.delSkuId=delSku;
data.field.categoryId = category.getValue('valueStr');
+ data.field.goodsDetails = editor.getHtml();
$.ajax({
'url': ctx + 'admin/goods/updateMallGoods',
'type': 'post',
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index 626240d..66370b5 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -16,6 +16,8 @@
<link rel="stylesheet" th:href="@{febs/css/formSelects-v4.css}" media="all">
<!-- 高德地图，key为演示作用，请勿滥用-->
<script src="https://webapi.amap.com/maps?v=1.4.15&key=0e8a587317998a5e03cf608649b229d6&plugin=AMap.Autocomplete"></script>
+ <link href="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
+ <script src="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/index.min.js"></script>
<link rel="icon" th:href="@{febs/images/favicon.ico}" type="image/x-icon"/>
</head>
<body>
--
Gitblit v1.9.1