一、html引入编辑器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本编辑器</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<link href="http://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
<script src="http://cdn.quilljs.com/1.0.0/quill.js"></script>
<style>
/*编辑器样式修改*/
.ql-snow .ql-picker.ql-size .ql-picker-label::before {
content: '中字体';
}
.ql-toolbar.ql-snow .ql-formats {
margin-right: 8px;
}
.ql-snow .ql-editor code, .ql-snow .ql-editor pre {
color: #fff;
background-color: #000;
}
#editor{min-height:300px;}
</style>
</head>
<body>
<!-- 创建工具栏组件 -->
<div id="toolbar">
<span class="ql-formats">
<button class="ql-bold">Bold</button><!--控制粗细-->
<button class="ql-italic">Italic</button> <!--控制切斜-->
<button class="ql-underline">下划线</button> <!--下划线-->
<button class="ql-link">link</button> <!--链接-->
</span>
<span class="ql-formats">
<button class="ql-list" value="ordered"></button><!--序号-->
<button class="ql-list" value="bullet"></button> <!--点-->
<button class="ql-blockquote"></button> <!--引用-->
<button class="ql-code-block"></button> <!--代码-->
<button class="ql-image" value="bullet"></button> <!--图片-->
</span>
<span class="ql-formats">
<select class="ql-color">
<option selected></option>
<option value="red"></option>
<option value="orange"></option>
<option value="yellow"></option>
<option value="green"></option>
<option value="blue"></option>
<option value="purple"></option>
<option value="grey"></option>
</select>
<!-- 可以根据需要加 -->
<select class="ql-background">
<option selected></option>
<option value="black"></option>
<option value="red"></option>
<option value="orange"></option>
<option value="yellow"></option>
<option value="green"></option>
<option value="blue"></option>
<option value="purple"></option>
</select>
</span>
<span class="ql-formats"><!--控制大小-->
<select class="ql-size">
<option value="10px">小字体</option>
<option selected>中字体</option>
<option value="18px">大字体</option>
<option value="32px">超大字</option>
</select>
</span>
</div>
<!-- 创建文本编辑器 -->
<div id="editor">
<p>Hello World!</p>
</div>
<button id="btn">提交</button>
<script>
window.onload=function(){
var BackgroundClass = Quill.import('attributors/class/background');
var ColorClass = Quill.import('attributors/class/color');
var SizeStyle = Quill.import('attributors/style/size');
Quill.register(BackgroundClass, true);
Quill.register(ColorClass, true);
Quill.register(SizeStyle, true);
var editor = new Quill('#editor', {
modules: { toolbar: '#toolbar' },
placeholder: 'Compose an epic...',
theme: 'snow'
});
}
/* 获取编辑器的html */
document.getElementById('btn').addEventListener('click',function(){
const html = document.querySelector('#editor').children[0].innerHTML
console.log('html',html)
});
</script>
</body>
</html>二、渲染内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>帮助文档</title>
<!-- 1. 导入css -->
<link href="https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css" rel="stylesheet">
<!-- 2. 引入vue和vue-router-->
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<!-- 未使用vue路由功能可不导入 -->
<script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js"></script>
<!-- 3. 引入ElementUI组件 -->
<script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>
<link href="./css/style.css" rel="stylesheet" type="text/css" />
<link href="/statics/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id='app'>
<header class="header">帮助文档</header>
<div class="content">
<aside class="aside">
<div class="aside-tree">
<el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
<el-tree class="filter-tree" :data="data" :props="defaultProps"
default-expand-all :filter-node-method="filterNode" ref="tree" @node-click="handleNodeClick">
</el-tree>
</div>
</aside>
<section class="section">
<el-breadcrumb separator="/">
<el-breadcrumb-item v-if="breadcrumb.length<1">系统文档</el-breadcrumb-item>
<el-breadcrumb-item v-else v-for="(item,index) in breadcrumb" :key="index">{
{item}}</el-breadcrumb-item>
</el-breadcrumb>
<div v-if="breadcrumb.length>0" class="ql-container ql-snow">
<div class="ql-editor" v-html="content"></div>
</div>
<div v-else class="ql-home">
<div class="title">
<div>欢迎使用帮助文档</div>
</div>
</div>
</section>
</div>
<!-- <footer class="footer">1111</footer> -->
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: function () {
return {
filterText: '',
data: [{
id: 1,
label: '设计',
}, {
id: 2,
label: '测试',
}],
defaultProps: {
children: 'children',
label: 'label'
},
content:'',
catalogue:[],
ckeckedVal:'',
breadcrumb:[],
catalogue:[{
id:1,
value:`<blockquote>Hello World!</blockquote><p>设计</p><p><br></p><p><span class="ql-bg-purple">text</span></p><pre spellcheck="false">背景色
</pre>`},{
id:2,
value:`<blockquote>Hello World!</blockquote><p>测试</p><p><br></p><p><span class="ql-bg-purple">text</span></p><pre spellcheck="false">背景色
</pre>`
}]
}
},
watch: {
filterText(val) {
this.$refs.tree.filter(val);
}
},
created(){
},
mounted(){
},
methods: {
handleNodeClick(data,node){
this.currentNodeKey = data.id;
// 判断点击的层级进行操作
let arr = []
let cournt=node
console.log(node.id)
for(let i=0;i<node.level;i++){
arr.unshift(cournt.label)
cournt= cournt.parent
}
this.breadcrumb = arr
let currentHtml = this.catalogue&&this.catalogue.filter(item=> item.id==data.id)[0].value ||''
console.log('arr',arr,this.catalogue)
this.$nextTick(()=>{
this.content = `${currentHtml}`
})
},
filterNode(value, data) {
console.log('----------------',value,data)
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
},
});
</script>
</html>style.css样式
body{
padding: 0;
margin: 0;
}
#app{
width: 100%;
background-color:rgba(222,222,222,.5);
}
.header{
position: sticky;
top: 0;
padding-left: 10px;
height: 50px;
z-index: 999;
background-color:#409eff;
color: #fff;
line-height: 50px;
}
.content{
display: flex;
/* padding: 10px 0; */
}
.aside{
width: 18%;
min-width: 220px;
height: 90vh;
}
.aside-tree{
padding: 10px;
height: 100%;
background-color:rgba(222,222,222,.5);
border: 1px solid #eee;
overflow: scroll;
}
.section{
padding: 10px;
width:82%;
min-width: 600px;
height: 90vh;
overflow: hidden;
overflow-y: scroll;
}
.filter-tree{
background-color:rgba(222,222,222,.1);
}
.ql-container{
width: 100%;
height: 100%;
padding:10px 0;
}
/* .footer{
height:150px;
background: rgba(222,222,222,1.5);
} */
.ql-home{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.ql-home .title{
color: #000;
font-size: 40px;
}
.ql-home .subtitle{
width: 100%;
margin-top: 50px;
color: #000;
font-size: 12px;
text-align: center;
}
.el-tree{
color: #000;
}
.el-input__inner{
/* background-color: rgba(222,222,222,.1); */
border: 1px solid #606266;
}
.organization_configuration .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
background-color: transparent;
color: #409eff;
/* font-weight: bold; */
}
.el-tree-node:focus > .el-tree-node__content {
background-color: transparent;
color: #409eff;
/* font-weight: bold; */
}
/* 代码 */
pre {
padding: 5px 10px;
color: #fff;
background-color: #000;
border-radius: 2px;
}
/* 引用 */
blockquote {
border-left: 5px solid #DDD;padding: 10px 5px 10px 15px;margin: 15px 0;font-size: 15px;color:#555;background-color: #F5F5F5;
}