在可編輯div中插入文字或圖片（二）

阿新 • • 發佈：2019-01-20

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>游標控制器</title>  
<script type="text/javascript">
function cursorControl(a){
    this.element=a;
    this.range=!1;
    this.start=0;
    this.init();
};
cursorControl.prototype={
    init:function(){
        var _that=this;
        this.element.onkeyup=this.element.onmouseup=function(){
            this.focus();
            if(document.all){
                _that.range=document.selection.createRange();
            }else{
                _that.start=_that.getStart();
            }
        }
    },
    getType:function(){
        return Object.prototype.toString.call(this.element).match(/^\[object\s(.*)\]$/)[1];
    },
    getStart:function(){
        if (this.element.selectionStart || this.element.selectionStart == '0'){  
            return this.element.selectionStart; 
        }
		
//		else if (window.getSelection){  
//            var rng = window.getSelection().getRangeAt(0).cloneRange();  
//            rng.setStart(this.element,0);  
//           return rng.toString().length;
//        }
    },
    insertText:function(text){
        this.element.focus();  
        if(document.all){
            document.selection.empty();  
            this.range.text = text;  
            this.range.collapse();  
            this.range.select();
        }  
        else{
            if(this.getType()=='HTMLDivElement'){
                //this.element.innerHTML=this.element.innerHTML.substr(0,this.start)+text+this.element.innerHTML.substr(this.start);
				// Begain of The Content added by bedweather 
				var sel = window.getSelection();
				var rang = sel.rangeCount > 0 ? sel.getRangeAt(0) : null;
				if (rang == undefined 
					|| rang == null
					|| (rang.commonAncestorContainer.id !="editdiv"
						&& rang.commonAncestorContainer.parentNode.id !="editdiv")){
					this.element.focus();
					rang = document.createRange();
					rang = selectNode(this.element);
					rang.setStart(range.getEndContainer, rang.endOffset);
				}
				rang.deleteContents();
				rang.insertNode(rang.createContextualFragment(text));
				var tempRange = document.createRange();
				var a = document.getElementById("editdiv")
				tempRange.selectNodeContents(a);
				if(rang.commonAncestorContainer.id == "editdiv"){
					tempRange.setStart(rang.endContainer, rang.endOffset+1);
					tempRange.setEnd(rang.endContainer, rang.endOffset+1);
				} else {
					tempRange.setStartAfter(rang.endContainer.nextSibling);
					tempRange.setEndAfter(rang.endContainer.nextSibling);
				}
				sel.removeAllRanges();
				sel.addRange(tempRange);
				this.element.focus();
				// End of The Content added by bedweather 

            }else{
                this.element.value=this.element.value.substr(0,this.start)+text+this.element.value.substr(this.start);
            };
        } 
    },
    getText:function(){
        if (document.all){  
            var r = document.selection.createRange();  
            document.selection.empty();  
            return r.text;  
        }  
        else{  
            if (this.element.selectionStart || this.element.selectionStart == '0'){
                var text=this.getType()=='HTMLDivElement'?this.element.innerHTML:this.element.value;
                return text.substring(this.element.selectionStart,this.element.selectionEnd); 
            } 
            else if (window.getSelection){  
                return window.getSelection().toString()
            };  
        }  
    }
};
var c1,c2;
window.onload=function(){
    c1=new cursorControl(document.getElementById('text'));
    c2=new cursorControl(document.getElementById('editdiv'));
};
function fn1(str){
    c1.insertText(str);
};
function fn2(str){
    c2.insertText(str);
};
function fn3(){
    alert(c1.getText());
};
function fn4(){
    alert(c2.getText());
}     
</script>  
</head>  
<body>  
    <input type = "button" value = "插入字串 {文字1}" onclick="fn1('{文字1}');"/><input type = "button" value = "獲取選中的文字" onclick="fn3();"/><br />  <br />
    <textarea id="text" cols="50" rows="5">這裡是文字框</textarea><br /><br />  
    <input type = "button" value = "插入字串 {文字2}" onclick="fn2('{文字2}');"/> <input type = "button" value = "獲取選中的文字" onclick="fn4();"/><br />  <br /> 
	<input type = "button" value = "插入圖片" onclick="fn2('<img src=\'76a196bdgw1e1d9emb7iyj.jpg\'/>');"/> <input type = "button" value = "獲取選中的文字" onclick="fn4();"/><br />  <br />
    <div id="editdiv" contentEditable="true">這裡是一個可編輯層</div><br />     
</body>  
</html>

源地址https://bbs.csdn.net/topics/390259711

在可編輯div中插入文字或圖片（二）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

div中的文字和圖片水平居中的方法

