ci-code-editor

项目介绍

CafeInit Code Editor online for Vue

软件架构

软件架构说明

安装教程

npm set registry http://101.132.37.243:4873
npm install --save ci-code-editor

使用说明

详细使用请参考 /example/src/App.vue

<ci-code-editor ref="my-code-editor"
  mode="c++"
  :value="code"
  @change="handleCodeEditorOnChange"
  @submit="handleCodeEditorOnSubmit"
  :is-show-submit="true"
/>

import CICodeEditor from 'ci-code-editor'

let myCodeEditor = null

export default {
  name: 'app',

  components: {
    [CICodeEditor.name]: CICodeEditor
  },

  data () {
    return {
      code: ''
    }
  },

  mounted() {
    this.code = `#include <iostream>
#include "mystuff/util.h"

namespace {
enum Enum {
  VAL1, VAL2, VAL3
};

char32_t unicode_string = U"\U0010FFFF";
string raw_string = R"delim(anything
you
want)delim";

int Helper(const MyType& param) {
  return 0;
}
} // namespace

class ForwardDec;

template <class T, class V>
class Class : public BaseClass {
  const MyType<T, V> member_;

 public:
  const MyType<T, V>& Method() const {
    return member_;
  }

  void Method2(MyType<T, V>* value);
}

template <class T, class V>
void Class::Method2(MyType<T, V>* value) {
  std::out << 1 >> method();
  value->Method3(member_);
  member_ = value;
}
`
    myCodeEditor = this.$refs['my-code-editor']
  },

  methods: {
    handleCodeEditorOnChange(changeObj) {
      console.log('handleCodeEditorOnChange', changeObj)
    },

    handleCodeEditorOnSubmit(value) {
      console.log('handleCodeEditorOnSubmit', value)
    },

    handleSubmit() {
      if (myCodeEditor) {
        console.log('handleSubmit', myCodeEditor.getValue())
      }
    }
  }
}

参与贡献

1. Fork 本项目
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request

码云特技

1. 使用 Readme_XXX.md 来支持不同的语言，例如 Readme_en.md, Readme_zh.md
2. 码云官方博客 blog.gitee.com
3. 你可以 https://gitee.com/explore 这个地址来了解码云上的优秀开源项目
4. GVP 全称是码云最有价值开源项目，是码云综合评定出的优秀开源项目
5. 码云官方提供的使用手册 https://gitee.com/help
6. 码云封面人物是一档用来展示码云会员风采的栏目 https://gitee.com/gitee-stars/