שינוי גודל כתב שמסומן ע"י העכבר JS

הפצת אנקי

אני מעוניין לשנות גודל של טקסט נבחר באמצעות פונקציית JS.
כרגע "שתילה" של תגית בתחילת וסוף הטקסט באמצעות הפונקציה הזו:

<script>

function remove_breaks(styles) {
    var sel = window.getSelection();
    var r = sel.getRangeAt(0);
    var content = r.cloneContents();
    var temp_rb_tag = document.createElement("span");
    temp_rb_tag.appendChild(content);
    temp_rb_tag.innerText = '<span style="font-size: 26pt;">' + styles + temp_rb_tag.innerText + '</span>';
    document.execCommand('insertHTML', false, temp_rb_tag.innerText);
    saveField('key');
}
</script>

גורמת לכך שכל שאר מאפייני הטקסט כגון צבע, רקע וכדו' נעלמים.
לכן השגתי את מאפייני הכתב באמצעות הקוד:

var b  = window.getSelection().anchorNode.parentElement.getAttribute('style');

ושתלתי אותו בנוסף. הבעיה היא:
א. כרגע אם אין מאפיין לטקסט, הפונקציה לא פועלת.
ב. כרגע הפקודה השניה רק מגלה את עיצוב הטקסט אבל לא תוויות או מאפיינים אחרים. במידה והטקסט מסומן למשל ב <b> הפונקציה לא עובדת.
צריך שכל מאפיין של הטקסט יזוהה. ובנוסף, ליצור תנאי שאם אין מאפיינים לטקסט הקוד יעבוד גם כן כרגיל.
באופן כללי יש לי תחושה שמן הסתם יש פקודה פשוטה יותר לביצוע של הפעולה. אשמח לעזרה.

גמליאל

@הפצת-אנקי אמר בשינוי גודל כתב שמסומן ע"י העכבר JS:

גורמת לכך שכל שאר מאפייני הטקסט כגון צבע, רקע וכדו' נעלמים.

אתה יכול להעביר את הכל לשורה אחת:

contect = window.getSelection().getRangeAt(0).startContainer.parentNode

מקור

הפצת אנקי

@גמליאל תודה.
אשמח לקוד מלא אם אפשר מכיון שהידע שלי בJS הוא נמוך עד אפסי...
תודה מראש!
כרגע הפונקציה המלאה היא:

<script>
function remove_breaks(val) {
    var sel = window.getSelection();
    var stl = sel.anchorNode.parentElement.getAttribute('style');
    console.log(stl);
    var r = sel.getRangeAt(0);
    var content = r.extractContents();
    var temp_rb_tag = document.createElement("span");
    temp_rb_tag.appendChild(content);
    
    temp_rb_tag.innerText = '<span style="' + stl + 'font-size: ' + val + 'pt;">' + temp_rb_tag.innerText + '</span>';
    
    document.execCommand('insertHTML', false, temp_rb_tag.innerText);
    saveField('key');
}
</script>

גמליאל

@הפצת-אנקי אמר בשינוי גודל כתב שמסומן ע"י העכבר JS:

אשמח לקוד מלא

כנראה יש דרכים פשוטות יותר:

   function changeSize() {
        let contect = window.getSelection().getRangeAt(0).startContainer.parentNode;
        let newElement = document.createElement("span");
        newElement.append(contect);
        newElement.style.fontSize = "large";
        document.body.append(newElement)
    }

דוגמא: https://output.jsbin.com/cevogipene/

הפצת אנקי

פוסט זה נמחק!

הפצת אנקי

מצאתי את זה:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span style="color:red; font-size: 28pt;">asdfsadfsad<br>fsadfsdaf</span>
<button id="go_span">go_span</button>

<script>
$(document).on('click', '#go_span', function(e) {
  var sel, range;
  var fontSize =16;
  if (window.getSelection) {
    range = window.getSelection().getRangeAt(0);
    var content = range.extractContents();
    var span = document.createElement('SPAN');
    span.setAttribute("style", " font-size: " + fontSize + "pt !important;");
    span.appendChild(content);                  
    var htmlContent = span.innerHTML;
    htmlContent = htmlContent.replace(/<\/?span[^>]*>/g, "");                  
    htmlContent = htmlContent.replace(/font-size:[^;]+/g, '');
    htmlContent = htmlContent.replace(/<font/g, "<span").replace(/<\/font>/g, "</span>");     
          
    if (span.innerHTML.toString() == "")
        htmlContent = htmlContent + " ";

        var cursorPosition = htmlContent.length;
        span.innerHTML = htmlContent;
        span.setAttribute("style", " font-size: " + fontSize + "pt !important;");

       range.insertNode(span);                  

       sel = window.getSelection();
       range = sel.getRangeAt(0);
       range.collapse(true);
       var lastChildElement = span.childNodes.length - 1;
       if (cursorPosition == 1) {
               range.setStart(span.childNodes[0], 1);
         }
         else {
               range.setEndAfter(span);
         }
         sel.removeAllRanges();
         sel.addRange(range);
    } 
  
});
</script>

