首页 > Web开发 > 详细

如何创建一个基于jquery的编辑器

时间:2014-04-10 21:55:48      阅读:510      评论:0      收藏:0      [点我收藏+]

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

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

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

 

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

Q1.编辑区域使用textarea么?

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

contenteditable="true"

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

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

 查到了这样的代码:

bubuko.com,布布扣
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;
}
bubuko.com,布布扣

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

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

  给可编辑区域设置css style

cursor:text;

  发现可行。

如何创建一个基于jquery的编辑器,布布扣,bubuko.com

如何创建一个基于jquery的编辑器

原文:http://www.cnblogs.com/bluen/p/3656300.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!