css文字水平居中的案例1： .page{text-align: center;} <div class="page"><p>這是需要水平居中的文字</p></div>css文字水平居中的案例2： .page{displa

一段文字中插入一張圖片（lable，textview為例）

NSMutableAttributedString *str=[[NSMutableAttributedString alloc] initWithString:@"fdsahfjdsafkdhaf

基於svg.js可編輯影象中的文字換行

svg中的文字與一般頁面中的文字並不一樣，svg中的文字使用<text></text>標籤來包住文字，所以頁面中文字換行功能無法使用，這時候就要我們自己設定部分屬性來使其

vue富文字框（插入文字、圖片、視訊）的使用

今天在vue裡面插入富文字遇到了一些小坑在這裡提供給大家用於參考，如有錯誤，望多加指正。我這裡使用的是Element-ui的上傳圖片元件首先引入Element-ui(這個我就不作贅述了，詳情參考element中文官網) 在引入富文字元件vue-quill-edito

CSS+DIV網頁樣式與佈局——文字樣式&段落（二）

承接上篇文章，本文小編為您繼續書寫文欄位落的相關內容。主要內容如下：接下來只是簡單的幾句程式碼可以展示簡單的網頁效果。其實CSS程式碼本身就是用最簡單的語言來控制儘可能多的格

CSS3動畫實現高亮光弧效果,文字和圖片（一閃而過）

前言好久沒有寫部落格啦，高亮文字和圖片一閃而過的特效，用CSS3來寫先看文字吧，就上程式碼了 .shadow { /* 背景顏色線性漸變 */ /* 老式寫法 */ /* linear為線性漸變，也可以用下面的那種寫法。left top，right t

div 中如何加各種邊框（轉）

邊框風格屬性(border-style) 　　這個屬性用來設定上下左右邊框的風格，它的值如下：　　none (沒有邊框，無論邊框寬度設為多大)　　dotted (點線式邊框)　　dashed (破折線式邊框)　　sol

Qt實現伺服器與客戶端傳輸文字和圖片（Qt②）

初學者記錄學習內容，如有錯誤請各位前輩指點。此次工程完成過程借鑑了下面得兩個帖子，附上鍊接，並致以感謝： qt 寫的tcp客戶端程式實現簡單的連線接受和傳送訊息 qt寫的一個簡單的tcp伺服器程式，可以接受訊息傳送資料好了閒話少說進入正題。瞭解C

opencv訪問圖片中畫素的方法（二）——迭代器iterator

opencv訪問圖片畫素的第二種方法為：迭代法。在迭代法中，我們所需要的僅僅是獲得矩陣的begin和end，然後增加迭代直至從begin到end。將*操作符新增在迭代指標前，即可訪問當前指向的內容。相比於指標直接訪問可能出現越界問題，迭代器絕對是非常安全的方法。用關鍵字

Java web中常見編碼亂碼問題（二）

catalina 轉換 alt str 檢測內容 tom 拼搏 image 根據上篇記錄Java web中常見編碼亂碼問題（一），接著記錄亂碼案例：　　案例分析：　　2、輸出流寫入內容或者輸入流讀取內容時亂碼（內容中有中文）　　原因分析：　　　　a、如果是

libpng處理png圖片（二）

剪切圖片 run pen != bsp col pla lap malloc 一,實現效果:圖片剪切, 圖片拼接　　　　　　　　　　　　　　　　　　　　　　　　-------切割後-----> 　　　　　　　　　　　　

MySQL中的日誌類型（二）-General query log

sql 設置 set 線程id lob 進行 mysq 示例 mark 簡介 General query log記錄客戶端的連接和斷開，以及從客戶端發來的每一個SQL語句。日誌內容格式 General query log可以記錄在文件中，也可以記錄在表中，格式如下：在文件

Exchange 2013數據庫可移植性恢復用戶數據庫（二）

服務器 Exchange 案例講述：我目前環境中有一套Exchagne01和Exchange02服務器，全部是全角色安裝的exchange2013CU8的系統。這兩臺服務器同屬一個DAG組，由於特殊原因DAG的故障轉移群集出現問題，無法正常恢復，導致用戶郵箱不能訪問。目前發現Exchange01上的數

github中刪除已建倉庫（二）

gpo 自己 class 9.png git 點擊 github 復制 post 閱讀指南：（1）在登錄自己的github中，進入將刪除倉庫文件中：（2）進入倉庫的settings中，復制Repository name 中的名字(一會刪除要填寫) （3）點擊刪

UWP中實現大爆炸效果（二）

cti setter val sele osi enume rail += ddd 上一回實現了一個寬度不均勻的Panel，這次我們編寫一個簡單的BigbangView主體。首先創建一個模板化控件，刪掉Themes/Generic.xaml中的<Style Targ

4.ASP.NET全棧開發之在MVC中使用服務端驗證（二）

help alt 來講測試數據類型 throw 存在數據問題首先聲明，這篇博文是完善.ASP.NET全棧開發之在MVC中使用服務端驗證的，所以重復內容，我就不過多的闡述，很多問題都是在實踐中去發現，然後再去完善，這篇博文也一樣，建立在已閱 “.ASP.NET

圖片轉字符圖片（二）

ans lac todo ref ger public des error red 序言這個是從抖音上學來的，一開始刷抖音，遇到不少字符串跳舞的視頻，因此來實踐一下主要分為三個部分靜態圖片轉靜態圖片 gif 轉 gif 視頻轉視頻 gif 轉 gif 原

Python中的Flask基礎入門（二）

第一部分是過濾器這是我們的py檔案 #1.匯入Flask擴充套件. from flask import Flask#匯入我們的Flask框架 from flask import render_template#我們的返回值有兩種，如果要返回html，就需要匯入這個模組 #2.建立Fla

JDK中JCA的簡單使用（二）---RSA加簽驗籤

Signature 類 Signature類是一個引擎類，提供加密的數字簽名演算法，例如DSA或RSAwithMD5。加密安全簽名演算法採用任意大小的輸入和私鑰，並生成一個相對較短（通常是固定大小）的位元組串——簽名。只有私鑰/公鑰對的所有者才能建立簽名。對於擁有公鑰的任何人來說

在可編輯div中插入文字或圖片（二）

相關推薦