Skip to content

Commit

Permalink
feat: 增加ruby语法（拼音语法）的toolbar和demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@sunsonliu
sunsonliu committed Jul 16, 2022
1 parent 710d65b commit 297ef97
Show file tree
Hide file tree
Showing 16 changed files with 318 additions and 87 deletions.
Binary file added examples/images/feature_pinyin.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions examples/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.6.0/dist/echarts.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>-->
<script src="../dist/cherry-markdown.js"></script>
<script src="./scripts/pinyin/pinyin_dist.js"></script>
<script src="./scripts/index-demo.js"></script>
</body>

Expand Down
2 changes: 1 addition & 1 deletion examples/markdown/basic.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
- [表格所见即所得编辑尺寸](table.html){target=_blank}
- [标题自动序号](head_num.html){target=_blank}

# Cherry Markdown 简明手册
# Cherry Markdown { 简明手册 | jiǎn míng shǒu cè }

[[toc]]

Expand Down
7 changes: 6 additions & 1 deletion examples/scripts/index-demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,10 +79,11 @@ var basicConfig = {
'|',
'color',
'header',
'ruby',
'|',
'list',
{
insert: ['image', 'audio', 'video', 'link', 'hr', 'br', 'code', 'formula', 'toc', 'table', 'pdf', 'word'],
insert: ['image', 'audio', 'video', 'link', 'hr', 'br', 'code', 'formula', 'toc', 'table', 'pdf', 'word', 'ruby'],
},
'graph',
'togglePreview',
Expand All @@ -91,6 +92,7 @@ var basicConfig = {
'codeTheme',
'export',
],
bubble: ['bold', 'italic', 'underline', 'strikethrough', 'sub', 'sup', 'quote', 'ruby', '|', 'size', 'color'], // array or false
sidebar: ['mobilePreview', 'copy'],
},
editor: {
Expand All @@ -102,6 +104,9 @@ var basicConfig = {
},
keydown: [],
//extensions: [],
callback: {
changeString2Pinyin: pinyin,
}
};

