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>
  • 相关阅读:
    hdu2438 三分
    hdu3786 找出直系亲属 水题
    hdu3786 找出直系亲属 水题
    hdu4561 连续最大积
    hdu4561 连续最大积
    hdu4604 不错的子序列问题
    hdu4604 不错的子序列问题
    hdu4450 不错的贪心
    hdu1722 切蛋糕
    hdu3768 spfa+全排列
  • 原文地址:https://www.cnblogs.com/lxwphp/p/15454849.html
Copyright © 2011-2022 走看看