Javascript实现简单的富文本编辑器附演示,简易文本编辑器

您可能感兴趣的文章:

  • nodejs后台集成ueditor富文本编辑器的实例
  • Vue.js结合Ueditor富文本编辑器的实例代码
  • 学习js在线html(富文本,所见即所得)编辑器
  • javascript开发随笔3
    开发iframe富文本编辑器的一点体会
  • 19款Javascript富文本网页编辑器
  • 不到200行 JavaScript
    代码实现富文本编辑器的方法

<?php
//获取文件目录列表,该方法返回数组
function getDir($dir=”) {
    $dir=empty($dir) ? getcwd() : $dir;
    $dirArray[]=NULL;
    if (false != ($handle =
opendir ( $dir ))) {
        $i=0;
        while ( false !== ($file = readdir ( $handle )) ) {
            //去掉”“.”、“..”以及带“.xxx”后缀的文件
            if ($file != “.” && $file != “..”&&!strpos($file,”.”)) {
                $dirArray[$i]=$file;
                $i++;
            }
        }
        //关闭句柄
        closedir ( $handle );
    }
    return $dirArray;
}
?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>IIS目录批量设置</title>
<style>
body {
    font:12px/22px “Microsoft YaHei”, SimSun;
}
input, select, texteare, button
{
    font-family:”Microsoft YaHei”, SimSun;
}
</style>
</head>
<body>
<?php
if(empty($_POST)){
?>
<form action=”” method=”post”  onsubmit=”return check();”>
<h2>当前目录:<?php echo getcwd();?></h2>
<div>
  <fieldset>
    <legend>网站目录</legend>
    <div>
      <ul>
<?php
      $dirArr=getDir();
      if(is_array($dirArr)){
          foreach($dirArr as
$dir){
?>
        <li>
          <label>
            <input name=”directory[]”
type=”checkbox”
value=”<?php echo $dir;?>” />
           <?php echo $dir;?></label>
        </li>
<?php     
          }
      }
?>
      </ul>
        <div>
        <input id=”CheckALL” type=”button” onclick=”checkAll();”
value=”全选” />
        <input id=”NoCheckAll” type=”button” onclick=”noCheckAll();”
value=”全不选” />
        <input id=”inverse” type=”button” onclick=”inverseCheck()”
value=”反选” />
         </div>
    </div>
  </fieldset>
</div>
<div>
  <fieldset>
    <legend>执行权限</legend>
    <div>
      <select name=”Execute” onchange=”Warning(this.value)”>
        <option value=”0″ selected=”selected”>无</option>
        <option value=”1″>纯脚本</option>
        <option value=”2″>脚本和可执行</option>
      </select>
    </div>
  </fieldset>
</div>
<div>
  <fieldset>
    <legend>站点信息</legend>
    <div>
      站点ID: <input name=”SiteId” id=”SiteId” type=”text” value=””
/>
    </div>
  </fieldset>
</div>
<div style=”margin-top:20px; padding-left:20px;”>
  <input type=”submit” value=”提交” />
</div>
</form>
<script
type=”text/javascript”>
    var all = document.getElementById(“CheckALL”); //全选
    var single = document.getElementsByName(“directory[]”); //选项
    var noAll = document.getElementById(“NoCheckAll”); //不全选
    var inverse = document.getElementById(“inverse”); //反选
    var SiteId = document.getElementById(“SiteId”); //SiteId
    function checkTrue() {
        for (var i = 0; i < single.length; i++) {
            single[i].checked = true;
        }
    }
    function checkFalse() {
        for (var i = 0; i < single.length; i++) {
            single[i].checked = false;
        }
    }
    //全选
    function checkAll() {
        if (all.disabled == false) {
            noAll.disabled = false;
            checkTrue();
        }
        else {
            noAll.disabled = true;
            checkFalse();
        }
        all.disabled = true;
    }
    //全不选
    function noCheckAll() {
        if (noAll.disabled == false) {
            all.disabled = false;
            checkFalse();
        }
        else {
            all.checked = true;
            checkTrue();
        }
        noAll.disabled = true;
    }
    //反选
    function inverseCheck() {
        noAll.disabled = false;
        all.disabled = false;
        for (var i = 0; i < single.length; i++) {
            single[i].checked = !single[i].checked;
        }
    }
    function Warning(value) {
        if(value==2){
        alert(‘目录拥有 “脚本和可执行” 权限会很危险请慎重选择!’)
        }
    }
    function check(){
        var checkd_sum;
        checkd_sum=0;
        for (var i = 0; i < single.length; i++) {
            if(single[i].checked ==true){
            checkd_sum++;
            }
        }
        if(checkd_sum==0){
            alert(‘请先选择目录!’);
            return false;
        }
        if(SiteId.value==””){
            alert(‘请输入站点ID!’);
            return false;
        }
        return true;
    }
</script>
<?php
}else{
    $directorys=@$_POST[‘directory’];
    $Execute=@$_POST[‘Execute’];
    $SiteId=@$_POST[‘SiteId’];
    $SiteId=trim($SiteId);
    if($Execute=0){
       
$ExecutePermission=”AccessRead”;
    }
    if($Execute=1){
        $ExecutePermission=”AccessRead | AccessScript”;
    }
    if($Execute=1){
        $ExecutePermission=”AccessExecute | AccessRead |
AccessScript”;
    }
?>
<div>
<pre>
<?php
if(is_array($directorys)){
    foreach($directorys as $directory ){
        echo <<<EOF
<IIsWebDirectory Location =”/LM/W3SVC/{$SiteId}/root/{$directory}”
    AccessFlags=”{$ExecutePermission}”
>
</IIsWebDirectory>rn
EOF;
    }
}
?>
</pre>
</div>
<?php
}
?>
</body>
</html>