איך אני מפעיל את הפונקציה באמצעות קריאה מהקונסול?

צדיק תמים

@הפצת-אנקי אמר בשינוי גודל כתב שמסומן ע"י העכבר JS:

איך אני מפעיל את הפונקציה באמצעות קריאה מהקונסול?

או מעתיק את הקוד עצמו (שורות 7-41) לקונסול
או שם את הפונקציה כפונקציה עם שם, ואז קורא לה מתוך המאזין
כלומר

function changeFontSize () {
// הקוד עצמו (שורות 7-41)
}

$('#go_span').on('click', changeFontSize)

ואז אם אתה רוצה להפעיל את זה ידנית אתה פשוט קורא לפונקציה changeFontSize -
changeFontSize()

הפצת אנקי

לא הצלחתי.
אני מעלה לכאן את התוסף המלא שמוסיף תפריט הגדלת טקסט לעורך הכרטיסים של אנקי

לעת עתה, כל שבעת האפשרויות שבתפריט גודל כתב שולחות קריאה לפונקציית JS כפי שאסביר תכף.
נכון לעכשיו הצלחתי להגדיל ולהקטין את הכתב באמצעות הפונקציה

setFormat("fontSize", "7");

שהיא פונקציה תוצרת אנקי שבעצם שולחת קריאה ל

'document.execCommand

עם הפרמטרים ששולחים לה. לא ברור לי למה למפתח התוכנה לא היה טוב להשתמש בפונקציה המקורית.
הבעיה בשיטה הזאת היא שיש מגבלה של גודל טקסט בין 1 ל7 ולא יותר. כמו כן הארגומנט fontName שאמור לשנות את הפונט לא עושה את עבודתו משום מה (בכרום נורמלי זה כן עבד)
מצורף גם קובץ הJS שמכיל את הפונקציה המובנית הנ"ל. (הוצא באמצעות כלי הפיתוח של אנקי- מקבילים לכלי פיתוח בדפדפן כרום.)
אם זה משנה למשהו- תצוגת הweb של התוכנה מבוססת על chrome 77.
מבחינת ידע בJS- הפונקציה שעליה עבדתי נמצאת בקובץ remove_linebreaks שנמצא בתיקיית התוספים של אנקי. משורה 128 עד שורה 148.
ניתן להגיע לתיקיית התוספים באמצעות הנתיב הבא:

C:\Users\%USERNAME%\AppData\Roaming\Anki2\addons21\

הקריאה לפונקציה נמצאת בשורה 159.
שאר הקובץ כתוב בפייתון.
תוסף הגדלת גופן.exe
ספריית JS של עורך אנקי.js
אני מצרף גם את מה שכבר הספקתי לחלץ מהספריה
של אנקי הנ"ל להבנת הענין

// מחזיר שדה נוכחי
function Un(){return document.activeElement instanceof ri?document.activeElement:null}

var ri=class extends HTMLDivElement{constructor(){super();this.attachShadow({mode:"open"}),this.className="field",document.documentElement.classList.contains("night-mode")&&this.classList.add("night-mode");

//שינוי ועריכת כתב
function ua(r,t,o=!1){document.execCommand('fontSize',false,'3'),o||(fo(Un(),"key"),$r(new Event(r)))}
//////////////////////??????????
function fo(r,t){ac(),lr(`${t}:${r.ord}:${$s()}:${r.fieldHTML}`)}

function ac(){Ts&&(clearTimeout(Ts),Ts=null)}

Ts=setTimeout(()=>fo(r,"key"),600)

function lr(r,t){window.bridgeCommand(r,t)}

ניתן להוריד את אנקי וכלי הפיתוח מהנושא הזה.
תודה רבה!

תחומים - פורום חרדי מקצועי

שינוי גודל כתב שמסומן ע"י העכבר JS