Add localStorage to this Rich Text Editor-CodePudding

Can you please help me add localStorage thing to the code below. I'm not good at creating Javascript code and still learning about it. The code is located below.

CodePudding user response：

I will give you an example:

You want to save in local storage the lastname of a person

you will do something like that:

Save in localstorage

localStorage.setItem("lastname", "Wave");

With the above code, you do something like that lastname = wave

Get the value from localStorage

localStorage.getItem("lastname");

It will return Wave

Please be more specific about the data you want to save in localStorage from your code

CodePudding user response：

You can add your code and we are here to help you thanks!

CodePudding user response：



<link rel='stylesheet' href='https://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css'>

<style>
body {
  margin: 0 auto;
  width: 600px;
  font-family: 'Dosis';
}

a{
  cursor:pointer;
}

#editor {
  box-shadow: 0 0 2px #CCC;
  min-height: 150px;
  overflow: auto;
  padding: 1em;
  margin-top: 20px;
  resize: vertical;
  outline: none;
}

.toolbar {
  text-align: center;
}

.toolbar a,
.fore-wrapper,
.back-wrapper {
  border: 1px solid #AAA;
  background: #FFF;
  font-family: 'Candal';
  border-radius: 1px;
  color: black;
  padding: 5px;
  width: 1.5em;
  margin: -2px;
  margin-top: 10px;
  display: inline-block;
  text-decoration: none;
  box-shadow: 0px 1px 0px #CCC;
}

.toolbar a:hover, .fore-wrapper:hover, .back-wrapper:hover {
  background: #f2f2f2;
  border-color: #8c8c8c;
}

a[data-command='redo'],a[data-command='strikeThrough'],a[data-command='justifyFull'],a[data-command='insertOrderedList'],a[data-command='outdent'],a[data-command='p'],a[data-command='superscript']{
  margin-right:5px;
  border-radius:0 3px 3px 0;
}

a[data-command='undo'],.fore-wrapper,a[data-command='justifyLeft'],a[data-command='insertUnorderedList'],a[data-command='indent'],a[data-command='h1'],a[data-command='subscript']{
  border-radius:3px 0 0 3px;
}

a.palette-item {
  height: 1em;
  border-radius: 3px;
  margin: 2px 1px;
  width: 1em;
}

.fore-palette,
.back-palette {
  display: none;
}

.fore-wrapper,
.back-wrapper {
  display: inline-block;
  cursor: pointer;
}

.fore-wrapper:hover .fore-palette,
.back-wrapper:hover .back-palette {
  display: block;
  float: left;
  position: absolute;
  padding: 3px;
  width: 10em;
  background: #FFF;
  border: 1px solid #DDD;
  box-shadow: 0 0 5px #CCC;
  height: 4.4em;
}

.fore-wrapper:hover .fore-palette {
  left: 34%;
  top: 42px;
}

.back-wrapper:hover .back-palette {
  left: 36%;
  top: 42px;
}

.fore-palette a,
.back-palette a {
  background: #FFF;
  margin-bottom: 2px;
}
</style>
<!-- partial:index.partial.html -->
<link href='https://fonts.googleapis.com/css?family=Dosis|Candal' rel='stylesheet' type='text/css'>
<div >
  <a href="#" data-command='undo'><i class='fa fa-undo'></i></a>
  <a href="#" data-command='redo'><i class='fa fa-repeat'></i></a>
  <div ><i class='fa fa-font' style='color:#C96;'></i>
    <div >
    </div>
  </div>
  <div ><i class='fa fa-font' style='background:#C96;'></i>
    <div >
    </div>
  </div>
  <a href="#" data-command='bold'><i class='fa fa-bold'></i></a>
  <a href="#" data-command='italic'><i class='fa fa-italic'></i></a>
  <a href="#" data-command='underline'><i class='fa fa-underline'></i></a>
  <a href="#" data-command='strikeThrough'><i class='fa fa-strikethrough'></i></a>
  <a href="#" data-command='justifyLeft'><i class='fa fa-align-left'></i></a>
  <a href="#" data-command='justifyCenter'><i class='fa fa-align-center'></i></a>
  <a href="#" data-command='justifyRight'><i class='fa fa-align-right'></i></a>
  <a href="#" data-command='justifyFull'><i class='fa fa-align-justify'></i></a>
  <a href="#" data-command='indent'><i class='fa fa-indent'></i></a>
  <a href="#" data-command='outdent'><i class='fa fa-outdent'></i></a>
  <a href="#" data-command='insertUnorderedList'><i class='fa fa-list-ul'></i></a>
  <a href="#" data-command='insertOrderedList'><i class='fa fa-list-ol'></i></a>
  <a href="#" data-command='h1'>H1</a>
  <a href="#" data-command='h2'>H2</a>
  <a href="#" data-command='createlink'><i class='fa fa-link'></i></a>
  <a href="#" data-command='unlink'><i class='fa fa-unlink'></i></a>
  <a href="#" data-command='insertimage'><i class='fa fa-image'></i></a>
  <a href="#" data-command='p'>P</a>
  <a href="#" data-command='subscript'><i class='fa fa-subscript'></i></a>
  <a href="#" data-command='superscript'><i class='fa fa-superscript'></i></a>
</div>
<div id='editor' contenteditable>
  <h1>A Heading.</h1>
  <p>Some text that you can format. Try inserting an image or a link.</p>
</div>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script>
var colorPalette = ['000000', 'FF9966', '6699FF', '99FF66', 'CC0000', '00CC00', '0000CC', '333333', '0066FF', 'FFFFFF'];
var forePalette = $('.fore-palette');
var backPalette = $('.back-palette');

for (var i = 0; i < colorPalette.length; i  ) {
  forePalette.append('<a href="#" data-command="forecolor" data-value="'   '#'   colorPalette[i]   '" style="background-color:'   '#'   colorPalette[i]   ';" ></a>');
  backPalette.append('<a href="#" data-command="backcolor" data-value="'   '#'   colorPalette[i]   '" style="background-color:'   '#'   colorPalette[i]   ';" ></a>');
}

$('.toolbar a').click(function(e) {
  var command = $(this).data('command');
  if (command == 'h1' || command == 'h2' || command == 'p') {
    document.execCommand('formatBlock', false, command);
  }
  if (command == 'forecolor' || command == 'backcolor') {
    document.execCommand($(this).data('command'), false, $(this).data('value'));
  }
    if (command == 'createlink' || command == 'insertimage') {
  url = prompt('Enter the link here: ','http:\/\/'); document.execCommand($(this).data('command'), false, url);
  }
  else document.execCommand($(this).data('command'), false, null);
});
</script>