zoukankan      html  css  js  c++  java

  • JavaScript 实现文本编辑器

     JavaScript 实现文本编辑器

    最近，我需要做一个非常基本的网页内容编辑功能。我不想使用 iframe ，我也不想要一个功能特别多的复杂编辑器，只需要很基本的内容编辑功能，例如粗体，斜体，列表，对齐等等。

    您可能感兴趣的相关文章

    　　用谷歌搜索找了很久，发现所有的插件都是功能太复杂，不是我想要的。所以，我决定我自己来实现需要的编辑功能。刚开始我觉得应该要花费很多的时间，因为我想象内容编辑功能应该是很复杂的。

    　　但事实证明，它是如此简单，让我十分惊讶！借助 HTML5 特性，所有的工具都已经可用，所有你需要做的只是配合他们编写一些非常简单的 JavaScript 代码调用就可以了。

    　　你需要两样东西，第一是：

    ?
    1
    contenteditable

    　　contenteditable 是 HTML 中的一个属性，设置 HTML标签的 contenteditable=“true” 时，即可开启该元素的编辑模式。contenteditable 的作用相当神奇，可以让 div 或整个网页，以及 span 等等元素设置为可编辑。

    　　我们最常用的输入文本内容是 input 与 textarea，使用 contenteditable 属性后，可以在div、table、p、span、body等等很多元素中输入内容。如果想要整个网页可编辑，可以在 body 标签内设置 contenteditable。contenteditable 已在 HTML5 标准中得到有效的支持.

     　　第二样东西是一个功能特殊的函数：

    ?
    1
    execCommand

    　　execCommand 让我们能够对 contenteditable 区域的内容做一些相当复杂的操作。如果你想了解更为详细的内容可以看这里：The Mozilla Docs。 

    　　从本质上讲， execCommand 有三个参数：

    　　Command Name – 命令名称；
    　　ShowDefaultUI – 未实现，所以最好设置为 false；
    　　ValueArgument – 命令的参数；

    　　多数情况下，ValueArgument 可以设置为 null，但有一种情况：当你要设置一行文本的标签的时候（h1，h2，p 等），你需要使用 formatBlock 命令，并把标签放到 ValueArgument 中。

    　　现在，事情就很简单了，我们把 exexCommand 要执行的命令放到 data-role 属性中，然后编写简单的 JavaScript 都可以很容易地完成编辑器功能了。核心代码其实就10行：

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    $(function() {
        $('#editControls a').click(function(e) {
            switch($(this).data('role')) {
                case 'h1':
                case 'h2':
                case 'p':
                    document.execCommand('formatBlock', false, '<' + $(this).data('role') + '>');
                    break;
                default:
                    document.execCommand($(this).data('role'), false, null);
                    break;
            }
        })
    });

    　　完整代码如下：

    　　

    源码下载      在线演示
  • 相关阅读:
    你还在把Java当成Android官方开发语言吗？Kotlin了解一下！
    如何站在大数据的角度看100000个故事
    AI从入门到放弃：CNN的导火索，用MLP做图像分类识别？
    Hadoop Yarn REST API未授权漏洞利用挖矿分析
    c# 修饰词public, protected, private,internal,protected的区别
    缩放到被选择的部分： ICommand Cmd = new ControlsZoomToSelectedCommandClass();
    警告 7 隐藏了继承的成员。如果是有意隐藏，请使用关键字 new
    arcgis10.5.1 对齐要素
    arcgis10.1安装出现1606错误怎么办？找不到盘符
    arcmap搜索脚本错误
  • 原文地址：https://www.cnblogs.com/Leo_wl/p/3253443.html
Copyright © 2011-2022 走看看