javascript 简易文本编辑器

写在前面:

 

本文本编辑器具备功能:选择字体大小、颜色、加粗、斜体、下划线。点击
‘Submit’ 后生成预览,再点击 ‘Edit’ 后可继续编辑。

 

主要利用的是 document.execCommand()指令 和
div的contentEditable属性(值为true或空或inherit时,div中的内容可编辑,为false时不可编辑)。

 

 

 

正文开始:

 

index.html:

 

 

 1 <!DOCTYPE html>

 2 <html>

 3     <head>

 4     <title> 捉妖菌のEditor </title>

 5         <link href=”index.css” rel=”stylesheet”>

 6         <script type=”text/javascript”
src=”index.js”></script>

 7     </head>

 8     <body>

 9         <div id=”toolbar”>

10             <span>Size:</span>

11             <select id=”size”>

12                 <option value=”3″>Tiny</option>

13                 <option value=”4″>Small</option>

14                 <option value=”5″>Normal</option>

15                 <option value=”6″>Big</option>

16                 <option value=”7″>Large</option>

17             </select>

18              

19 

20             <span>Color:</span>

21             <select id=”color”>

22                 <option value=”black”
style=”color:black”>Black</option>

23                 <option value=”gray”
style=”color:gray”>Gray</option>

24                 <option value=”brown”
style=”color:brown”>Brown</option>

25                 <option value=”red”
style=”color:red”>Red</option>

26                 <option value=”pink”
style=”color:pink”>Pink</option>

27                 <option value=”yellow”
style=”color:yellow”>Yellow</option>

28                 <option value=”orange”
style=”color:orange”>Orange</option>

29                 <option value=”blue”
style=”color:blue”>Blue</option>

30                 <option value=”Green”
style=”color:green”>Green</option>

31             </select>

32              

33 

34             <span><strong>B</strong></span>

35             <input type=”checkbox” id=”bold”>

36              

37 

38             <span><i>I</i></span>

39             <input type=”checkbox” id=”italic”>

40              

41 

42             <span
style=”text-decoration:underline”>U</span>

43             <input type=”checkbox” id=”underline”>

44         </div>

45         <div>

46             <input type=”button” value=”Submit” id=”submit”>

47             <input type=”button” value=”Edit” id=”edit”>

48         </div>

49         <div id=”editor” class=”editable”></div>  

50     </body>

51 </html>

复制代码

 

 

index.css:

 

 

 1 .editable, .display {

 2     resize: vertical;

 3     overflow: auto;

 4     border: 1px solid silver;

 5     border-radius: 5px;

 6     min-height: 400px;

 7     padding: 1em;

 8     margin-top: 20px;

 9 }

10 

11 body {

12     font-size: 13pt;

13     font-family: “Microsoft Yahei”, Georgia, Serif;

14 }

15 

16 #submit, #edit {

17     position: absolute;

