-
TinyMCE编辑器配置正确但是不显示的解决方法
最近在给本站的后台功能做一次整体调整，在将 TinyMCE 富文本编辑器引入到页面表单时却不显示编辑器主体，反复检查确认了代码配置没有任何问题。在经过一番研究发现，由于表单页面是通过 iframe 引入到主体框架中的，这些表单页面并没有 <!DOCTYPE html> <html> <head> 等 HTML 元素，而 TinyMCE 没有获取到这些元素就认为这不是一个 HTML 页面，因此无法加......
-
TinyMCE插入代码块强制显示行号
TinyMCE自带codesample插入代码功能不支持行号，需要依靠Prism.js行号插件实现。在编辑器插入代码会生成如下代码： <pre class="line-numbers language-javascript"> <code> 代码内容 </code> </pre> 注意：class里的line-numbers类有时会没有自己加上，导致前台不显示行号，可能是个......
-
ThinkPHP6开发wangEditor图片上传接口的方法
wangEditor是一款近几年非常流行的富文本编辑器，它界面简洁，功能非常强大，本文介绍WangEditor图片上传接口的开发，以Thinkphp6为例。 首先看一下wangEditor官方的接口返回要求： 然后开发Thinkphp6的上传功能： public function testup(){ $file = request()->file('file'); $savename = \think......
-
Thinkphp6开发Tinymce图片上传接口的方法
Tinymce是项目开发中常用的编辑器之一，它的功能非常强大，界面简洁，又支持各种各样功能强大的插件，本文介绍一下ThinkPHP6开发Tinymce图片上传接口的方法。 public function uploads(){ $file = request()->file('file'); // 上传到本地服务器 $savename = \think\facade\Filesystem::disk('p......
-
去掉Tinymce图片上传自动添加的相对路径字符
Tinymce 是一款非常强大的富文本编辑器，被广泛的应用在很多web项目中，但 Tinymce 在上传图片时会自动在图片路径 src 前面加上../../这样的相对路径，导致图片路径错误无法显示，这时只需要在初始化 Tinymce 配置 tinymce.init({}) 中设置 convert_urls :false 就可以去除这些多余的字符。 <!-- 实例化编辑器 --> <script> ti......
-
使用 jQuery 高亮显示当前栏目导航链接
高亮显示当前栏目导航链接的原理是：先获取当前页面的 URL 或标识当前页面的导航链接，在文档加载时，使用 jQuery 添加一个特定的类或样式来高亮当前栏目导航链接。 以下是一个基本的示例，展示如何使用 jQuery 高亮显示当前栏目导航链接。在这个例子中，假设导航链接的 href 属性与当前页面的 URL 匹配。 <!DOCTYPE html> <html lang="en"> <head>......
-
实现自动高度的几种 CSS 方法
在前端开发中，经常需要使元素的高度自动调整，以适应其内容的情况。以下是一些常见的 CSS 使用方法： 1. 使用 height: auto;： 将元素的高度设置为 auto，这是元素高度的默认值。这样，元素的高度将根据其内容自动调整。 .auto-height { height: auto; } 2. 使用 overflow: auto; 或 overflow: hidden;： 如果希望元素的高度能够自动适应......
-
使用 Layui 和 jQuery 实现表单验证
对于 Layui 表单验证，可以结合 jQuery 使用 Layui 的验证规则。以下是一个示例，展示了如何使用 Layui 和 jQuery 实现用户名、密码、手机号、邮箱、身份证号的表单验证： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" con......
-
Web页面切换深色模式的实现原理
要实现页面切换深色模式并记住用户使用的模式，可以结合使用 JavaScript 和本地存储（LocalStorage 或 Cookies）。以下是一个简单的示例： HTML 页面结构： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content......
-
Layui + jQuery无刷新增删改查功能
使用Layui框架可以让后台管理功能开发更高效，UI风格更统一美观。简单介绍一下Layui+jQuery开发无刷新数据操作功能的原理，支持数据查询，增加，修改，删除（包括批量删除）。 index.html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Layui......
