dounai1306 / vue

vue的一些相关记录
0 stars 0 forks source link

simditor vue2使用 #21

Open dounai1306 opened 6 years ago

dounai1306 commented 6 years ago

cdn版本:https://jsfiddle.net/dounai/sy6zadm9/


npm版本

<template>
  <div>
    <textarea id="editor" autofocus></textarea>
    <h2 @click="getCon">同步</h2>
  </div>
</template>

<script>
  import $ from 'jquery'
  import '../../../static/simditor/module'
  import '../../../static/simditor/hotkeys'
  import '../../../static/simditor/uploader'
  import Simditor from '../../../static/simditor/simditor'
  export default {
    data () {
      return {
        editor: '',
        data: [],
        content: ''
      }
    },
    mounted: function () {
      this.editor = new Simditor({
        textarea: $('#editor'),
        placeholder: '',
        defaultImage: 'static/simditor/image.png', // 默认图像占位符
        params: {},
        upload: {
          url: 'http://xyren.dev.ctripcorp.com:5360/api/image',
          params: null,
          fileKey: 'image',
          connectionCount: 1,
          leaveConfirm: 'Uploading is in progress, are you sure to leave this page?'
        },
        tabIndent: true,
        toolbar: [
          'title',
          'bold',
          'italic',
          'underline',
          'strikethrough',
          'fontScale',
          'color',
          'ol',
          'ul',
          'blockquote',
          'code',
          'table',
          'link',
          'image',
          'hr',
          'indent',
          'outdent',
          'alignment'
        ],
        toolbarFloat: true,
        toolbarFloatOffset: 0,
        toolbarHidden: false,
        pasteImage: 'inline',
        imageButton: ['upload'],
        cleanPaste: false,
        allowedTags: ['br', 'span', 'a', 'img', 'b', 'strong', 'i', 'strike', 'u', 'font', 'p', 'ul', 'ol', 'li', 'blockquote', 'pre', 'code', 'h1', 'h2', 'h3', 'h4', 'hr'],
        codeLanguages: [
          { name: 'Bash', value: 'bash' },
          { name: 'C++', value: 'c++' },
          { name: 'C#', value: 'cs' },
          { name: 'CSS', value: 'css' },
          { name: 'Erlang', value: 'erlang' },
          { name: 'Less', value: 'less' },
          { name: 'Sass', value: 'sass' },
          { name: 'Diff', value: 'diff' },
          { name: 'CoffeeScript', value: 'coffeescript' },
          { name: 'HTML,XML', value: 'html' },
          { name: 'JSON', value: 'json' },
          { name: 'Java', value: 'java' },
          { name: 'JavaScript', value: 'js' },
          { name: 'Markdown', value: 'markdown' },
          { name: 'Objective C', value: 'oc' },
          { name: 'PHP', value: 'php' },
          { name: 'Perl', value: 'parl' },
          { name: 'Python', value: 'python' },
          { name: 'Ruby', value: 'ruby' },
          {name: 'SQL', value: 'sql'}
        ]
        // optional options
      })
    },
    methods: {
      getCon: function () {
        this.content = this.editor.getValue()
      }
    }
  }
</script>

后端上传接口返回格式:

{
  "success": true/false,
  "msg": "",
  "file_path": 图片url地址
}