vue项目中如何使用ueditor

时间2024-01-23 08:56:41发布访客分类HTML浏览717

导读：收集整理的这篇文章主要介绍了vue项目中如何使用ueditor，觉得挺不错的，现在分享给大家，也给大家做个参考。这次给大家带来vue项目中如何使用uedITor，vue项目中使用ueditor的注意事项有哪些，下面就是实战案例，一起来看一下...

收集整理的这篇文章主要介绍了vue项目中如何使用ueditor，觉得挺不错的，现在分享给大家，也给大家做个参考。这次给大家带来vue项目中如何使用uedITor，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>

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

externals: {
  'UE': 'UE', }
    ,

4.index.html中添加

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

5.editor组件

template>
     p>
      mt-button @click="geteditor()" type="danger">
    获取/mt-button>
      script id="editor" type="text/plain" style="width:1024px;
    height:500px;
    ">
    /script>
     /p>
    /template>
    script>
    const UE = require('UE');
// eslint-disable-lineexport 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>

相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！