后台文章添加文字转拼音

首先看一下效果图：

主要使用了pinyin-pro.js，引入最新版本

<script src="var {pinyin} = pinyinPro;
pinyin('汉语拼音'); // 'hàn yǔ pīn yīn'

汉字转拼音就是是这些了，下面的如果不需要汉字拼音一对一可以直接忽略

对于汉字拼音一对一样式并且可以主要使用了

contenteditable

contenteditable 属性指定元素内容是否可编辑。

注意： 当元素中没有设置 contenteditable 属性时，元素将从父元素继承。

具体代码如下

.pinyin_box {
    border: 1px solid #ddd;
    width: 375px;
    height: 667px;
    display: flex;
    flex-direction: column;
    padding: 15px;
    overflow-y: auto;
}
.fen_box {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}
.pinyin_box p {
    display: flex;
    flex-direction: column;
    padding: 0.2rem 0.5rem;
    margin: 0;
}

.pinyin_box p span {
    padding: 0 0 0 0;
}

<div style="margin:300px 2rem ">
    <button type="button" class="btn btn-primary h-to-p" style="margin-right: 2rem;">汉字转拼音</button>
</div>
<div class="pinyin_box" contenteditable="true" id="pinyin_box">
    <p>
        <span class="yin">dì</span> 
        <span contenteditable="false">帝</span>
    </p>
</div>
<p class="text_content hide_text_content"><span class="yin"></span> <span contenteditable="false"></span></p>
<div class="hide_fen_box"></div>

以上代码中p标签由js转换汉字拼音之后forEach生成的

var all_content_arr = content_info.content.split(/(?:\r\n|\n)/)
var pinyin_content_all_arr = serverData.pinyin.split("#");
all_content_arr.forEach(function (value, index) {
    $('.pinyin_box').append($(".hide_fen_box").clone(true).addClass("fen_box").removeClass("hide_fen_box"))
    var content_arr = value.split("");
    var pinyin_content_arr = pinyin_content_all_arr[index].split(",");
    pinyin_content_arr.forEach(function (v, i) {
        var html_str = $(".text_content").clone(true).removeClass()
        html_str.find(".yin").text(v)
        html_str.find("span").last().text(content_arr[i])
        $(".fen_box").last().append(html_str);
    })
    // $(".pinyin_box").append(fen);
})

关于粘贴复制目前解决办法为

在用户粘贴的时候禁止默认粘贴，然后获取剪切板内容将内容提取出来，在p标签之后重新生成

document.getElementById("pinyin_box").onpaste = function (event) {
    event.preventDefault()
    //获取剪切板内容 event.clipboardData剪切板
    var str = event.clipboardData.getData("text/html").match(/<!--StartFragment-->([^!]*)<!--EndFragment-->/)[1]
    //创建一个html节点  其他方法document.createElement("div")
    var para = document.createRange().createContextualFragment(str);
    //在选中位置追加p标签    window.getSelection() 表示用户选择的文本范围或光标的当前位置。
    window.getSelection().focusNode.parentNode.parentNode.after(para)
};

本文为原创文章,转载无需和我联系,但请注明来自天清微扬http://sslbom.com