在wangEditor中處理樣式,可以通過以下步驟實現:
config.toolbars
屬性來自定義工具欄,包括需要的樣式按鈕。例如:const E = window.wangEditor;
const editor = new E('#editor');
editor.config.toolbars = [
['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript'],
['forecolor', 'backcolor'],
['fontfamily', 'fontsize'],
['justifyleft', 'justifycenter', 'justifyright', 'justifyjustify'],
['insertorderedlist', 'insertunorderedlist'],
['link', 'unlink'],
['image', 'video'],
['eraser', 'undo', 'redo'],
];
editor.create();
.wang-editor-bold {
font-weight: bold;
}
.wang-editor-italic {
font-style: italic;
}
.wang-editor-underline {
text-decoration: underline;
}
.wang-editor-strikethrough {
text-decoration: line-through;
}
.wang-editor-superscript {
font-size: 0.8em;
position: relative;
vertical-align: baseline;
top: -0.5em;
}
.wang-editor-subscript {
font-size: 0.8em;
position: relative;
vertical-align: baseline;
bottom: -0.5em;
}
.wang-editor-forecolor {
color: #FF0000;
}
.wang-editor-backcolor {
background-color: #FFFF00;
}
.wang-editor-fontfamily {
font-family: "Arial", sans-serif;
}
.wang-editor-fontsize {
font-size: 16px;
}
.wang-editor-justifyleft {
text-align: left;
}
.wang-editor-justifycenter {
text-align: center;
}
.wang-editor-justifyright {
text-align: right;
}
.wang-editor-justifyjustify {
text-align: justify;
}
通過這種方式,可以在wangEditor中處理和自定義文本樣式。