图1 wang编辑器效果图
1、npm安装
安装过程比较简单,不做重复,说一下使用过程遇到的问题
插入hr
查看源码
图2 查看源码效果图
实现目标:
点击查看的时候,遮盖其它的按钮,防止查看源码的时候,点击了别的按钮进行了误操作。
新加的菜单默认都是在最后全屏前边,分割线还可以,但是查看源码我个人还是习惯在最前边,使用的是jquery prepend感觉更加简单一些,代码如下:
说明:
弹出的窗口,点击关闭无效不能关闭
图3 弹出菜单无法关闭
如图,点击关闭的时候会切换到了网络图片的表单,这应该是菜单同级别,遮盖了关闭的按钮,所以我们要写css样式加上z-index使关闭的菜单在其他的上层;
css代码
2、cdn引用js
我是下载到本地的
图4 多图上传F12查看效果
图片上传,如果选择多个图片,可能会出现以上图片的情况style="font-size: 14px; font-family: "Helvetica Neue", Helvetica, "PingFang SC", Tahoma, Arial, sans-serif; max-width: 100%;"
复制html发现是如下代码:
<img src="/public/upload/image/20211201/111.jpg" style="font-size: 14px; font-family: & quot; Helvetica Neue & quot; , Helvetica, & quot; PingFang SC & quot; , Tahoma, Arial, sans-serif; max-width: 100%;">
很明显style内的 css样式,不是应该出现的,没有找到在哪里修改。
双引号换成了 & quot; 如果不用查看源码,页面直接显示没有问题,但是查看源码,切换回来以后,会发现图片乱了,所以查看源码的时候,需要把 & quot; 替换成空。
以下使用jquery实现自定义菜单(查看源码、插入分割线):
如果我们把插入分割线的代码单独拿出来,只是下面几行,相对使用官方提供的方法会简单很多
说明:
附录一下jquery after,before,append,prepend用法:
向class=w-e-toolbar的div头部插入html
$(" .w-e-toolbar").prepend("<div >头部插入 html </div>")
向class=w-e-toolbar的div底部插入html
$(" .w-e-toolbar").append("<div >底部插入 html </div>")
向class=w-e-toolbar的div之前插入html
$(" .w-e-toolbar").before("<div >之前插入 html </div>")
向class=w-e-toolbar的div之后插入html
$(" .w-e-toolbar").after("<div >后面插入 html </div>")
可以做一下延伸:像我们上边用到的向第几个元素之后或者之前插入代码。
评论留言