zoukankan      html  css  js  c++  java
  • vue-cli3外部引入插件CKEditor

    参考 :https://blog.csdn.net/asyadmin/article/details/98854034

    1. 下载CKEditor4

    https://ckeditor.com/ckeditor-4/download/

    将解压后的CKeditor目录放至/public/static/目录下,然后在index.html中引入

    2.引入vue-cli引入CKeditor

    <!-- 引入 CKeditor-->
    <script src='static/ckeditor/ckeditor.js' type="text/javascript"></script>
    

    3. 创建CKeditor组件

    在/src/components/CKEditor中创建index.vue组件

    <template>
      <div>
        <textarea :id="id" />
      </div>
    </template>
    <script>
    export default {
      name: 'CkEditor',
      /* eslint-disable */
      props: ['content'],
      mounted: function() {
        const self = this
    
        // 渲染编辑器
        self.ckeditor = window.CKEDITOR.replace(self.id)
    
        // 设置初始内容
        self.ckeditor.setData(self.value)
    
        // 监听内容变更事件
        self.ckeditor.on('change', function() {
          self.$emit('input', self.ckeditor.getData())
        })
      },
      // 销毁组件前,销毁编辑器
      beforeDestroy: function() {
        self.ckeditor.destroy()
      },
      data: function() {
        return {
          id: parseInt(Math.random() * 10000).toString(),
          ckeditor: null
        }
      },
      watch: {
        // 监听prop的变化,更新ckeditor中的值
        value: function() {
          if (this.value !== this.ckeditor.getData()) {
            this.ckeditor.setData(this.value)
          }
        }
      }
    }
    </script>
    
    

    4. 引入组件

    <template>
      <div>
        <div id="app" style="80%;margin-left:10%">
          <ck-editor v-model="content" />
        </div>
      </div>
    </template>
    <script>
    import CkEditor from '@/components/CKEditor'
    export default {
      components: { CkEditor },
      data() {
        return ({
          content: ''
        })
      }
    }
    </script>
    
    
  • 相关阅读:
    分析内存泄露问题
    Android 官方博客
    python 2.*和3.*的变化
    python __init__.py
    关于python的import
    Android----Gradle
    Python---string
    uwsgi01---uwsgi文件
    Nginx02---指令集实现静态文件服务器
    python依赖文件的生成requirement.txt
  • 原文地址:https://www.cnblogs.com/code-duck/p/13880638.html
Copyright © 2011-2022 走看看