zoukankan      html  css  js  c++  java
  • vue项目中使用ueditor

     

    以vue-cli生成的项目为例

    1.static文件夹下先放入ueditor文件

    2.index.html添加如下代码

    <script type="text/javascript" charset="utf-8" src="static/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="static/ueditor/ueditor.all.min.js"></script>
    • 1
    • 2

    3.webpack.base.conf.js添加如下配置

    externals: {
        'UE': 'UE',
      },
    • 1
    • 2
    • 3

    4.index.html中添加

    <script type="text/javascript">
      window.UEDITOR_HOME_URL = "/static/ueditor/";//配置路径设定为UEditor所放的位置
    </script>
    • 1
    • 2
    • 3

    5.editor组件

    <template>
      <div>
        <mt-button @click="geteditor()" type="danger">获取</mt-button>
        <script id="editor" type="text/plain" style="1024px;height:500px;"></script>
      </div>
    </template>
    
    <script>
    const UE = require('UE');// eslint-disable-line
    
    export default {
      name: 'editorView',
      data: () => (
        {
          editor: null,
        }
      ),
      methods: {
        geteditor() {
          console.log(this.editor.getContent());
        },
      },
      mounted() {
        this.editor = UE.getEditor('editor');
      },
      destroyed() {
        this.editor.destroy();
      },
    };
    </script>
    
    <style>
    
    </style>
  • 相关阅读:
    马氏距离的深入理解
    Mahalanobis Distance(马氏距离)
    Weka EM 协方差
    数据挖掘、概率分析与决策支持
    二、 Android中gravity与layout_gravity的区别
    一、 Android完全退出应用程序
    python configparse
    时间戳与时间互转
    python argparse
    时间插件
  • 原文地址:https://www.cnblogs.com/lxwphp/p/7826131.html
Copyright © 2011-2022 走看看