时间戳

首页 > 解决方案 > 如何使用 jquery 编辑和预览歌曲和弦

javascript - 如何使用 jquery 编辑和预览歌曲和弦

问题描述

我有一个编辑和预览歌曲和弦的要求。就像在这个例子中一样https://songbase.life/admin/example。实际上这是内置的反应 js，但我想在 jquery 或 javascript 中实现相同

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
     <div id="InputTEXT">
        <textarea id="editText" class="form-control" rows="5"></textarea>
     </div>
     <div id="preview">
       //Preview here 
     </div>
</body>
</html>

一旦您打开左侧的链接，用户正在输入并且预览在右侧...

$(document).ready(function(){
    $('#editText').keyup(function(){
       $('#editText).val();
       $('#preview').html($('#editText).val());
   })
})

我想像上面例子中提到的那样设置和弦。注意：-我希望在上面的示例链接中以相同的方式在预览中格式化歌曲文本

标签： javascriptjquery

解决方案

正如@Swati 提到的那样，将文本从源复制到目标相当简单，但格式化它会更加困难。看起来提供的示例使用 Markdown 进行基线格式化，并对其进行扩展以用于音乐。

从头开始编写将文本从纯文本转换为 Markdown 的工具有点矫枉过正，所以我建议使用Marked之类的工具来帮助您入门。从那里，您应该能够像在示例中使用marked.use()功能一样扩展该工具以用于音乐。

构建整个这个功能需要付出很大的努力，但为了让你开始，我在下面添加了一个如何使用 Marked 的示例。

$(document).ready(function(){
    $source.keyup(transformText)
})

const $source = $('#editText')
const $dest = $('#preview')

function transformText() {
  const markdown = marked($source.val());
  $dest.html(markdown)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
     <div id="InputTEXT">
        <textarea id="editText" class="form-control" rows="5"></textarea>
     </div>
     <div id="preview">
       //Preview here 
     </div>
</body>
</html>

编辑

我今晚没有更好的事情发生，所以这里有一个如何手动替换和弦的示例。这不包括节、行或链接，但这是我能做的最好的让你开始解决问题的方法。

基本流程如下：

  • 等待文本字段改变，然后触发转换
  • 使用 Marked 处理基本的 Markdown 功能
  • 查找格式为 [chord]word 的和弦单词组合
  • 填写模板并将[chord]word的每个实例替换为模板
  • 将输出设置为我们的新降价

CSS 直接来自示例网站，需要一些关于数据属性和伪元素的知识。

$(document).ready(function(){
    $source.keyup(transformText)
    transformText()
})

const $source = $('#editText')
const $dest = $('#preview')

function transformText() {
  let markdown = marked($source.val());
  markdown = replaceChordWords(markdown)
  
  $dest.html(markdown)
}

function replaceChordWords (input) {
  let markdown = input
  
  const chordWordRegex = /\[(.*?)\]\w+/g
  markdown = markdown.replaceAll(chordWordRegex, (input) => {
    const chordRegex = /\[(.*?)\]/
    const inputSplit = input.split(chordRegex).filter(x => x !== '')
    
    return `<span class="chord-word">
              <span class="chord" data-uncopyable-text="${inputSplit[0]}"></span>
              ${inputSplit[1]}
            </span>`
  })
  
  return markdown
}
.chord-word {
  display: inline-block;
  padding-top: 17px;
  height: 17px;
  position: relative;
}

.chord {
  color: #1f45ff;
  white-space: pre;
  position: absolute;
  bottom: 17px;
  font-weight: normal;
  font-style: normal;
  white-space: wrap;
}

[data-uncopyable-text]::after {
  content: attr(data-uncopyable-text);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
     <div id="InputTEXT">
        <textarea id="editText" class="form-control" rows="5">
You can enter [C]chords in [Am]the ex[F]act place you want them [G]with squ[E7]are b[C]rackets like this.
        </textarea>
     </div>
     <div id="preview">
       //Preview here 
     </div>
</body>
</html>

推荐阅读