/**
* 有时候会出现一些奇奇怪怪的问题，一般是版本过高或过低导致的问题
* 下面列出我开发时使用的版本。
* "bootstrap": "^4.4.1",
* "jQuery": "^1.7.4",
* "jquery": "^3.6.0",
* "summernote": "^0.8.20",
* "codemirror": "5.45.0",
*/
<template>
    <div class="app-container">

        <el-form ref="dataForm" label-position="right" label-width="85px">
            <el-form-item label="内容" :required="true" class="editor">
                <el-input id="summernote" v-model="formData.content" placeholder="请输入内容" type="textarea" />
            </el-form-item>
        </el-form>

    </div>
</template>
<script>
import $ from 'jquery';
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import CodeMirror from 'codemirror/lib/codemirror';
import 'codemirror/lib/codemirror.css';
import 'codemirror/mode/xml/xml';
import 'codemirror/theme/monokai.css'
import 'summernote/dist/summernote-bs4';
import 'summernote/dist/summernote-bs4.css';

export default {
    name: 'Article',
    data() {
        return {
            formData: {}
        }
    },
    mounted(){

        $('#summernote').summernote({
            height:250,
        });
        
        //设置编辑器的内容
        $('#summernote').summernote('code', '123456789');
        获取编辑器的内容
        $('#summernote').summernote('code');

    }
}
</script>
<style>
    /**
    * 稍微修改一下样式，
    * 另外bootstrap.min.css里有些样式与vue-element-admin本身的样式冲突，需自行修改
    */
    .editor .note-editable p{
        margin: 0!important;
        line-height: 20px;
    }
    .editor .note-editor.note-frame .note-editing-area .note-editable{
        padding-top: 5px;
    }
    .editor .el-form-item--medium .el-form-item__content{
        line-height: 20px;
    }

    .editor p, .editor li {
        font-size: 14px;
        color: #68747f;
    }

    .editor .dropdown-menu > a {
        display: block;
        padding: 3px 20px;
        clear: both;
        font-weight: normal;
        line-height: 1.42857143;
        color: #333;
        white-space: nowrap;
    }

    .editor pre {
        display: block;
        padding: 9.5px;
        margin: 0 0 10px;
        font-size: 13px;
        line-height: 1.42857143;
        color: #333;
        word-break: break-all;
        word-wrap: break-word;
        background-color: #f5f5f5;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    .editor blockquote {
        border-left: 5px solid #f86466;
        background: white;
    }
</style>