• vue+富文本插件


    <template>
      <div style="line-height: normal">
        <vue-ueditor-wrap v-model="msg.html" :config="myConfig" />
      </div>
    </template>
    <script>
    import VueUeditorWrap from 'vue-ueditor-wrap'
    
    export default {
      name: 'Noticeedit',
      components: {
        VueUeditorWrap
      },
      props: ['msg'],
      data() {
        return {
          myConfig: {
            // 编辑器不自动被内容撑高
            autoHeightEnabled: false,
            // 初始容器高度
            initialFrameHeight: 300,
            // 初始容器宽度
            initialFrameWidth: '100%',
            // 上传文件接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口,请勿在生产环境使用!!!)
            // serverUrl: 'http://35.201.165.105:8000/controller.php',
            // UEditor 资源文件的存放路径,如果你使用的是 vue-cli 生成的项目,通常不需要设置该选项,vue-ueditor-wrap 会自动处理常见的情况,如果需要特殊配置,参考下方的常见问题2
            UEDITOR_HOME_URL: '/UEditor/',
            toolbars: [[
              'fullscreen', 'source', '|', 'undo', 'redo', '|',
              'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
              'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
              'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
              'directionalityltr', 'directionalityrtl', 'indent', '|',
              'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify'
            ]]
          }
        }
      }
    }
    </script>

    备注:

      * 加载ueditor.config.js失败,请检查您的配置地址UEDITOR_HOME_URL填写是否正确! 

        官网:https://github.com/haochuan9421/vue-ueditor-wrap

        quick start的第一步解决此问题

  • 相关阅读:
    NTKO Officecontrol在线Word编辑器的使用
    SQL数据类型解释
    经典SQL语句大全(网络资源共享)
    Ext.grid.GridPanel属性及方法等
    C#简易播放器(基于开源VLC)
    委托,是我委托你处理事件
    .NET面试必备(整理)
    SQL server 数据库连接方式分析
    FTP操作类的使用
    微信企业号平台开发之获取菜单,创建菜单和删除菜单
  • 原文地址:https://www.cnblogs.com/linding/p/13383530.html
Copyright © 2020-2023  润新知