知识库-主题与插件

在2.0中，新增加了主题与插件，极大的拓展了编辑器的可能

主题

主题可以自定义css，实现插件自定义样式。

参考

具体的class可以参考：【知识库】

css变量可参考：【设计变量】

小贴士

• .cherry-previewer：markdown编辑器的预览css选择器

markdown编辑器-菜单

返回值会直接替换选中的值，如果没有选中，则直接插入到光标位置

参数

selection：当点击菜单的时候，选中的文本

instance：编辑器对象

类型定义

declare class Cherry {
    /**
     * 获取编辑区内的markdown源码内容
     * @returns markdown源码内容
     */
    getValue(): string;

    /**
     * 获取编辑区内的markdown源码内容
     * @returns {string} markdown源码内容
     */
    getMarkdown(): string;

    /**
     * 获取预览区内的html内容
     * @param {boolean} [wrapTheme=true] 是否在外层包裹主题class
     * @returns {string} html内容
     */
    getHtml(wrapTheme?: boolean): string;

    /**
     * 覆盖编辑区的内容
     * @param {string} content markdown内容
     * @param {boolean} keepCursor 是否保持光标位置
     */
    setValue(content: string, keepCursor?: boolean): void;

    /**
     * 在光标处或者指定行+偏移量插入内容
     * @param {string} content 被插入的文本
     * @param {boolean} [isSelect=false] 是否选中刚插入的内容
     * @param {[number, number]|false} [anchor=false] [x,y] 代表x+1行，y+1字符偏移量，默认false 会从光标处插入
     * @param {boolean} [focus=true] 保持编辑器处于focus状态
     */
    insert(content: string, isSelect?: boolean, anchor?: [number, number] | false, focus?: boolean): void;

    /**
     * 在光标处或者指定行+偏移量插入内容
     * @param {string} content 被插入的文本
     * @param {boolean} [isSelect=false] 是否选中刚插入的内容
     * @param {[number, number]|false} [anchor=false] [x,y] 代表x+1行，y+1字符偏移量，默认false 会从光标处插入
     * @param {boolean} [focus=true] 保持编辑器处于focus状态
     * @returns
     */
    insertValue(content: string, isSelect?: boolean, anchor?: [number, number] | false, focus?: boolean): void;

    /**
     * 覆盖编辑区的内容
     * @param {string} content markdown内容
     * @param {boolean} [keepCursor=false] 是否保持光标位置
     */
    setMarkdown(content: string, keepCursor?: boolean): void;

}

declare const selection: string;
declare const instance: Cherry;

实例

举个例子，比如说一个普通按钮，可处理点击事件，点击时做相应的操作（比如往编辑区插入内容，或者修改预览区内容等），代码如下：

// 加粗斜体
return `***${selection}***`;

小贴士

如果是一个简单的字符串处理，是一个同步方法，可以直接将替换的内容return回来，如果是一个异步方法，可以使用instance.insert方法，在光标中插入

markdown编辑器-语法拓展

此插件可以通过正则表达式实现语法上的拓展

未完待续。。。