wants to use document.execCommand () to implement a simple rich text editor. But bold","insertOrderedList","insertUnorderedList" doesn"t work.
the code is as follows:
<div class="richedit">
<div class="edit-controller">
<button v-for="command in execCommands" @click="execCommand(command)" class="command-button">
<svg class="icon" aria-hidden="true" >
<use :xlink:href="command.icon"></use>
</svg>
</button>
</div>
<div ref="editable" class="editable" contenteditable="true" @keyup.ctrl.enter="postComment"></div>
</div>
the data used is as follows:
execCommands: [{
icon: "-sharpicon-blod",
command: "bold"
},
{
icon: "-sharpicon-i",
command: "italic"
},
{
icon: "-sharpicon-xiahuaxian",
command: "underline"
},
{
icon: "-sharpicon-lianjie",
command: "createlink"
},
{
icon: "-sharpicon-wuxuliebiao",
command: "insertUnorderedList"
},
{
icon: "-sharpicon-icxiangmufuhaodaishuzi24px",
command: "insertOrderedList"
},
{
icon: "-sharpicon-yinyong",
command: "formatblock"
},
{
icon: "-sharpicon-chexiao",
command: "undo"
},
{
icon: "-sharpicon-zhongzuo",
command: "redo"
}]execCommand method is as follows:
execCommand (command) {
const cmd = command.command
switch (cmd) {
case "createlink":
const linkURL = prompt(":", "https://")
const sText = document.getSelection()
// "<a href="" + linkURL + "" target="_blank">" + sText + "</a>"
document.execCommand("insertHTML", false, `<a href="${linkURL}" target="_blank">${sText}</a>`)
break
case "formatblock":
document.execCommand(cmd, false, "<blockquote>")
break
default:
document.execCommand(cmd, false, null)
}
}the effect is as follows:
bold fonts, ordered lists, and unordered lists have no effect.