当前位置:网站首页>Implementation steps of TinyMCE rich text editor

Implementation steps of TinyMCE rich text editor

2020-12-06 08:11:18 osc_ w4iy68wg

One Tinymce Visual editor

Reference resources :https://panjiachen.gitee.io/vue-element-admin/#/components/tinymce

Two Component initialization

Tinymce It's a tradition javascript plug-in unit , Default cannot be used for Vue.js So you need to do some special integration steps

1 Copy script library

Copy the script library to the project's static Under the table of contents ( stay vue-element-admin-master Of static Under the path )

2 introduce js Script

stay guli-admin/index.html Introduction in js Script

<script src="/static/tinymce4.7.5/tinymce.min.js"></script>
<script src="/static/tinymce4.7.5/langs/zh_CN.js"></script>

3、 ... and Component Introduction

In order to make Tinymce Can be used for Vue.js project ,vue-element-admin Yes Tinymce It was packaged , Let's introduce it to the course information page

1 Copy components

src/components/Tinymce( stay vue-element-admin-master Of src Under the path )

2 Import components

Info.vue Component Tinymce

  //  Register rich text components 
  components: { Tinymce },

3  Use components

      <!--  Course introduction -->
      <el-form-item label=" Course introduction ">
        <tinymce :height="300" v-model="courseInfo.description"/>
      </el-form-item>

4  Component style

<style>
.tinymce-container {
  position: relative;
  line-height: normal;
}
</style>

Four test

版权声明
本文为[osc_ w4iy68wg]所创,转载请带上原文链接,感谢
https://chowdera.com/2020/12/20201206080905897d.html