6hz7vif 发表于 2024-10-5 05:33:23

php常用的富文本编辑器,ueditor和kindeditor


    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">序言:几乎所有的后台程序员在<span style="color: black;">研发</span>过程中都会遇到富文本编辑器,在后台<span style="color: black;">文案</span>详情上传、商品详情上传等等肯定是要用到富文本编辑器,<span style="color: black;">那样</span>哪几款富文本编辑器是程序员最<span style="color: black;">喜欢</span>的呢?<span style="color: black;">这儿</span>我认为是ueditor和kindeditor。</p>
    <h1 style="color: black; text-align: left; margin-bottom: 10px;">ueditor又<span style="color: black;">叫作</span>百度编辑器</h1>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/21f930d249b24088a4909c6723565e64~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728296988&amp;x-signature=1e%2F%2FUNyu8wGMRYYOzK4fKLok3bE%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">下载<span style="color: black;">位置</span>:</p>https://github.com/fex-team/ueditor/tree/dev-1.4.3
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">运用</span><span style="color: black;">办法</span>:</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1、在head中引用所需js</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/ec8d7bd98f65423bac9d9ac5df4af085~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728296988&amp;x-signature=nRjr0upUwWHjFYGEC6%2BmUIV%2FVyE%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2、定义元素&lt;div&gt;&lt;/div&gt;,声明id="editor"</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/f960ffd7411b49c3b32115ac71804370~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728296988&amp;x-signature=Y6y5BMjc2wgZ7pQZcbQab%2FpE79k%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3、在js中实例化刚才定义的容器,并且<span style="color: black;">经过</span>获取内容的<span style="color: black;">办法</span>获取所需的值,用于提交数据库</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/813dad175f914b03ace808bbd40a43fa~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728296988&amp;x-signature=rfQCGyPuDTDRVpkFYCl3s5BRHCs%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">4、配置完之后就<span style="color: black;">能够</span>直接<span style="color: black;">运用</span>ueditor了,此版本是不需要配置<span style="color: black;">照片</span>上传的路径,点击<span style="color: black;">照片</span>上传直接就<span style="color: black;">能够</span>上传成功,<span style="color: black;">倘若</span><span style="color: black;">无</span>反应<span style="color: black;">或</span>上传失败<span style="color: black;">能够</span><span style="color: black;">检测</span><span style="color: black;">保留</span>文件的权限。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">php语言的<span style="color: black;">照片</span>都会<span style="color: black;">保留</span>到upload下。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/18f5fca197634fa79b2b904e798c52a1~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728296988&amp;x-signature=WWETsAT09wyxLnvp7GWzqHSB0S8%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <h1 style="color: black; text-align: left; margin-bottom: 10px;">kindeditor,非常的轻巧简洁</h1>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/f4697f28b66f421687106ee75ad4ea86~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728296988&amp;x-signature=%2BP0tEfJ0%2FpsSoPKuQXRPLeIZiVU%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">下载<span style="color: black;">位置</span>:</p>http://kindeditor.net/down.php

    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">运用</span><span style="color: black;">办法</span>:</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1、在head中引用所需js,并进行实例化容器,还<span style="color: black;">能够</span><span style="color: black;">按照</span><span style="color: black;">关联</span><span style="color: black;">办法</span>获取内容区域的值,用于<span style="color: black;">保留</span>到数据库中。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/e435a90d0dd94abc992d9cf3475379c9~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728296988&amp;x-signature=%2BDKRvljPCkX%2BahaJig1Anx%2FitgQ%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2、声明内容容器 name="content"</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/07cc08fae934469e9ab3725da623164a~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728296988&amp;x-signature=F753FccT70DBoLx16tEsXQ919d0%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <h1 style="color: black; text-align: left; margin-bottom: 10px;">总结一下</h1>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/ef841f3323814ef4ace4e7dfc2489dbd~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728296988&amp;x-signature=3VD5iukDx3BvLERknpDf9CY67bg%3D" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">我在<span style="color: black;">研发</span>过程中最常用到的<span style="color: black;">便是</span>这两款富文本编辑器,<span style="color: black;">按照</span>个人<span style="color: black;">爱好</span><span style="color: black;">来讲</span>我更<span style="color: black;">爱好</span><strong style="color: blue;">kindeditor,</strong><span style="color: black;">由于</span>默认<span style="color: black;">状况</span>下ueditor会存在&lt;p&gt;标签,但<span style="color: black;">非常多</span>什么这并不是<span style="color: black;">研发</span>者所需要的,我<span style="color: black;">亦</span>懒得去配置,除此之外百度编辑器虽然功能<span style="color: black;">非常多</span>但<span style="color: black;">显出</span>能臃肿,而kindeditor相对<span style="color: black;">来讲</span>就干净的多,<span style="color: black;">仅有</span>在你设置<span style="color: black;">关联</span>属性的时候才会存在。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">我是小程序软件<span style="color: black;">研发</span>,<span style="color: black;">每日</span>分享<span style="color: black;">研发</span>过程中遇到的知识点,点击左上角关注,<span style="color: black;">每日</span><span style="color: black;">认识</span>不<span style="color: black;">同样</span>的知识。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">《完》</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">大众</span><span style="color: black;">倘若</span><span style="color: black;">爱好</span>的话麻烦点赞、关注、转发,谢谢<span style="color: black;">大众</span>。</strong></p>




7wu1wm0 发表于 2 小时前

你的见解真是独到,让我受益匪浅。
页: [1]
查看完整版本: php常用的富文本编辑器,ueditor和kindeditor