wangEditor使用及文件上传及link命令

网址:http://www.wangeditor.com/

下载git下项目,文件夹dist中将,js、css、fonts分别放入项目的public下

引入css

引入js

textarea:

js:

效果:

 

但是数据库中储存为:

前台需要进行转义:

 

图片上传:

修改之前js,下划线为新增

创建路由:

链接:(将图片存储在storage/app/public目录下),但是storage目录用户无法访问所以需要做链接。

修改配置文件

执行命令

后台代码

原文链接:http://blog.maptoface.com/post/56 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
WangEditor是一款基于javascript和jQuery开发的富文本编辑器,它支持常见的文本编辑操作、图片上传和格式化等功能。如果您想对WangEditor进行二次封装和使用,可以按照以下步骤进行: 1. 下载WangEditor 您可以从官网上下载WangEditor的源码文件,也可以使用npm进行安装。 2. 引入WangEditorWangEditor的JS和CSS文件引入到您的HTML文件: ```html <link rel="stylesheet" type="text/css" href="path/to/wangEditor.css"> <script type="text/javascript" src="path/to/jquery.js"></script> <script type="text/javascript" src="path/to/wangEditor.js"></script> ``` 3. 创建编辑器实例 在HTML文件创建一个div元素,作为编辑器的容器,然后通过JavaScript代码创建编辑器实例: ```html <div id="editor"></div> <script type="text/javascript"> var editor = new wangEditor('editor'); editor.create(); </script> ``` 4. 配置编辑器 您可以通过传递配置对象来配置编辑器,例如: ```html <div id="editor"></div> <script type="text/javascript"> var editor = new wangEditor('editor'); // 配置编辑器 editor.config.uploadImgUrl = '/upload'; editor.config.uploadImgFileName = 'image'; editor.config.menus = [ 'bold', 'italic', 'underline', 'strikeThrough', 'eraser', 'foreColor', 'backColor', 'justifyLeft', 'justifyCenter', 'justifyRight', 'table', 'code', 'undo', 'redo' ]; editor.create(); </script> ``` 5. 使用编辑器 编辑器创建完成后,您可以使用它提供的方法来操作文本内容,例如: ```javascript // 获取编辑器内容 var content = editor.$txt.html(); // 设置编辑器内容 editor.$txt.html('<p>这是新的内容</p>'); ``` 以上就是二次封装和使用WangEditor的基本步骤,您可以根据自己的需要进行配置和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

全职计算机毕业设计

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值