zoukankan      html  css  js  c++  java
  • 富文本编辑器--页面中两个编辑器以及菜单和编辑器区域分开

    ###~css

    .toolbar {
        border: 1px solid #ccc;
    }
    .text {
        border: 1px solid #ccc;
        height: 400px;
    }
    #div3{
        margin-top: 50px
    }
     
    ###~vue
    <template>
      <div class="hello">
        
        <!-- <button @click="gettwo()">点击</button> -->
        <div id="div1" class="toolbar">
        </div>

        <div style="padding: 5px 0; color: #ccc">中间隔离带</div>

        <div id="div2" class="text"> <!--可使用 min-height 实现编辑区域自动增加高度-->
            <p>请输入内容</p>
        </div>

        <div id="div3">
            <p>第二个 demo(常规)</p>
        </div>
      </div>
    </template>

    <script>

    import {shuchu} from '../assets/get'
    import E from 'wangeditor'
    import '../assets/editor.css'

    export default {
      // data () {
      //   return {
      //   }
      // },
      // methods: {
      //   gettwo(){
      //     shuchu();
      //   }
      // },
      mounted(){
         var editor1 = new E('#div1', '#div2')  // 两个参数也可以传入 elem 对象,class 选择器
        editor1.create()

        var editor2 = new E('#div3')
        editor2.create()
      }
    }
    </script>


    效果图:

    本文仅提供参考,是本人闲时所写笔记,如有错误,还请赐教,作者:阿蒙不萌,大家可以随意转载

  • 相关阅读:
    LTE网络注册流程(1)(2)(3)
    Linux 添加用户
    (TOJ2627)台州学院首届新生程序设计竞赛参赛资格
    (TOJ1249)四数相加
    (TOJ1192)A + B Problem II
    (TOJ1065)完美数
    (TOJ1248)Encoding
    (TOJ1051)A × B problem
    (TOJ1506)Sort ZOJ7
    (TOJ1531)爱的伟大意义
  • 原文地址:https://www.cnblogs.com/huchong-bk/p/11512228.html
Copyright © 2011-2022 走看看