PHP商城笔记(编辑器1) —— 简单介绍编辑器的原理

编辑器的原理
插入一个iframe
并利用网页的contentEditable属性
使该iframe可以编辑,再利用js完成加粗变色等效果
最后再获取该区域的内容即可

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script>
function t() {
    var d = document.getElementsByTagName('div')[0];
    alert(d.innerHTML);
}
        </script>
        <style type="text/css" media="screen">
           div{
            width: 500px;
            height: 300px;
            background: pink;
           } 
        </style>
    </head>
    <body>
    <div contentEditable="true">
        <pre>
        hello editor
        </pre>
    </div>
    <input type="button" name="" value="编辑器的内容" onclick="t();">
    </body>
</html>



页面效果
这里写图片描述



点击获取编辑器内容
这里写图片描述

猜你喜欢

转载自blog.csdn.net/dyw_666666/article/details/81512185
今日推荐