layui富文本编辑器文档layedit组件的调用和图片上传接口的使用

简介: layui富文本编辑器文档layedit组件的调用和图片上传接口的使用

html内容

        <div class="layui-form-item">
            <label class="layui-form-label">信息内容</label>
            <div class="layui-input-block">
                <textarea id="L_c_content" name="c_content" style="display: none;"></textarea>
            </div>
        </div>


初始化’layedit’

  layui.use(['form', 'layer', 'layedit', 'upload'], function () {
        $ = layui.jquery;
        var form = layui.form, layer = layui.layer, layedit = layui.layedit;
        var upload = layui.upload;


调用返回的内容

获得编辑器的内容 参数 index: 即执行layedit.build返回的值

   //上传图片;
        layedit.set({
            uploadImage: {
                url: '?m=Customer&a=customerDeal&act=upImg'
                , type: 'post'
            }
        });
/建立编辑器
      var index = layedit.build('L_c_content');
      var content = layedit.getContent(index);


上传图片接口

返回的JSON格式

{
  "code": 0 //0表示成功,其它失败
  ,"msg": "" //提示信息 //一般上传失败后返回
  ,"data": {
    "src": "图片路径"
    ,"title": "图片名称" //可选
  }
}


lokdatav Done!

相关文章
|
JavaScript 数据可视化
基于fabric.js的图片编辑器, 画布背景实现原理
基于vue3 + fabric.js + vite + element-plus + typescript等技术,画布背景原理分析
基于fabric.js的图片编辑器, 画布背景实现原理
|
移动开发 前端开发 JavaScript
基于 HTML5 和 Canvas 开发的在线图片编辑器
基于 HTML5 和 Canvas 开发的在线图片编辑器
495 0
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
905 9
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
|
JavaScript 前端开发 API
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
本文介绍了如何在Vue 3项目中使用v-md-editor组件库来创建markdown编辑器和预览组件。文章提供了安装步骤、如何在main.js中进行全局配置、以及如何在页面中使用VMdEditor和VMdPreview组件的示例代码。此外,还提供了一个完整示例的链接,包括编辑器和预览组件的使用效果和代码。
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
|
JavaScript
在Vue项目中vue-quill-editor的安装与使用【详细图解+过程+包含图片的缩放拖拽】
文章详细介绍了在Vue项目中安装和使用`vue-quill-editor`的步骤,包括如何通过npm安装、局部挂载、在Vue页面中引入和配置使用。同时,还提供了如何实现图片的缩放和拖拽功能的进阶教程,涉及到安装额外的插件`quill-image-drop-module`和`quill-image-resize-module`,以及对Webpack配置的调整。最后,文章还提供了实际效果展示和一些后续可能的拓展功能,如上传视频和将图片上传到服务器等。
在Vue项目中vue-quill-editor的安装与使用【详细图解+过程+包含图片的缩放拖拽】
Vue3项目引入 vue-quill 编辑器组件并封装使用
本文介绍了如何在Vue3项目中引入并封装使用`vue-quill`富文本编辑器组件,包括安装配置、父页面实现、子组件设计以及使用方法和效果展示。
3456 0
Vue3项目引入 vue-quill 编辑器组件并封装使用
|
JavaScript 数据安全/隐私保护 开发者
开源图片编辑器推荐-可用于海报编辑、商品设计、封面设计、标签设计等场景
推荐开源图片编辑器,基于fabric.js和Vue开发,适合海报、Logo等设计场景。拥有4.4K GitHub Stars,特性包括自定义字体、素材、模板,支持插件扩展、右键菜单及快捷键。提供图片滤镜、裁剪、拖拽、PSD导入、水印设置和分类素材管理。适用于非专业设计者,易于二次开发。
549 0
开源图片编辑器推荐-可用于海报编辑、商品设计、封面设计、标签设计等场景
|
前端开发 算法
ProFlow 流程编辑器框架问题之FlowView 组件中添加节点和边缘数据如何解决
ProFlow 流程编辑器框架问题之FlowView 组件中添加节点和边缘数据如何解决
259 0
|
JavaScript
【vue】 Tinymce 富文本编辑器 不想让上传的图片转换成base64,而是链接
【vue】 Tinymce 富文本编辑器 不想让上传的图片转换成base64,而是链接
907 0
文本---富文本编辑器------Vue3使用富文本编辑器,Quill,全局样式和组件和样式的写法
文本---富文本编辑器------Vue3使用富文本编辑器,Quill,全局样式和组件和样式的写法