zoukankan      html  css  js  c++  java
  • 如何创建一个基于jquery的编辑器

    帮朋友做项目,其中涉及到编辑器问题。出于各种原因,最终决定自己编写编辑器。

    我的想法是,首先要基于jquery,其中有插入文字 ,图片的基本功能。根据需求。文字要求可以改变几种样式和位置。 图片要可以设置缩放和位置。

    再具体的需求我就不再这里写了。总体来看:我们要做的编辑器功能订制性强,功能单一。

    那么从哪里开始下手呢,我并没有任何头绪。于是决定首先逐步解决我想到要使用到,但我还不会的问题。

    Q1.编辑区域使用textarea么?

        并不了解textarea是否可以支持插入图片,于是简单查了下,发现html有这样一个属性:

    contenteditable="true"

    这样一来,我就可以再任何html元素中编辑了么?目前来看,是的。

    Q2.如何获得选中文字呢?

     查到了这样的代码:

    function getSelectedText() {    //this function code is borrowed from: http://www.codetoad.com/javascript_get_selected_text.asp
    
        var txt = "";
        if (window.getSelection) {
            txt = window.getSelection();
        } else if (window.document.getSelection) {
            txt = window.document.getSelection();
        } else if (window.document.selection) {
            txt = window.document.selection.createRange().text;
        }
        return txt;
    }

    这个函数会返回被选中的文字内容,测试成功。

    Q3:针对与Q1的可编辑,发现没有光标

      给可编辑区域设置css style

    cursor:text;

      发现可行。

    Q4:无意间发现console.log();方法, 调试的时候相比alert 它可以更好的打印出对象信息,于是借此研究了selection对象。

      

    console.log(window.getSelection());

    结果如下:

  • 相关阅读:
    微信小程序中的WXS语法
    小程序 没有找到可以构建的 NPM 包,请确认需要参与构建的 npm 都在 `miniprogramRoot` 目录内
    Linux 远程连接sftp与ftp
    MySQL使用方法
    Rsync+Inotify实时同步环境部署
    inotify+rsync实时同步
    rsync备份
    C# 基于ef的2种简单的仓储封装和工作单元 net core3.1 ---sqlserver 2019
    xshell个人免费版下载使用
    Git 命令之 git add、git commit
  • 原文地址:https://www.cnblogs.com/bluen/p/3656300.html
Copyright © 2011-2022 走看看