美文网首页
在vue中使用使用tinymce富文本编辑器

在vue中使用使用tinymce富文本编辑器

作者: SY | 来源:发表于2021-08-26 14:04 被阅读0次

    参考tinymce文档:https://www.tiny.cloud/docs/quick-start/

    步骤一:在vue中引入tinymce

    npm install @tinymce/tinymce-vue -S

    这是安装中文版必不可少的

    npm install tinymce -S

    如果你用是vue2.0版本的话不要安装这个,vue2中不能使用@tinymce/tinymce-vue为4以上版本;

    安装低版本的:例如:npm install @tinymce/tinymce-vue@3.0.1 -S

    而tinymce版本大小无所谓

    在node_modules文件下找到tinymce文档,复制tinymce放入项目的根目录下public的文件夹中

    langs文件夹是中文语言包  如果你没有下载 可以去官网或者我的上一篇文章里有这个源码  

    在tinymce新建一个langs文件夹  然后新建一个zh_CN.js文件

    再把源码内容粘贴上即可   我在官网没有找到这个语言包就只能用源码  哎  

    这是源码网站

    https://www.jianshu.com/p/38f20d3e0bfa

    官网没有找到这个语言包。。。

    步骤二:引入tinymce-vue进入到子组件中

    import Editor from '@tinymce/tinymce-vue'

    步骤三:注册tinymce-vue进入到子组件中

    // 注册tinymce组件

      components: {

        'editor': Editor

      }

    步骤四:渲染template组件

        <editor :init="init"></editor>

    步骤五:初始化init tinymce

          init: {

            // 组件

            plugins:

              ' lists image colorpicker textcolor wordcount contextmenu autoresize',

            // 工具栏

            toolbar:

              'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent  | undo redo | link unlink image  | removeformat ',

            branding: false,

            min_height: 300

          }

    这个子组件完整的代码:

    <template>

      <div class="tinymce-editor">

        <Editor

          :id="editorId"

          v-model="editorValue"

          :init="editorInit"

          :disabled="disabled"

          @onClick="handleClick"

        />

      </div>

    </template>

    <script>

    // 引入组件

    import tinymce from 'tinymce/tinymce'

    import Editor from '@tinymce/tinymce-vue'

    // 引入富文本编辑器主题的js和css

    import 'tinymce/themes/silver/theme.min.js'

    import 'tinymce/skins/ui/oxide/skin.min.css'

    // 扩展插件

    import 'tinymce/plugins/image'

    import 'tinymce/plugins/link'

    import 'tinymce/plugins/code'

    import 'tinymce/plugins/table'

    import 'tinymce/plugins/lists'

    import 'tinymce/plugins/wordcount' // 字数统计插件

    export default {

      name: 'TinymceEditor',

      components: { Editor },

      props: {

        id: {

          type: String,

          default: 'tinymceEditor'

        },

        value: {

          type: String,

          default: ''

        },

        disabled: {

          type: Boolean,

          default: false

        },

        plugins: {

          type: [String, Array],

          default: 'link lists image code table wordcount'

        },

        toolbar: {

          type: [String, Array],

          default: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat'

        }

      },

      data() {

        return {

          editorInit: {

            language_url: '/tinymce/langs/zh_CN.js',

            language: 'zh_CN',

            skin_url: '/tinymce/skins/ui/oxide',

            height: 300,

            plugins: this.plugins,

            toolbar: this.toolbar,

            statusbar: true, // 底部的状态栏

            menubar: true, // 最上方的菜单

            branding: false, // 水印“Powered by TinyMCE”

            images_upload_handler: (blobInfo, success, failure) => {

              this.$emit('handleImgUpload', blobInfo, success, failure)

            }

          },

          editorId: this.id,

          editorValue: this.value

        }

      },

      watch: {

        editorValue(newValue) {

          this.$emit('input', newValue)

        }

      },

      mounted() {

        tinymce.init({})

      },

      methods: {

        // https://github.com/tinymce/tinymce-vue => All available events

        handleClick(e) {

          this.$emit('onClick', e, tinymce)

        },

        clear() {

          this.editorValue = ''

        }

      }

    }

    </script>

    然后在src 中app.vue注册组件并中引入:

    代码如下:
    <template>

      <div id="app">

        <img alt="Vue logo" src="./assets/logo.png">

        <TinymceEditor />

      </div>

    </template>

    <script>

    import TinymceEditor from  "./components/TinymceEditor.vue"

    export default {

      name: 'App',

      data(){

        return{

          init: {

            // 组件

            plugins:

              ' lists image colorpicker textcolor wordcount contextmenu autoresize',

            // 工具栏

            toolbar:

              'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent  | undo redo | link unlink image  | removeformat ',

            branding: false,

            min_height: 300

          }

        }

      },

      components: {

        TinymceEditor,

      }

    }

    </script>

    <style>

    #app {

      font-family: Avenir, Helvetica, Arial, sans-serif;

      -webkit-font-smoothing: antialiased;

      -moz-osx-font-smoothing: grayscale;

      text-align: center;

      color: #2c3e50;

      margin-top: 60px;

    }

    </style>

    最后打开项目就可以看到富文本完美的展示出来了

    相关文章

      网友评论

          本文标题:在vue中使用使用tinymce富文本编辑器

          本文链接:https://www.haomeiwen.com/subject/eqodiltx.html