标签：index 文本编辑 Vue sans TinyMce tinymce serif editor 步骤

项目需求：
RuoYi-Vue 前端分离版 集成 富文本编辑（tinyMce）

参考资料：
https://www.tiny.cloud/docs/general-configuration-guide/use-tinymce-inline（官网文档）
http://tinymce.ax-z.cn/advanced/some-example.php（中文文档，可提供参考）

安装步骤：

步骤1：npm install tinymce -S

步骤2：
vue2
npm install @tinymce/tinymce-vue@^3 -S

vue3（之后的步骤未验证，哪位朋友验证可帮忙留言）
npm install @tinymce/tinymce-vue@^4 -S

步骤3：将tinymce文件拷贝ruoyi-ui>public文件夹

步骤4：在ruoyi-ui>public>index.html输入：

<script type="text/javascript" charset="utf-8" src="<%= BASE_URL %>tinymce/tinymce.min.js"></script>

步骤5：在ruoyi-yi>src>components文件夹创建Tinymce及index.vue（生成组件）

 index.vue代码

<template>
  <section class="componentsTinymce_index">
    <textarea ref="textarea"></textarea>
  </section>
</template>

<script>
export default {
  props: ['str'],

  data () {
    return {}
  },

  computed: {},

  watch: {
    str: function (val) {
      window.tinymce.activeEditor.setContent(val)
    }
  },

  components: {},

  mixins: [],

  beforeCreate () {},

  created () {},

  beforeMount () {},

  mounted () {
    let that = this
    let el = this.$refs['textarea']
    el.addEventListener('input', e => {
      console.log(e.target.value,e,)
    })
    window.tinymce.init({
      target: el,
      language_url: '/tinymce/langs/zh_CN.js',
      language: 'zh_CN',
      content_style:
        'p {margin: 0px; padding: 0px} body {margin:8px;font-family:arial,sans-serif;font-size:14px;}', // 初始换样式
      menubar: false, // 显示菜单栏
      height: '100px', // 高度
      fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px',
      font_formats:
        'Arial=arial,helvetica,sans-serif;微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;Andale Mono=andale mono,times;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;',
      auto_focus: false,
      resize: false,
      placeholder: '请输入内容',
      convert_urls: false,
      // images_upload_url: '/dev-api/common/upload',
      // images_upload_base_path: '/dev-api',
      plugins:
        'table,pagebreak,charmap,emoticons,hr,lists,fullscreen,code,preview,image,imagetools,recommendedsearch,visio,form',
      // toolbar:
      //   'undo redo formatselect fontselect fontsizeselect lineheight bold italic numlist underline strikethrough forecolor backcolor table pagebreak alignleft aligncenter alignright alignjustify outdent indent blockquote removeformat image imagetools charmap emoticons hr fullscreen code preview recommendedsearch visio',
      toolbar:
        'alignleft aligncenter alignright alignjustify bold image table imagetools preview recommendedsearch visio form',
      init_instance_callback: function (editor) {
        editor.on('input', e => {
          // console.log(editor.getContent())
        })
        editor.on('blur', e => {
          console.log(editor.getContent())
          that.$emit('setStr', editor.getContent())
        })
      }
    })
  },

  activated () {},

  deactivated () {},

  beforeDestroy () {
    console.log('componentsTinymce_index组件即将销毁')
  },

  methods: {}
}
</script>
<style lang="scss" scoped>
.componentsTinymce_index {
  height: 100%;
}
</style>
<style lang="scss">

</style>

 步骤6：在ruoyi-yi>src>views>文件夹index.vue调用Tinymce（步骤5创建的组件）

界面展示效果：

标签：index,文本编辑,Vue,sans,TinyMce,tinymce,serif,editor,步骤
来源： https://blog.csdn.net/qq_48383411/article/details/122579033

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。