React项目(一):markdown编辑器
在之前的React官网教程中,提到了用Remarkable为插件的markdown评论框。现在就来正儿八经地用另外一个插件marked.js
做一个markdown编辑器吧!
准备工作
或许在做之前,应该布个局。
<div class="brand">
<h1>Markdown Previewer</h1>
</div>
<div id=container>
<div id="markdownApp">
<div class="edit-area">
<textarea placeholder="请输入markdown文本" class="editor"></textarea>
</div>
<div class="shower">
</div>
</div>
</div>
/*simple css-reset*/
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
/*major*/
.brand{
width: 100%;
height: 80px;
background: rgb(21,127,178);
}
.brand h1{
text-align: center;
font-size: 30px;
color: #fff;
line-height: 80px;
font-weight: normal;
}
#markdownApp{
width: 100%;
}
.edit-area,.shower{
float: left;
width: 50%;
}
.edit-area textarea{
max-width: 80%;
min-width: 80%;
margin: 20px;
min-height:600px;
border: 1px solid rgb(21,127,178)
}
大概这样就OK了。
本demo使用的是以下环境(marked.js,highlight.js及其样式库)。
<link rel="stylesheet" type="text/css" href="css/css.css"/>
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- 高亮样式库,为了让样式总体好看,使用bootstrap的样式库 -->
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
<script src="js/marked.js"></script>
<script src="js/highlight.pack.js"></script>
<script >hljs.initHighlightingOnLoad();</script>
<script src="js/js.js"></script>
关于marked.js的设置用法参见marked.js简明手册。
基本实现
基本上就是keyUp事件:
var rendererMD = new marked.Renderer();
marked.setOptions({
renderer: rendererMD,
highlight: function (code) {
return hljs.highlightAuto(code).value;
},
gfm: true,
tables: true,
breaks: false,
pedantic: false,
sanitize: false,
smartLists: true,
smartypants: false
});
var markdownString = '```js\n console.log("hello"); \n```';
var oEditor=document.getElementById('editor');
var oShower=document.getElementById('shower');
//oShower.innerHTML=marked(markdownString)
oEditor.onkeyup=function(){
oShower.innerHTML = marked(this.value);
}
React思路
静态结构
按照html结构先把静态结构写上去:
var MarkdownApp=React.createClass({
render:function(){
return (
<div id="markdownApp">
<Editor />
<div className="shower" id="shower"></div>
</div>
);
}
});
var Editor=React.createClass({
render:function(){
return (
<div className="edit-area">
<textarea placeholder="请输入markdown文本" id="editor" className="editor"></textarea>
</div>
);
}
});
ReactDOM.render(
<MarkdownApp/>,
document.getElementById('container')
)
动态实现
var str="Heading\n=======\n\nSub-heading\n-----------\n \n### Another deeper heading\n \nParagraphs are separated\nby a blank line.\n\nLeave 2 spaces at the end of a line to do a \nline break\n\nText attributes *italic*, **bold**, \n`monospace`, ~~strikethrough~~ .\n\nShopping list:\n\n * apples\n * oranges\n * pears\n\nNumbered list:\n\n 1. apples\n 2. oranges\n 3. pears\n\nThe rain---not the reign---in\nSpain.\n\n *[Herman Fassett](https://freecodecamp.com/hermanfassett)*\n```javascript\nfunction(){\n alert(hehe);\n}\n```"
var MarkdownApp=React.createClass({
getInitialState:function(){
return {
content:str,
}
},
handleChange:function(value){
this.setState({
content:value,
});
},
render:function(){
return (
<div id="markdownApp">
<Editor
handleChange={(value)=>this.handleChange(value)}
value={this.state.content}/>
<Shower content={this.state.content} />
</div>
);
}
});
var Editor=React.createClass({
handleChange:function(e){
var _this=e.target;
this.props.handleChange(_this.value);
},
render:function(){
return (
<div className="edit-area">
<textarea
placeholder="请输入markdown文本"
id="editor"
className="editor"
value={this.props.value}
onChange={this.handleChange}>
</textarea>
</div>
);
}
});
var Shower=React.createClass({
convertor:function(content){
var rendererMD = new marked.Renderer();
marked.setOptions({
renderer: rendererMD,
highlight: function (code) {
return hljs.highlightAuto(code).value;
},
gfm: true,
tables: true,
breaks: true,
pedantic: false,
sanitize: true,
smartLists: true,
smartypants: false
});
//console.log(marked(content));
return ({
__html:marked(content)
});//注意是两个下划线!
},
render:function(){
return (
<div
className="shower"
id="shower"
dangerouslySetInnerHTML={this.convertor(this.props.content)}></div>
);
}
});
ReactDOM.render(
<MarkdownApp/>,
document.getElementById('container')
);
看了一下,确实不用怎么想。
React项目(一):markdown编辑器的更多相关文章
- thinkphp5使用Markdown编辑器Editor.md并上传图片
Editor.md官网:https://pandao.github.io/editor.md/index.html 下载后解压放到项目内,和引入ueditor差不多 1.引入项目资源 <!--m ...
- Yii2项目实现Markdown功能 在线Markdown编辑器
版权声明:本文为博主原创文章,欢迎扩散,扩散请务必注明出处. Yii中添加MarkDown编辑器 主要使用了两个网页Markdown编辑器,都带预览功能. 1,ijackua/yii2-lepture ...
- JAVA WEB项目中使用并改造editor.md实现Markdown编辑器
Markdown和Editor.md简介 Markdwon编辑器在技术工作者圈子中已经越来越流行,简单的语法,统一的格式,强大的扩展功能,最重要的是:你可以用Markdown,设计一篇精彩绝伦的文档而 ...
- 这可能就是你苦苦寻找免费、高颜值、功能强大的 Markdown 编辑器(共5款)
本文作者 | HelloGitHub-小猪蹄 Markdown 是一个轻量级的标记语言,语法简单.容易上手,它深受程序员.博客主等人群的钟爱.随着越来越多的博客系统支持 Markdown,它也开始越来 ...
- 基于Java和Bytemd用120行代码实现一个桌面版Markdown编辑器
前提 某一天点开掘金的写作界面的时候,发现了内置Markdown编辑器有一个Github的图标,点进去就是一个开源的Markdown编辑器项目bytemd(https://github.com/byt ...
- 任由文字肆意流淌,更自由的开源 Markdown 编辑器
对于创作平台来说内容编辑器是十分重要的功能,强大的编辑器可以让创作者专注于创作"笔"下生花.而最好取悦程序员创作者的方法之一就是支持 Markdown 写作,因为大多数程序员都是用 ...
- 好用的Markdown编辑器一览 readme.md 编辑查看
https://github.com/pandao/editor.md https://pandao.github.io/editor.md/examples/index.html Editor.md ...
- NanUI for Winform 使用示例【第二集】——做一个所见即所得的Markdown编辑器
经过了这一个多星期的调整与修复,NanUI for .NET Winform的稳定版已经发布.应广大群友的要求,现已将NanUI的全部代码开源. GitHub: https://github.com/ ...
- 使用Markdown编辑器写博客
使用Markdown编辑器写博客 本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图 ...
随机推荐
- Linux下的SVN服务器搭建
Linux下的SVN服务器搭建 鉴于在搭建时,参考网上很多资料,网上资料在有用的同时,也坑了很多人 本文的目的,也就是想让后继之人在搭建svn服务器时不再犯错,不再被网上漫天的坑爹作品所坑害,故此总 ...
- 高级数据过滤(like)
单字符过滤 '_' select * from T_Employee where FName like '_erry' 多字符过滤 '%' select * from T_Employee wher ...
- Java 根据经纬度计算两点之间的距离
package xxx.driver.business.utils; /** * <p>Represents a point on the surface of a sphere. (Th ...
- Cygwin中解决vi编辑器方向键和Backspace键不好使、安装vim的方法
修改.virc文件(如果没有就创建)vi .virc 添加以下内容set nocpset backspace=start,indent,eol 保存退出:wq 如果是vim就修改.vimrc文件. 由 ...
- RabbitMq 集群搭建
实验环境: 操作系统为 Centos 7.2 IP hostName 192.168.190.132 node132 192.168.190.139 node139 192.168.190.1 ...
- ubuntu 安装 vmware 12
安装VMware Workstation 12 ubuntu15.10安装VMware Workstation12的步骤如下: 1.在 https://download3.vmware.com/sof ...
- C#简单的对象交互
在对象的世界里,一切皆为对象;对象与对象相互独立,互不干涉,但在一定外力的作用下对象开始共同努力 对象交互的实例 电视机大家都有吧,依照万物皆对象的思维模式来看,电视机可以是一个类,然后电视机有一些基 ...
- [LeetCode] Coin Change 硬币找零
You are given coins of different denominations and a total amount of money amount. Write a function ...
- 在 sublime 中运行 JavaScript 代码
安装 Node 环境,参考 Node.js入门 打开 Sublime,选择 Tools > Build System > New Build System... 会打开一个新的文件,粘贴以 ...
- mysql中间件atlas配置使用
MySQL所在机器: 192.168.16.70(Master) 192.168.16.74(Slave) 192.168.16.72(atlas)注意:主从复制需要自行配置atlas配置使 ...