点击div块进行文本编辑
工作需要，需要实现如下一个需求，点击模板div块，跳出文本编辑器对div文本内容进行编辑。实现效果图如下：
实现思路如下：
1.给每个需要编辑的div加上contenteditable="false"属性，表示暂不可编辑，之后写一个点击事件，点击当前div将当前div的contenteditable属性改为true，其他div都改为false。
2.第二步点击右侧文本编辑时，对contenteditable属性为true的div进行样式修改。
代码如下。
<link href="assets/css/vendor/bootstrap/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="assets/js/vendor/colorpicker/css/bootstrap-colorpicker.css">
<body>
<!--需要编辑的div块-->
<div class='editable' contenteditable="false">公司使命</div>
<div class='editable' contenteditable="false">通过互联网服务提升生活品质</div>
<!--文本编辑器-->
<div class="writingsize">
<label for="input01">字号:</label>
<div class="writingsize-input">
<select class="chosen-select chosen-transparent form-control" id="input01">
<option value="10px">10px</option>
<option value="12px">12px</option>
<option value="13px" selected = "selected">13px</option>
<option value="15px">15px</option>
<option value="18px">18px</option>
<option value="20px">20px</option>
</select>
</div>
</div>
<div class="writingsize">
<label for="colorpicker">设置:</label>
<div class="colorpicker-input">
<div class="jz-colorpicker" id="colorpicker"></div>
<div class="overstriking ziti" id="overstriking">B</div>
<div class="italicsty ziti" id="italicsty">I</div>
<div class="underlinesty ziti" id="underlinesty">U</div>
<div class="place-left" id="place-left"><img src="assets/images/styleimage/左对齐.png"></div>
<div class="place" id="place-center"><img src="assets/images/styleimage/居中.png"></div>
<div class="place" id="place-right"><img src="assets/images/styleimage/右对齐.png"></div>
</div>
</div>
<script src="assets/js/jquery.js"></script>
<!--颜色选择器-->
<script src="assets/js/vendor/colorpicker/bootstrap-colorpicker.min.js"></script>
<script>
$(function() {
//点击div，将当前div属性contenteditable改为true，其他div改为false
$(".editable").click(function(e){
var a = $(this).attr("contenteditable");
if(a==false||a=='false'){
$(".editable").attr("contenteditable",false);
$(this).attr("contenteditable",true);
}
})
/*文本编辑器*/
//颜色选择器
$('#colorpicker').colorpicker();
$('#colorpicker').colorpicker().on('showPicker', function(e){
var newtop = $('.dropdown-menu.colorpicker.colorpicker-visible').position().top - 45;
$('.dropdown-menu.colorpicker.colorpicker-visible').css('top', newtop + 'px');
});
$('#colorpicker').on('changeColor', function(event) {
$('#colorpicker').css('background-color', event.color.toString());
$("div[contenteditable='true']").css("color",event.color.toString());
});
//改变字体颜色
$("#input01").change(function(){
var zihao = $("#input01 option:selected").val();
$("div[contenteditable='true']").css("font-size",zihao);
});
//加粗
$("#overstriking").on('click',function(){
var a = $("div[contenteditable='true']").css("font-weight");
if(a!=='700'){
$("div[contenteditable='true']").css("font-weight","bold");
$("#overstriking").css("background-color","#75E5FF");
}else{
$("div[contenteditable='true']").css("font-weight","normal");
$("#overstriking").css("background-color","");
}
});
//斜体
$("#italicsty").on('click',function(){
var a = $("div[contenteditable='true']").css("font-style");
if(a!=='italic'){
$("div[contenteditable='true']").css("font-style","italic");
$("#italicsty").css("background-color","#75E5FF");
}else{
$("div[contenteditable='true']").css("font-style","");
console.log("sssssssssss");
$("#italicsty").css("background-color","");
}
});
//下滑线
$("#underlinesty").on('click',function(){
var a = $("div[contenteditable='true']").css("text-decoration");
if(a!=='underline solid rgb(51, 51, 51)'){
$("div[contenteditable='true']").css("text-decoration","underline");
$("#underlinesty").css("background-color","#75E5FF");
}else{
$("div[contenteditable='true']").css("text-decoration","");
$("#underlinesty").css("background-color","");
}
});
//左对齐
$("#place-left").on('click',function(){
var a = $("div[contenteditable='true']").css("text-align");
console.log(a)
if(a!=='left'){
$("div[contenteditable='true']").css("text-align","left");
$("#place-left").css("background-color","#75E5FF");
$("#place-center").css("background-color","");
$("#place-right").css("background-color","");
}else{
$("div[contenteditable='true']").css("text-align","start");
$("#place-left").css("background-color","");
$("#place-center").css("background-color","");
$("#place-right").css("background-color","");
}
});
//居中
$("#place-center").on('click',function(){
var a = $("div[contenteditable='true']").css("text-align");
console.log(a)
if(a!=='center'){
$("div[contenteditable='true']").css("text-align","center");
$("#place-center").css("background-color","#75E5FF");
$("#place-right").css("background-color","");
$("#place-left").css("background-color","");
}else{
$("div[contenteditable='true']").css("text-align","start");
$("#place-center").css("background-color","");
$("#place-left").css("background-color","");
}
});
//右对齐
$("#place-right").on('click',function(){
var a = $("div[contenteditable='true']").css("text-align");
console.log(a)
if(a!=='right'){
$("div[contenteditable='true']").css("text-align","right");
$("#place-right").css("background-color","#75E5FF");
$("#place-left").css("background-color","");
$("#place-center").css("background-color","");
}else{
$("div[contenteditable='true']").css("text-align","start");
$("#place-right").css("background-color","");
$("#place-left").css("background-color","");
$("#place-center").css("background-color","");
}
});
})
</script>
</body>