小插曲:最开始的方向是Html5的contenteditable=”true”的文档可编辑属性。只能修改文档文字内容,不能修改样式,如修改字体,字号,颜色等。于是用了第一款(quil)富文本插件。只能说一般,样式很拉胯。效果如下:表格样式全无。
果断放弃了。于是使用了wangEdit插件。官网地址wangEditorhttps://www.wangeditor.com/
支持大量的工具栏。以及表格。
更多详情见官网。
代码附上
@{
ViewBag.Title = "Index";
}
#editor—wrapper {
border: 1px solid #ccc;
z-index: 100; /* 按需定义 */
}
#toolbar-container {
border-bottom: 1px solid #ccc;
}
#editor-container {
height: 500px;
}
.w-e-toolbar {
服务器托管z-index: 2 !important;
}
.w-e-menu {
z-index: 2 !important;
}
.w-e-text-container {
z-index: 1 !important;
}
#editor-container {
width: 100%;
height: calc(100vh - 56px);
overflow: auto;
}
function queryData() {
var exportMain = $("#editor-container").clone();
exportMain.find("button").each(function () {
$(this).remove();
});
exportMain.find(".beizhu").each(function () {
$(this).remove();
});
exportMain.find("textarea").each(function () {
if ($(this).attr("type") != "hidden") {
var html = $(this).val();
$(this).after("" + html + "");
}
$(this).remove();
});
exportMain.wordExport("湖北省城市及县域环境空气质量排名");
}
debugger
var E = window.wangEditor; // 全局变量
const { createEditor, createToolbar } = window.wangEditor
const editorConfig = {
placeholder: '请输入内容...',
onChange(editor) {
const html = editor.getHtml()
console.log('editor content', html)
// 也可以同步到