wangEditor修改样式

注意：修改样式，要使用到css的>>>进行穿透，直接修改是不起作用的，即使加上!important也不起作用

不能使用scss，因为使用scss的话，识别不出穿透符号>>>

<template>
    <div>
        <div id="rich-text-editer" class="editor" ref="editor" style="text-align:left"></div>
        <button v-on:click="getContent">查看内容</button>
    </div>
</template>

<script>
    import E from 'wangeditor'
    export default {
      data () {
        return {
          editorContent: '',
          // 预设内容
          text: '<blockquote>去微软tsdfghjry推广计划明年<img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/3c/pcmoren_wu_org.png" alt="[污]" data-w-e="1"></blockquote>'
        }
      },
      methods: {
          // 显示html内容
        getContent: function () {
            alert(this.editorContent)
        }
      },
      mounted() {
          // 绑定
        const editor = new E(this.$refs.editor)
        // 改变时候获取html
        editor.customConfig.onchange = (html) => {
            // 获取html文本进行输出
          this.editorContent = html
        }
        editor.customConfig.uploadImgShowBase64 = true 
        editor.customConfig.showLinkImg = false
        editor.create()
        // 预设内容
        editor.txt.html(this.text)
        
      }
    }
</script>

<style  scoped> 
/* 注意不能用scss，使用scss不能识别到>>>,因而会不起作用 */
.editor >>> .w-e-text img{
  height: 30px ;
}
.editor >>> .w-e-text h1{
    color: yellow;
}    
</style>

最后

以上就是隐形路人为你收集整理的wangEditor修改样式的全部内容，希望文章能够帮你解决wangEditor修改样式所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。