fetch('./markdown/basic.md').then((response) => response.text()).then((value) => {
Expand Down
53 changes: 53 additions & 0 deletions examples/scripts/pinyin/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
https://github.com/liu11hao11/pinyin_js

# pinyin_js
中文转拼音
##安装
```
npm install
```


##汉字转化成带音节的拼音
```javascript
var pinyin=require("pinyin_js");
console.log(pinyin.pinyin("你好"," "));
//输出结果是nǐ hǎo
```

##汉字转化成不带音节的拼音
```javascript
var pinyin=require("pinyin_js");
console.log(pinyin.pinyinWithOutYin("你好"," "));
//输出结果是ni hao
```

##判断是否是汉字
```javascript
var pinyin=require("pinyin_js");
console.log(pinyin.isChineseWord("你好"));//true
console.log(pinyin.isChineseWord("!你好",false));//true
console.log(pinyin.isChineseWord("!你好",true));//第二个参数：true是严格模式，默认为严格模式
//false
```

##首字母排序

```javascript
var pinyin=require("pinyin_js");
var users = [
{ 'user': '张三丰', 'age': 40 },
{ 'user': '123', 'age': 48 },
{ 'user': '张三', 'age': 48 },
{ 'user': '李四', 'age': 36 },
{ 'user': '张三炮', 'age': 34 }
];
var sortResult = pinyin.sort(users, "user");
console.log(sortResult)
/*[ { user: '123', age: 48 },
{ user: '李四', age: 36 },
{ user: '张三', age: 48 },
{ user: '张三丰', age: 40 },
{ user: '张三炮', age: 34 } ]*/

```
1 change: 1 addition & 0 deletions examples/scripts/pinyin/hanziPinyin.js
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions examples/scripts/pinyin/hanziPinyinWithoutYin.js
View file

Large diffs are not rendered by default.

81 changes: 81 additions & 0 deletions examples/scripts/pinyin/pinyin.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
/**
* Created by Alex on 2016/3/7.
*/
var hzpy = require("./hanziPinyin").hzpy;
var hzpyWithOutYin = require("./hanziPinyinWithoutYin").hzpy;
var _ = require("lodash");

function pinyin(word,splitStr) {
splitStr = splitStr === undefined ? ' ' : splitStr;
var str = '';
var s;
for (var i = 0; i < word.length; i++) {
if (hzpy.indexOf(word.charAt(i)) != -1 && word.charCodeAt(i) > 200) {
s = 1;
while (hzpy.charAt(hzpy.indexOf(word.charAt(i)) + s) != ",") {
str += hzpy.charAt(hzpy.indexOf(word.charAt(i)) + s);
s++;
}
str += splitStr;
}
else {
str += word.charAt(i);
}
}
return str;
}

//无声调的拼音
function pinyinWithOutYin(word,splitStr) {
splitStr = splitStr === undefined ? ' ' : splitStr;
var str = '';
var s;
for (var i = 0; i < word.length; i++) {
if (hzpyWithOutYin.indexOf(word.charAt(i)) != -1 && word.charCodeAt(i) > 200) {
s = 1;
while (hzpyWithOutYin.charAt(hzpyWithOutYin.indexOf(word.charAt(i)) + s) != ",") {
str += hzpyWithOutYin.charAt(hzpyWithOutYin.indexOf(word.charAt(i)) + s);
s++;
}
str +=splitStr;
}
else {
str += word.charAt(i);
}
}

return str;
}

function isChineseWord(word, modle) {
if (!modle) {
//modle为false是非严格中文！默认是严格中文
modle = true;
}
var str = '';
var isChinese = false;
for (var i = 0; i < word.length; i++) {
if (hzpy.indexOf(word.charAt(i)) != -1 && word.charCodeAt(i) > 200) {
isChinese = true;
}
else {
if (modle) {
return false;
}
}
}
return isChinese;
}

function sort(array, key) {
return _.sortBy(array, [function (o) {
return pinyinWithOutYin(o[key],"");
}]);
}

module.exports = {
pinyin: pinyin,
pinyinWithOutYin: pinyinWithOutYin,
isChineseWord: isChineseWord,
sort: sort
}
21 changes: 21 additions & 0 deletions examples/scripts/pinyin/pinyin_dist.js
View file

Large diffs are not rendered by default.

12 changes: 12 additions & 0 deletions src/Cherry.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,15 @@ const callbacks = {
// 对复制内容进行额外处理
return code;
},
// 获取中文的拼音
changeString2Pinyin: (string) => {
/**
* 推荐使用这个组件：https://github.com/liu11hao11/pinyin_js
*
* 可以在 ../scripts/pinyin/pinyin_dist.js 里直接引用
*/
return string;
},
};

/** @type {Partial<import('~types/cherry').CherryOptions>} */
Expand Down Expand Up @@ -190,6 +199,7 @@ const defaultConfig = {
'|',
'color',
'header',
'ruby',
'|',
'list',
{
Expand Down Expand Up @@ -226,6 +236,8 @@ const defaultConfig = {
onClickPreview: callbacks.onClickPreview,
// 复制代码块代码时的回调
onCopyCode: callbacks.onCopyCode,
// 把中文变成拼音的回调，当然也可以把中文变成英文、英文变成中文
changeString2Pinyin: callbacks.changeString2Pinyin,
},
previewer: {
dom: false,
Expand Down
171 changes: 86 additions & 85 deletions src/sass/ch-icon.scss
View file
Original file line number Diff line number Diff line change
@@ -1,85 +1,86 @@
@font-face {
font-family: "ch-icon";
src: url('./fonts/ch-icon.eot');
src: url('./fonts/ch-icon.eot?#iefix') format('eot'),
url('./fonts/ch-icon.woff2') format('woff2'),
url('./fonts/ch-icon.woff') format('woff'),
url('./fonts/ch-icon.ttf') format('truetype'),
url('./fonts/ch-icon.svg#ch-icon') format('svg');
font-weight: normal;
font-style: normal;
}

.ch-icon:before {
display: inline-block;
font-family: "ch-icon";
font-style: normal;
font-weight: normal;
//line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.ch-icon-list:before { content: "\EA03" }
.ch-icon-check:before { content: "\EA04" }
.ch-icon-square:before { content: "\EA09" }
.ch-icon-bold:before { content: "\EA0A" }
.ch-icon-code:before { content: "\EA0B" }
.ch-icon-color:before { content: "\EA0C" }
.ch-icon-header:before { content: "\EA0D" }
.ch-icon-image:before { content: "\EA0E" }
.ch-icon-italic:before { content: "\EA0F" }
.ch-icon-link:before { content: "\EA10" }
.ch-icon-ol:before { content: "\EA11" }
.ch-icon-size:before { content: "\EA12" }
.ch-icon-strike:before { content: "\EA13" }
.ch-icon-table:before { content: "\EA14" }
.ch-icon-ul:before { content: "\EA15" }
.ch-icon-underline:before { content: "\EA16" }
.ch-icon-word:before { content: "\EA17" }
.ch-icon-blockquote:before { content: "\EA18" }
.ch-icon-font:before { content: "\EA19" }
.ch-icon-insertClass:before { content: "\EA1F" }
.ch-icon-insertFlow:before { content: "\EA20" }
.ch-icon-insertFormula:before { content: "\EA21" }
.ch-icon-insertGantt:before { content: "\EA22" }
.ch-icon-insertGraph:before { content: "\EA23" }
.ch-icon-insertPie:before { content: "\EA24" }
.ch-icon-insertSeq:before { content: "\EA25" }
.ch-icon-insertState:before { content: "\EA26" }
.ch-icon-line:before { content: "\EA27" }
.ch-icon-preview:before { content: "\EA28" }
.ch-icon-previewClose:before { content: "\EA29" }
.ch-icon-toc:before { content: "\EA2A" }
.ch-icon-sub:before { content: "\EA2D" }
.ch-icon-sup:before { content: "\EA2E" }
.ch-icon-h1:before { content: "\EA2F" }
.ch-icon-h2:before { content: "\EA30" }
.ch-icon-h3:before { content: "\EA31" }
.ch-icon-h4:before { content: "\EA32" }
.ch-icon-h5:before { content: "\EA33" }
.ch-icon-h6:before { content: "\EA34" }
.ch-icon-video:before { content: "\EA35" }
.ch-icon-insert:before { content: "\EA36" }
.ch-icon-little_table:before { content: "\EA37" }
.ch-icon-pdf:before { content: "\EA38" }
.ch-icon-checklist:before { content: "\EA39" }
.ch-icon-close:before { content: "\EA40" }
.ch-icon-fullscreen:before { content: "\EA41" }
.ch-icon-minscreen:before { content: "\EA42" }
.ch-icon-insertChart:before { content: "\EA43" }
.ch-icon-question:before { content: "\EA44" }
.ch-icon-settings:before { content: "\EA45" }
.ch-icon-ok:before { content: "\EA46" }
.ch-icon-br:before { content: "\EA47" }
.ch-icon-normal:before { content: "\EA48" }
.ch-icon-undo:before { content: "\EA49" }
.ch-icon-redo:before { content: "\EA50" }
.ch-icon-copy:before { content: "\EA51" }
.ch-icon-phone:before { content: "\EA52" }
.ch-icon-cherry-table-delete:before { content: "\EA53" }
.ch-icon-cherry-table-insert-bottom:before { content: "\EA54" }
.ch-icon-cherry-table-insert-left:before { content: "\EA55" }
.ch-icon-cherry-table-insert-right:before { content: "\EA56" }
.ch-icon-cherry-table-insert-top:before { content: "\EA57" }
.ch-icon-sort-s:before { content: "\EA58" }
@font-face {
font-family: "ch-icon";
src: url('./fonts/ch-icon.eot');
src: url('./fonts/ch-icon.eot?#iefix') format('eot'),
url('./fonts/ch-icon.woff2') format('woff2'),
url('./fonts/ch-icon.woff') format('woff'),
url('./fonts/ch-icon.ttf') format('truetype'),
url('./fonts/ch-icon.svg#ch-icon') format('svg');
font-weight: normal;
font-style: normal;
}

.ch-icon:before {
display: inline-block;
font-family: "ch-icon";
font-style: normal;
font-weight: normal;
//line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.ch-icon-pinyin:before { content: "\EA59" }
.ch-icon-list:before { content: "\EA03" }
.ch-icon-check:before { content: "\EA04" }
.ch-icon-square:before { content: "\EA09" }
.ch-icon-bold:before { content: "\EA0A" }
.ch-icon-code:before { content: "\EA0B" }
.ch-icon-color:before { content: "\EA0C" }
.ch-icon-header:before { content: "\EA0D" }
.ch-icon-image:before { content: "\EA0E" }
.ch-icon-italic:before { content: "\EA0F" }
.ch-icon-link:before { content: "\EA10" }
.ch-icon-ol:before { content: "\EA11" }
.ch-icon-size:before { content: "\EA12" }
.ch-icon-strike:before { content: "\EA13" }
.ch-icon-table:before { content: "\EA14" }
.ch-icon-ul:before { content: "\EA15" }
.ch-icon-underline:before { content: "\EA16" }
.ch-icon-word:before { content: "\EA17" }
.ch-icon-blockquote:before { content: "\EA18" }
.ch-icon-font:before { content: "\EA19" }
.ch-icon-insertClass:before { content: "\EA1F" }
.ch-icon-insertFlow:before { content: "\EA20" }
.ch-icon-insertFormula:before { content: "\EA21" }
.ch-icon-insertGantt:before { content: "\EA22" }
.ch-icon-insertGraph:before { content: "\EA23" }
.ch-icon-insertPie:before { content: "\EA24" }
.ch-icon-insertSeq:before { content: "\EA25" }
.ch-icon-insertState:before { content: "\EA26" }
.ch-icon-line:before { content: "\EA27" }
.ch-icon-preview:before { content: "\EA28" }
.ch-icon-previewClose:before { content: "\EA29" }
.ch-icon-toc:before { content: "\EA2A" }
.ch-icon-sub:before { content: "\EA2D" }
.ch-icon-sup:before { content: "\EA2E" }
.ch-icon-h1:before { content: "\EA2F" }
.ch-icon-h2:before { content: "\EA30" }
.ch-icon-h3:before { content: "\EA31" }
.ch-icon-h4:before { content: "\EA32" }
.ch-icon-h5:before { content: "\EA33" }
.ch-icon-h6:before { content: "\EA34" }
.ch-icon-video:before { content: "\EA35" }
.ch-icon-insert:before { content: "\EA36" }
.ch-icon-little_table:before { content: "\EA37" }
.ch-icon-pdf:before { content: "\EA38" }
.ch-icon-checklist:before { content: "\EA39" }
.ch-icon-close:before { content: "\EA40" }
.ch-icon-fullscreen:before { content: "\EA41" }
.ch-icon-minscreen:before { content: "\EA42" }
.ch-icon-insertChart:before { content: "\EA43" }
.ch-icon-question:before { content: "\EA44" }
.ch-icon-settings:before { content: "\EA45" }
.ch-icon-ok:before { content: "\EA46" }
.ch-icon-br:before { content: "\EA47" }
.ch-icon-normal:before { content: "\EA48" }
.ch-icon-undo:before { content: "\EA49" }
.ch-icon-redo:before { content: "\EA50" }
.ch-icon-copy:before { content: "\EA51" }
.ch-icon-phone:before { content: "\EA52" }
.ch-icon-cherry-table-delete:before { content: "\EA53" }
.ch-icon-cherry-table-insert-bottom:before { content: "\EA54" }
.ch-icon-cherry-table-insert-left:before { content: "\EA55" }
.ch-icon-cherry-table-insert-right:before { content: "\EA56" }
.ch-icon-cherry-table-insert-top:before { content: "\EA57" }
.ch-icon-sort-s:before { content: "\EA58" }
1 change: 1 addition & 0 deletions src/sass/icons/uEA59-pinyin.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 297ef97

Please sign in to comment.