所以我制作了這個(gè)網(wǎng)頁(yè)，其中它是一個(gè)偽 RTF 編輯器，可以將數(shù)據(jù)插入數(shù)據(jù)庫(kù)。將 html 插入到 php 中的 div在從下拉列表中選擇文本樣式后鍵入文本的文本樣式時(shí)，我遇到了問題。我希望它像 word 一樣，在單擊特定文本樣式后，它會(huì)開始使用該文本樣式進(jìn)行鍵入，但不會(huì)影響 div 內(nèi)的其余文本。 代碼筆 <style> #fake_textarea { width: 100%; height: 200px; border: 1px solid red;}<!-- Add css to modify the text -->#jBold { font-weigth: bold;}#jItalic{ font-style:italic;}#jUnderline{ text-decoration: underline;}#jLT{ text-decoration: line-through;} </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script><body> <!-- Put buttons here to modify the format --> <div> <select id="select_font" onchange="changeFont(this);"> <option value="Arial">Arial</option> <option value="Sans Serif" selected>Sans Serif</option> <option value="Comic Sans MS">Comic Sans MS</option> <option value="Times New Roman">Times New Roman</option> <option value="Courier New">Courier New</option> <option value="Verdana">Verdana</option> <option value="Trebuchet MS">Trebuchet MS</option> <option value="Arial Black">Arial Black</option> <option value="Impact">Impact</option> <option value="Bookman">Bookman</option> <option value="Garamond">Garamond</option> <option value="Palatino">Palatino</option> <option value="Georgia">Georgia</option></select><select id="select-size" onchange="changeSize(this);"><option value="4">4</option> <option value="8">8</option> <option value="12">12</option> <option value="16">16</option> <option value="20">20</option> <option value="24">24</option> <option value="28">28</option> <option value="32">32</option> <option value="36">36</option> <option value="40">40</option> <option value="44">44</option> <option value="48">48</option> <option value="52">52</option> <option value="56">56</option> <option value="58">58</option></select>
2 回答
12345678_0001
TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超5個(gè)贊
所以我已經(jīng)解決了即時(shí)更改字體樣式的問題，但是當(dāng)涉及到大于 36 的任何內(nèi)容時(shí)，我仍在嘗試解決該問題。
我加了
document.execCommand("fontName", false, font);在我的更改字體腳本的末尾
function changeFont(font) {
var sel = window.getSelection(); // Gets selection
if (sel.rangeCount) {
// Creates a new element, and insert the selected text with the chosen font inside
var e = document.createElement('span');
e.style = 'font-family:' + font.value + ';';
e.innerHTML = sel.toString();
// https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt
var range = sel.getRangeAt(0);
range.deleteContents(); // Deletes selected text…
range.insertNode(e); // … and inserts the new element at its place
}
document.execCommand("fontName", false, font);
}
至于更改字體大小，我插入了
if(size=="8")
{
document.execCommand("fontSize", false, "1");
}
if(size=="10")
{
document.execCommand("fontSize", false, "2");
}
if(size=="12")
{
document.execCommand("fontSize", false, "3");
}
if(size=="14")
{
document.execCommand("fontSize", false, "4");
}
if(size=="18")
{
document.execCommand("fontSize", false, "5");
}
if(size=="24")
{
document.execCommand("fontSize", false, "6");
}
if(size=="36")
{
document.execCommand("fontSize", false, "7");
}
在它的最后使我的更改字體大小腳本
function changeSize(size) {
var sel = window.getSelection(); // Gets selection
if (sel.rangeCount) {
// Creates a new element, and insert the selected text with the chosen font inside
var e = document.createElement('span');
e.style = 'font-size:' + size.value + 'px;';
e.innerHTML = sel.toString();
// https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt
var range = sel.getRangeAt(0);
range.deleteContents(); // Deletes selected text…
range.insertNode(e); // … and inserts the new element at its place
}
if(size=="8")
{
document.execCommand("fontSize", false, "1");
}
if(size=="10")
{
document.execCommand("fontSize", false, "2");
}
if(size=="12")
{
document.execCommand("fontSize", false, "3");
}
if(size=="14")
{
document.execCommand("fontSize", false, "4");
}
if(size=="18")
{
document.execCommand("fontSize", false, "5");
}
if(size=="24")
{
document.execCommand("fontSize", false, "6");
}
if(size=="36")
{
document.execCommand("fontSize", false, "7");
}
}
我希望找到一種增加字體大小的方法，或者除了document.execCommand("fontSize", false, "7");在末尾添加之外的其他方法。
富國(guó)滬深
TA貢獻(xiàn)1790條經(jīng)驗(yàn) 獲得超9個(gè)贊
這是必須要做的事情的總體思路，以便您可以內(nèi)聯(lián)不同的樣式。
div您需要將所有位于另一個(gè)元素內(nèi)的文本包裝起來(lái)contenteditable，我選擇了span. 然后span需要將您控制的所有樣式應(yīng)用到它。然后，您需要監(jiān)聽將文本輸入到可編輯的 div 中的所有方法。每當(dāng)輸入文本時(shí)，您都需要檢查當(dāng)前應(yīng)用的樣式過濾器是否與前一個(gè)文本元素相匹配。您可以使用window.getSelection().anchorNode.parentNode獲取前一個(gè)元素的父元素。如果匹配，您只需將新文本附加到前一個(gè)元素即可。如果不匹配，則創(chuàng)建一個(gè)具有適當(dāng)樣式的新元素。
這是一個(gè)示例鏈接，其中font-size, font-family, 和color可以被控制。 https://jsfiddle.net/nrayburn/50uhdwfg/100/
該示例存在一些問題，但我想讓您從某個(gè)地方開始。鍵入時(shí)插入符號(hào)不會(huì)隨文本移動(dòng)。這是因?yàn)?code>event.preventDefault()它被調(diào)用了，所以它不會(huì)通過正常的過程來(lái)移動(dòng)它。另一個(gè)問題是新元素沒有插入到正確的位置，您只需要找出插入到正確位置的最佳方式即可。它也不處理在前一個(gè)元素末尾以外的任何地方插入文本。編輯文本需要檢查樣式是否更改。如果是這樣，則需要將兩側(cè)的文本拆分為具有舊格式的新跨度，并在中間使用當(dāng)前格式創(chuàng)建一個(gè)新跨度。
- 2 回答
- 0 關(guān)注
- 134 瀏覽
添加回答
舉報(bào)
0/150
提交
取消