让layui支持wangEditor编辑器的方法


本文摘自PHP中文网,作者尚,侵删。

让layui支持wangEditor编辑器的方法:(推荐:layui使用教程)

wangEditor.min.js模块代码

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

比如引用一个123.js

"123.js" 基本配置编辑器模块代码如下

layui.config({

      base: '../lib/wang/' //wangEditor.min.js目录,根据自己存放位置修改

// 比如我的位置:lib/wang/wangEditor.min.js

});

 

layui.define(function(exports) {

      exports('wangeditor.min', function(){

       demo:demo//这句没用,只是测试

      });

});

 

//核心来了

layui.use(['layer', 'form','wangeditor.min'], function(){

  var layer = layui.layer

  ,form = layui.form

  ,wang=layui.wangeditor('wang');

  wang.create(); //创建编辑器

 

//一般在执行按钮操作时使用

 var html = wang.$txt.html(); // 获取内容,更多方法,请wangEditor编辑器官网

 console.log(html);

//一般在执行按钮操作时使用

});

<div class="wang" id="wang">这是编辑器哦</div>

1.jpg2.jpg

1

2

3

4

5

6

7

8

9

10

11

12

//富文本编辑器配置图片上传

  wang.config.uploadImgUrl = '../page/upload/upload.aspx '//调用后台方法

  wang.config.uploadImgFileName = 'file'// 可自己定义

  wang.config.uploadHeaders = {'Accept' : 'text/x-json'};

 

//后台上传返回代码

//图片上传失败。Response.Write "error|返回的信息"  根据自己的程序相应输出

 

------------成功返回-------------

直接输出图片路径地址:如 "/upload/xxxx.jpg"

------------成功返回-------------

error|返回的信息

下面简单介绍赋值编辑器内容,一般用到文章编辑

编辑页面

1

2

3

<textarea class="layui-textarea layui-hide//隐藏显示" name="content" id="content">这里是数据库读取的文章内容</textarea>

var editorhtml=$("#content").val() //获取 textarea的内容

wang.$txt.html(editorhtml);// 将内容添加到编辑器里

完整代码:https://pan.baidu.com/s/1-cXiYUIgqUfIpZBopEimWg

以上就是让layui支持wangEditor编辑器的方法的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

layui怎么实现下载功能

如何使用layui实现网页轮播图

layui上传图片成功之后怎么预览成功的图片

layui前端遇到的难点集合(附代码)

layui之弹出层关闭和刷新问题

为什么我的layui进度条渲染不出来

layui实现动态禁止select下拉的方法

什么是layui

使用layui渲染table数据表格(实例)

django+layui后台布局介绍

更多相关阅读请进入《layui》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...