18     top: 22px;

19     right: 20px;

20     height: 30px;

21 }

22 

23 #edit {

24     display: none;

25 }

26 

27 #toolbar {

28     margin-top: 20px;

29     border: 1px solid silver;

30     padding: 5px;

31     background-color: #F2F2F2;

32     border-radius: 5px;

33 }

34 

35 .editable {

36     box-shadow: inset 0 0 10px silver;

37 }

38 

39 .display {

40     box-shadow: 0px;

41 }

 

注:因为div
#editor有两种形式:编辑和预览。所以两种模式下,div需呈现出不同的样式,以免使用者产生不解。通过js更改#editor的className即可达到效果。

 

 

 

 

 1 $ = function(id) { return document.getElementById(id); };

 2 $$ = function(tag) { return document.getElementsByTagName(tag); };

 3 

 4 window.onload = function() {

 5     $(‘editor’).contentEditable = true;

 6     $(‘size’).onchange = function() {

 7         var s = parseInt($(‘size’).value);

 8         $(‘editor’).focus();

 9         document.execCommand(‘FontSize’, false, s);

10     }

11     $(‘color’).onchange = function() {

12         $(‘editor’).focus();

13         document.execCommand(‘ForeColor’, false, $(‘color’).value);

14     };

15     $(‘bold’).onchange = function() {

16         $(‘editor’).focus();

17         document.execCommand(‘Bold’);

18     };

19     $(‘italic’).onchange = function() {        

20         $(‘editor’).focus();

21         document.execCommand(‘Italic’);

22     };

23     $(‘underline’).onchange = function() {

24         $(‘editor’).focus();

25         document.execCommand(‘Underline’);

26     };

27 

28     $(‘submit’).onclick = function() {

29         $(‘editor’).contentEditable = false;

30         $(‘toolbar’).style.visibility = ‘hidden’;

31         $(‘edit’).style.display = ‘block’;

32         $(‘submit’).style.display = ‘none’;

33         $(‘editor’).className = ‘display’;

34     }

35     $(‘edit’).onclick = function() {

36         $(‘editor’).contentEditable = true;

37         $(‘toolbar’).style.visibility = ‘visible’;

38         $(‘edit’).style.display = ‘none’;

39         $(‘editor’).className = ‘editable’;

40         $(‘submit’).style.display = ‘block’;

41     }

42 };

 

注:document.execCommand指令中,参数一为属性名,第二个参数为true(显示对话框)或false(不显示对话框),最后一个参数是针对第一个参数的值。

 

  

简易文本编辑器 写在前面:
本文本编辑器具备功能:选择字体大小、颜色、加粗、斜体、下划线。点击
Submit 后生成预览,再点击…

在线演示:
不足之处还请谅解,提出指正方法

 代码如下

<span style=”font-size:14px;”><!DOCTYPE html PUBLIC
“-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”content-type”
content=”text/html;charset=utf-8″>
<title>富文本编辑器</title>
</head>
<body>
<fieldset>
<legend>编辑区</legend>
<div>
<form>
字体颜色:
<select onchange=”setFontColor(this)”>
<option value=”black”>Black </option>
<option value=”red”>Red </option>
<option value=”green”>Green </option>
<option value=”blue”>Blue </option>
</select>
字体样式:
<select onchange=”setFontStyle(this)”>
<option value=”bold”>Bold </option>
<option value=”italic”>Italic </option>
<option value=”underline”>Underline </option>
<option value=”striketthrough”>StriketThrough </option>
</select>
字体名称:
<select onchange=”setFontFamily(this)”>
<option value=”serif”>Serif </option>
<option value=”sans-serif”>Sans-serif </option>
<option value=”monospace”>Monospace </option>
<option value=”comic sans ms”>Comic Sans </option>
</select>
</form>
</div>
<br/>
<div id=”editableText” contenteditable=”true”
style=”width:400px;min-height:100px;border:2px dashed
#ccc”></div>
</fieldset>
<script type=”text/javascript”>
function setFontColor(obj)
{
document.execCommand(“forecolor”,false,obj.value);
}
function setFontStyle(obj)
{
document.execCommand(obj.value,false,null);
}
function setFontFamily(obj)
{
document.execCommand(“fontname”,false,obj.value);
}
</script>
</body>
</html></span>

复制代码 代码如下:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website