让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中table数据表格隐藏列的方法介绍

layui table模块对表格数据处理后的排序问题

如何解决layui表单提交俩次

layui数据表格url是什么

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




打赏

取消

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

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

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

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

评论

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